Progressive web apps - PWA

Appframe controls works well in online mode. In order for them to work offline, PWA is here to help. This will make sure all javascript, css files will be available when offline. You can read more about Service Worker here.

All files should come with app frame web updates. You can start turning you app into PWA by choosing af.pwa template. It will make sure that your app will meet minimum requirements for PWA.

We are using Cache first strategy on all css and javascripts, but network first for pages. If page is not available, we will try to provide fallback '/offline' page. Make sure such exists in your article list.

Template

/* head section */ .... .... /* head section */ /* body section */ ... ... /* body section */
  • /file/component/pwa.manifest.json - used to get base setup for progressive web app. Make sure you have correct icons in place.
  • af.pwa.databinding.SaveToIndexDB.js - for offline usage. Used for communication with service worker and other methods to prepare app to offline mode.
  • af.pwa.components.FileDownload.js - for offline usage. Handles file download when user is offline.

Service worker registration in template.

/* Check if service worker is available */ if ('serviceWorker' in navigator) { window.addEventListener('load', function() { /*Check if already has been registered*/ if (navigator.serviceWorker.controller) { console.log('[PWA Builder] active service worker found, no need to register'); } else { /* Register service worker */ navigator.serviceWorker.register('af.pwa.js', { scope: '/pwa' }).then(function(reg) { console.log('Service worker has been registered for scope:'+ reg.scope); }) } }); }

Route handler

Route handler is required for af.pwa.js in order to serve service worker configuration and other options from the root. Route handler requires additional files:

  • af.pwa.sw.workbox.min.js - our service worker
  • workbox-sw.min.js - library used for service worker
  • af.pwa.lib.idb.min.js - for offline usage. Library used for Index DB
  • af.pwa.sw.dataHandler.min.js - for offline usage. Framework methods to handle incomming requests.
  • af.pwa.sw.article.min.js - for offline usage. Framework methods to store article meta data.
  • af.pwa.sw.helper.min.js - for offline usage. Framework helper methods.
  • af.pwa.sw.formData.polifill.min.js - from data polifill for Edge and Safari browser
  • af.pwa.lib.bluebird.min.js - for correct Promise usage
  • "af.pwa.sw.formData.polifill.min.js", "af.pwa.lib.bluebird.min.js"