Progressive Web App

I decided to make my website installable, so it can be added to a device as an installed application. The way to do this is to add some javascript to the site so that it is a Progressive Web App (PWA).

To be a PWA, a website needs only one thing: a service worker. Adding one is fairly straightforward, once you know how. It does require a good understanding of asynchronous JavaScript, something which I struggle with. The alternative is just to copy someone else's service worker code and adapt if needed. I chose the alternative. 🤷‍♂️

So I copied the one from Jeremy Keith. It took me a while to get it to work, although I am not sure I really changed anything very much. However, debugging PWAs is more complex than plain JavaScript. So most of my efforts were trial and error. And then it worked. Magic! 🧙‍♂️

I even managed to get an offline page working for the PWA. Again, copied from Jeremy's offline page. What this page does, thanks to some nifty JavaScript, is check if there is a network connection. If there is it fetches the page from the server. If there isn't, it tries to fetch the page from the cache. If the page has not been cached, it displays a list of pages that have been cached and are therefore available for offline reading. Fantastic!