Deno Fresh PWA
Some people have reached out and asked me to do a talk on Deno Fresh and Progressive Web Apps (PWA) and I thought this would be a great topic to create a presentation for.
Get it on Github
Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience similarly found with native apps.
No. PWAs are built to take advantage of native mobile device features, without requiring the end user to visit an app store, make a purchase and download software locally.
curl -fsSL https://deno.land/x/install@v0.1.8/install.sh | sh
Deno Fresh App
deno run -A -r https://fresh.deno.dev deno-fresh-pwa
cd deno-fresh-pwa
deno task start
<Head />Open VSCode or another IDE and head over to the index.tsx and import the
<Head /> component from Deno Fresh like so
import { Head } from "https://deno.land/x/fresh@1.1.6/runtime.ts";
Inside the same file index.tsx, add a reference to the manifest.webmanifest
file.
<link
crossorigin=
rel=
href=
/>
Inside the same file index.tsx, add the following PWA script.
<script type="module">
import
"https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate/dist/pwa-update.js"; const
el = document.createElement("pwa-update"); document.body.appendChild(el);
</script>
Inside your /static directory, create a new file called manifest.manifest or
manifest.json. Then add the following code snippet to it.
{
"name": "",
"short_name": "",
"theme_color": "#000000",
"background_color": "#000000",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"orientation": "any",
"icons": [
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/manifest-icon-512.maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
Inside your /static directory, create a new file called pwa-sw.js. Then add
the following code snippet to it.
https://gist.github.com/erictherobot/4cef30ba1edc184c88e454bf2dc71507
Inside your /static directory, create a new file called pwa-sw-register.ts.
Then add the following code snippet to it.
https://gist.github.com/erictherobot/5778631a1fcc72d45d5c18f5359a0809
Inside your /static directory, create a set of new image / icon files.
favicon.ico
icon-192x192.png
icon-256x256.png
icon-384x384.png
icon-512x512.png
manifest-icon-192.maskable.png
manifest-icon-512.maskable.png
You can use an online tool like https://realfavicongenerator.net which will give you all the assets needed from uploading a single image.
You've created a Progressive Web App using Deno Fresh!
Your users will thank you and now you can ask your boss for a raise...
realfavicongenerator.net
pwabuilder.com
Thanks for reading. Happy coding!
Please consider Buying Me A Coffee. I work hard to bring you my best content and any support would be greatly appreciated. Thank you for your support!