My First PWA

A Progressive Web App is a website which you can pin to your homescreen and use offline like an app. To make a website into a PWA, you have to add some metadata and a script. I’m gonna boil these down to the absolute minimum - this example is a simple single page app with just an index.html.

…and amend the list of files registered by the cache.addAll statement to fit your web app.

4. You did it! 👍

Your site is now offline enabled!

Offline users will only have access to the assets you listed above. So if your setup is more complex, you’ll have to decide where to draw the line. The Service Worker is a robot script that decides how to get resources for the user when they’re offline; Mariko did the best Service Worker explainer ever with cute illustrations to explain what it does.

If you want to make a dedicated ‘Oops, you’re offline’ page, there are other guides for that! (See Sources below)

When you make changes to your app, you have to change the version variable to refresh clients! This can be annoying. Probably someone out there knows a better way! 😅