/pwa-test

Experimenting with progressive web applications.

Primary LanguageTypeScript

PWA test

Links

Running

Prerequisite

# Dependencies
npm install

Start

# Dev environment
npm run dev
# Build prod
npm run build

# Test prod locally
#  Alt. `serve -l 8000 docs`
npm run preview

Deploy

Since we are using gh-pages, every push is a deployment. However only the /docs folder is served. Therefor a production build is required before the push.

# Only deploy whats committed
git add .
git stash
# Build
npm run build -- --base '/pwa-test/'
# Commit and deploy the build
git add docs
git commit -m "Deploy production build"
git push
# Reset working files
git stash pop

Live site

The live site is hosted on github pages. https://pirfalt.github.io/pwa-test/

Gotchas

Turns out that when you call navigator.serviceWorker.register('service-worker.js) the request for service-worker.js isn't intercepted by any service worker's fetch event handler.

Since that request is not handled by the service worker the service worker itself is always requested from the server. Which leads to at least one request to the server every time, completely negating the offline capability 😭.

However that special request does respect the http caching headers. So that "completely negating the offline capability" is not actually true 😅. But rather, offline capability only works for as long as the service worker does not need to be re-fetched. Meaning at most until the cache time expires or the file is evicted by the browser.

TODO