Offline, Service Worker, & other Progressive Web App (PWA) features - Ecotrust/hnfp GitHub Wiki

Progressive Web App (PWA)

Application runs as a PWA on Android which allows for some mobile features (such as offline), usually reserved for platform native apps.

Service Worker (SW)

A PWA must register a SW. A SW is a JS file. Some bullets (mostly from mozilla on SW:

  • intercepting and modifying navigation and resource requests
  • respond to requests
  • caching resources
  • background sync
  • has no DOM access
  • run on different thread than main JS (it is async), bc of this localstorage and XHR cant be used inside a SW

SW Registration

registered in extra_head.html inside {% block extra_head %} note: in v1 the sw is set in offline.js

Manifest

A json file (manifest.json) that:

  • adds native application features for Android
  • added in extra_head.html inside {% block extra_head %}

Workbox

To edit SW:

  • make changes to sw.js
  • install workbox npm install workbox-cli --global if you don't have it
  • navigate to the directory containing workbox-config.js /apps/hnfp/
  • run workbox injectManifest ./workbox-config.js
    • workbox uses the settings in workbox-config.js to compile assests to be precached into the file sw.min.js