Allow Desktop PWA's

Feature Requests
30

We have done PWAs recently, with Hype only content.

Works pretty good on desktop macOS, Windows, Linux. To be tested on iOS, Android tablets.

With Google Chrome as browser the ‘offline app’ can be installed. We are currently exploring how to do more clear install and update dialogues. It is a bit subtle with the small install button in the URL field of Chrome. (Also considering to be able to support more browsers.)

Follow this guide:

in a Terminal window:
npm install workbox-cli --global

Create a manifest, manifest.json example below.

{
    "short_name": "MgWapp",
    "name": "My great web app",
    "icons": [
        {
            "src": "images/icon-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "images/icon-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "background_color": "#242424",
    "theme_color": "#242424",
    "display": "fullscreen",
    "orientation": "landscape"
}

Get help create a manifest:

Create a config js file, simple example below.

module.exports = {
  "globDirectory": "demo/",
  "globPatterns": [
    "**/*.{gif,js,html,svg,ttf,woff,woff2,eot,otf,png,mp4,PNG,jpg,json,css}"
  ],
  "swDest": "demo/sw.js",
  "maximumFileSizeToCacheInBytes": "20000000", //20MB
  "skipWaiting": "true", //Force upgrade by activating updated SW on install. If false user must close all related tabs to upgrade.
  "clientsClaim": "true", //'true' forces browser to start using SW immediately on successful registration/install. Only applicable for first registration (not for updates)
  "mode": "production", //use "development" to inspecting and debug
  "sourcemap": "false", //source maps for auto generated code is not very interesting
  "inlineWorkboxRuntime": "true", //runtime size is negligible; generate service worker as a single file
  "offlineGoogleAnalytics": "false" //we're not using google analytics
};

In the config, skipWaiting and clientsClaim is essential to understand. See links below.

The HTML-file for the app is a good place to register the service worker, example below:

  // Check that service workers are supported
  if ('serviceWorker' in navigator) {
    // Use the window load event to keep the page load performant
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('sw.js').then(function (registration) {
        //console.log('Service Worker registered');
      }).catch(function (err) {
        console.log('Service Worker registration failed: ', err);
      });
    });

    var refreshing;
    navigator.serviceWorker.addEventListener('controllerchange',
      function () {
        if (refreshing) return; //avoid refresh loop (Can happen with "Update on refresh" in Chrome DevTools)
        console.log("Service worker updated - Refreshing page...");
        refreshing = true;
        window.location.reload();
      }
    );
  }

In the HTML, we have removed the get -parameters for the hype generated js code:
…hype_generated_script.js?86883…

?86883 removed.

Could perhaps be kept, take a look at the config options in this link:
https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW

In a Terminal window,
generate the service worker:
workbox generateSW workbox-config.js

In a Terminal window,
simple test on a local web server:
npx http-server

On macOS and Windows 10, the app will be installed in Applications. Windows get a shortcut on the desktop.

Custom icons has been added. The Hype project files are excluded from what the service worker generates.

Creds to my talented developer colleague Jon! His links on reading more on this:


4 Likes