PWA test

Links

• MDN Service Worker
• Stuff I wish I'd known sooner about service workers
• Offline Cookbook
• Introduction to Service Worker
• 100 second youtube introduction
• Talk by Jake Archibald
• Service Worker Caching and HTTP Caching
• MDN HTTP caching
• Caching best practices & max-age gotchas

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

• Introduction and background.
• Watch 100 second youtube introduction.
• Offline support.
  • Basic cache strategies.
    • Cache only.
    • Cache first, refresh in background.
    • Server first, with refresh, fallback to cache.
• Manifest.
  • https://developer.mozilla.org/en-US/docs/Web/Manifest
  • https://www.pwabuilder.com/imageGenerator
  • https://manifest-gen.netlify.app/
  • https://app-manifest.firebaseapp.com/

  • {
      "$schema": "https://json.schemastore.org/web-manifest-combined.json",
      "name": "PWA test lab",
      "short_name": "PWA test",
      "start_url": ".",
      "display": "standalone",
      "theme_color": "#ff0000",
      "background_color": "#000000",
      "description": "PWA Test Webpage",
      "icons": [
        {
          "src": "icons/ios/100.png",
          "sizes": "100x100"
        }
        ...
      ]
    }
    

• App idea choice.
• UX experimentation.
  • How do you "install" a PWA? Is it good enough?
  • Add to home screen on IOS 😢
  • TODO(android): @sara/@alex, tomorrow.
• Support "research".
• Forms, 100% client side.
• Storage alternatives?
• Camera support?