Service worker not loading when offline

Question

Service worker not loading when offline

Closed this issue 8 years ago · 1 comments

So, when attempting to load my site, after setting network to 'offline' in devTools, I am presented with (see attached image):

An unknown error occurred when fetching the script.
service-worker.js Failed to load resource: net::ERR_INTERNET_DISCONNECTED

My code is as follows:

webpack.js

var path = require('path');
var webpack = require('webpack');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  context: __dirname,
  entry: {
    main: path.resolve(__dirname, './client/app'),
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: '[name]-[hash].js',
    publicPath: '/public/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),
    new SWPrecacheWebpackPlugin(
      {
        cacheId: 'flamingoCity',
        filename: 'service-worker.js',
        stripPrefix: path.join(__dirname, 'public').replace(/\\/g,"/"),
        maximumFileSizeToCacheInBytes: 6194304,
        minify: true,
        runtimeCaching: [{
          handler: 'cacheFirst',
          urlPattern: /[.]mp3$/,
        }],
      }
    ),
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flamingo City</title>
    <link rel="shortcut icon" type="image/png" href="http://wes.io/ehRe/my-favourite-icon.png"/>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/main-bcd2549cd3ae2963222b.js"></script>
    <script>
      /*
        Register Service Worker
      */

      if('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          console.log('CLIENT: service worker registration in progress.');
          navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
          console.log("CLIENT: service worker registration succeeded. Scope is " + reg.scope)
          reg.onupdatefound = function() {
            var installingWorker = reg.installing;

            installingWorker.onstatechange = function() {
              switch (installingWorker.state) {
                case 'installed':
                  if (navigator.serviceWorker.controller) {
                    console.log('CLIENT: New or updated content is available.');
                  } else {
                    console.log('CLIENT: Content is now available offline!');
                  }
                  break;

                case 'redundant':
                  console.error('CLIENT: The installing service worker became redundant.');
                  break;
              }
            };
          };
          }).catch(function(e) {
            console.error('CLIENT: Error during service worker registration:', e);
          });
        });
      }
    </script>
  </body>
</html>

What is the issue here?

Answer 1 · 2017-03-14T16:31:40.000Z

Updating urlPattern: from /[.]mp3$/ to '/' resolved the issue.