Basic PWA Manifest Files (as of September 2020)

e360_pwa_files.md

Here is what our default worker.js file includes

importScripts("https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js");
if (workbox) {
  workbox.setConfig({
    debug: false,
  });
  workbox.loadModule("workbox-core");
  workbox.loadModule("workbox-precaching");
  workbox.loadModule("workbox-strategies");
  workbox.loadModule("workbox-routing");

  workbox.core.setCacheNameDetails({
    prefix: "9", // The site id of the site
    suffix: "v1", // Change this version to invalidate the cache
  });

  // Cache images, css, js files
  // The .+ means it will cache across all domains, not just this domain
  // Stale While Revalidate means use cache and then fetch fresh from the network and re-cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.(?:png|jpg|jpeg|svg|gif|ico|css|js)(?!\/)'),
    new workbox.strategies.StaleWhileRevalidate()
  );

  // Cache anything that is being requested from the /font(s)/ folder
  // Stale While Revalidate means use cache and then fetch fresh from the network and re-cache
  workbox.routing.registerRoute(
    new RegExp('\/fonts?\/'),
    new workbox.strategies.StaleWhileRevalidate()
  );

  // Cache anything that is being requested from Google or OneSignal
  // These are usually map api, google fonts, and one signal configuration
  // Stale While Revalidate means use cache and then fetch fresh from the network and re-cache
  workbox.routing.registerRoute(
    new RegExp('.*(?:googleapis|gstatic|onesignal)\.com'),
    new workbox.strategies.StaleWhileRevalidate()
  );

  // Requests directly to monkcms.php? should first try using the network, if the network fails, then use the cache.
  // The only reason these are called are to grab information related to push notifications and popup notifications.
  // We want to always use fresh content, but if the network fails, it would be better to fallback to the cache.
  workbox.routing.registerRoute(
    new RegExp('(monkcms\.php\?)'),
    new workbox.strategies.NetworkFirst({ networkTimeoutSeconds: 5 })
  );

  // This default handler is used to grab "dynamic" content. Things like actual page content.
  // We will use the network first... if we are offline or we get a timeout, we will use cache.
  // We give it the default server timeout, because in most circumstances this is what we want to use.
  // This default handler is what allows us to do offline mode and still have something to look at.
  workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst({ networkTimeoutSeconds: 30 }));
}

Here is what our manifest.json file looks like.

{
    "__notice": "This file is generated automatically and should not be edited directly. Data can be added to this file in the CMS or by contacting support@monkdevelopment.com",
    "name": "LONG WEBSITE NAME!",
    "short_name": "SHORT WEBSITE NAME",
    "start_url": "/?mode=monk-pwa",
    "display": "standalone",
    "background_color": "#ff58c2",
    "theme_color": "#ff6309",
    "description": "Here is a description",
    "icons": [
        {
            "src": "https://4b4ee17710d937b720f8-c47c303e25d156b29e42ebf972d1cffa.ssl.cf2.rackcdn.com/app-icon/192/s/0e86_1588184618_stella.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "https://4b4ee17710d937b720f8-c47c303e25d156b29e42ebf972d1cffa.ssl.cf2.rackcdn.com/app-icon/512/s/0e87_1588184618_stella.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ]
}

Both of these files are generated automatically by the CMS but they allow additional customizations to be made from within the CMS.