Search code examples
javascriptfirefoxservice-workerweb-push

Firefox TypeError: ServiceWorker script encountered an error during installation


I'm developing web push notification on my website. I follow the Web Push Notifications of Google and The Service Worker Cookbook of Mozilla.

I have tested on the Google Chrome v50+ and everything is working but I will get the error below on Firefox 44, 45, 46, 52, latest Firefox (version 57.0.4 64 bit) when calling navigator.serviceWorker.register('./push-service-worker.js') function.

TypeError: ServiceWorker script at http://localhost:9600/push-service-worker.js for scope http://localhost:9600/ encountered an error during installation.

This is my code:

Register ServiceWorker in controller.js

navigator.serviceWorker.register('push-service-worker.js')
.then((registration) => {
  return registration.pushManager.getSubscription()
    .then((subscription) => {
      if (subscription) {
        return subscription;
      }
      var subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: buildApplicationServerKey(),
      };
      return registration.pushManager.subscribe(subscribeOptions);
    });
})
.then((subscription) => {
  sendSubscriptionToServer(subscription);
})
.catch((err) => {
  console.log('Unable to subscribe to push: ', err);
});

push-service-worker.js

'use strict';

self.addEventListener('push', (event) => {
  var payload = event.data.json();
  var title = payload.title || 'Title';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: payload.body,
      icon: './common/images/notification-icon-192x192.png',
      image: payload.image || '',
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  var urlToOpen = new URL('/', self.location.origin).href;
  event.waitUntil(
    clients.matchAll({
      type: 'window',
      includeUncontrolled: true,
    })
      .then((windowClients) => {
        var matchingClient = null;
        for (var i = 0; i < windowClients.length; i++) {
          var windowClient = windowClients[i];
          if (windowClient.url === urlToOpen) {
            matchingClient = windowClient;
            break;
          }
        }

        if (matchingClient) {
          return matchingClient.focus();
        } else {
          return clients.openWindow(urlToOpen);
        }
      })
  );
});

Directory structure

./root
  ---- manifest.json
  ---- push-service-worker.js
  ---- src
       ---- controller.js

Thank for helping!


Solution

  • As wanderview said at here:

    FWIW, you should always use a separate profile for each channel (release/beta/dev-edition/nightly). We're working on making it work like that out-of-the-box, but its not ready yet.

    This problem is encountered when I use one profile for multiple Firefox version. To fix this issue go to about:support and click Refresh Firefox. If it doesn't work, you can go to about:profiles, click Create new profile, and then Launch profile in new browser.