ServiceWorker loaded with workbox-window is 'undefined' on production server

Question

I am using workbox-build (version 5.1.4) in Grunt to generate a service worker for an AngularJs project. I use workbox-window (version 5.1.4) to load the service worker. It loads fine and works great on my dev machine. When I deploy to the production server I get this error:

"DOMException: Failed to register a ServiceWorker for scope ('https://app.url.com/') with script ('https://app.url.com/undefined'): The script has an unsupported MIME type ('text/html')."

Example (this gives an error on production):

import { Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  let registration;
  const wb = new Workbox('/sw.js');
  wb.register().then(r => {
            registration = r;
            console.log('SW scope', r.scope);
        });
 }

The same service worker loads without errors on the production server if I don't use workbox-window so I don't think it is a permission problem or a path problem. Example (this works fine on production):

 window.addEventListener('load', () => {
        let registration;
        navigator.serviceWorker.register('/sw.js').then(r => {
            registration = r;
            console.log('SW scope', r.scope);
        });
    });

This is my service worker config:

workboxBuild.generateSW({
        globDirectory: user_config.app.base_dir,
        globPatterns: [
            'app/**/*.{html,js,css,png,jpg,svg,gif,map,tff,woff}',
            'app/vendor/**/*.{html,js,css,png,jpg,svg,gif,map}',
            'app/*.css',
            'app/images/*.{png,jpg,svg,gif,tff,woff}',
        ],
      //  mode: 'debug',
        runtimeCaching: [
            {
                method: 'GET',
                urlPattern: /.*/,
                handler: 'NetworkFirst'
            }
        ],

        clientsClaim: true,
        ignoreURLParametersMatching: [/.*/],
        navigateFallback: 'app/index.html',
        offlineGoogleAnalytics: true,
        maximumFileSizeToCacheInBytes: 18000000,
        swDest: user_config.app.base_dir + '/sw.js'
    })

Any help would be greatly appreciated.

Answer 1

等待大神解答