Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 753
Tuan Nguyen Avatar asked Jan 17 '18 07:01

Tuan Nguyen


People also ask

How do I use the Firefox service worker API?

In Firefox, Service Worker APIs are hidden and cannot be used when the user is in private browsing mode. Install and activate: populating your cache After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site. The install event is fired when an install is successfully completed.

When is installation of a service worker attempted?

Installation of the worker is attempted when service worker-controlled pages are accessed subsequently. An Install event is always the first one sent to a service worker (this can be used to start the process of populating an IndexedDB, and caching site assets).

Why is the new version of my service worker not activated?

If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker.

Are service workers enabled by default in all browsers?

These days, service workers are enabled by default in all modern browsers. To run code using service workers, you’ll need to serve your code via HTTPS — Service workers are restricted to running across HTTPS for security reasons.


1 Answers

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.

like image 118
Tuan Nguyen Avatar answered Sep 20 '22 07:09

Tuan Nguyen