service-worker

fragments.js

// register the service worker after the onload event to prevent 
// bandwidth resource contention during the main and vendor js downloads
export const scripts = {
  serviceWorker:
    `"serviceWorker" in window.navigator && window.addEventListener("load", function() {
      window.navigator.serviceWorker.register("/serviceWorker.js")
        .then(function(r) {
          console.log("ServiceWorker registration successful with scope: ", r.scope)
        }).catch(function(e) {
          console.error("ServiceWorker registration failed: ", e)
        })
    });`,
};

html.js

<script src="${assets.webpackManifest.js}"></script>
<script src="${assets.vendor.js}"></script>
<script src="${assets.main.js}"></script>
<script>${scripts.loadRemainingCSS(route)}</script>
//add the serviceWorker script to your html template
<script>${scripts.serviceWorker}</script>

server.js

//serve it at the root level scope
app.use('/serviceWorker.js', express.static('build/client/serviceWorker.js'));

webpack.js

new SWPrecacheWebpackPlugin({
  cacheId: 'app-name',
  filename: 'serviceWorker.js',
  staticFileGlobsIgnorePatterns: [/\.map$/, /manifest/i],
  dontCacheBustUrlsMatching: /./,
  minify: true,
}),