PWA Usage

[badpenguin]

Did you had look trying to use all the libraries offline? I wish to build a PWA and need to have the files locally to be served and cached by a service worker.

[ekeijl]

That's a cool idea, I'll look into it.

[ekeijl]

Adding PWA capabilities was relatively easy, but there are some caveats:

• I need to list all static assets (JS, images, etc) in our service worker file, because the service worker does not know which files should be cached. This is essential for offline availability.
  • This list needs to be updated manually.
  • In order to make this less of a chore, I added the listCacheFiles.mjs Node script that outputs all files that need to be cached. This file needs to be updated manually when the source code is refactored.
  • Sadly, this adds somewhat of a build step to our development process. Build tools like Webpack automate this process using workbox.
• I used a cache first strategy: the service worker tries to look up a resource in the cache first and responds with that if found, otherwise it sends the network request.
• Resources that are not initially cached are put into the cache when they are intercepted by the service worker (so called runtime caching).
  • This is required to properly cache external resources (import libraries and CSS).
  • We cannot fully rely on runtime caching, because it requires the user to have visited those URLs before they are put into the cache. It should only be used for external resources that are outside of our control.
• The PWA only works in a secure environment (localhost or served over https).

I tested it in Edge and I could install the app on Windows as a desktop application. After setting the app in 'Offline mode' in the dev tools, all files were served from the service worker.

[badpenguin]

Ah sorry maybe I didn't explained myself pretty good :) The problems are the import from the CDN, there is no guarantee that all of them gets cached by the service worker using a cache strategy. Also I don't love to cache unpredictable 3thy party resources :) I wish to have all the files locally.

Meanwhile I found this one that allows me to create a single offline bundle with all the libraries that I use: https://github.com/mujahidfa/preact-htm-signals-standalone