Search code examples
javascriptreactjspush-notificationservice-workerworkbox

Service-worker.js doesn't register correctly

When I try to test my service worker on netlify, it doesn't register the correct one. Instead it registers a default dummy workbox service worker.

Why do I keep getting this default workbox service worker?

While developing a web app with React.js, I am trying to register the following service worker on netlify:

self.addEventListener('push', function(event) {
    event.waitUntil(
        event.data.json()
        .then(e => {
            return self.registration.showNotification(e.title, e.body);
        })
    );
});

I run the registration code and it seems to register a file.

export function registerPush() {
    return navigator.serviceWorker
        .register('./service-worker.js', {scope: '/'} )
        .then((registration) => {
            console.log('Service worker successfully registered');
            return registration;
        })
        .catch((err) => console.error('Unable to register service worker.', err));
}

The service worker that shows up in my browser seems to be basically a no-op.

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 */

importScripts("/workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "/workbox-v3.6.3"});

importScripts(
  "/precache-manifest.9c03d0ff7f2cae1038c31b553a6a799e.js"
);

workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute("/index.html", {
  
  blacklist: [/^\/_/,/\/[^/]+\.[^/]+$/],
});

My intentions are to add push notifications into my web app. Any ideas? I've tested the relative path to the service worker (it's correct) and verified if the code ever registers any other service workers (it doesn't).

Solution

  • After plenty of searching, I resolved this by using react-app-rewired npm package. To change the default service worker a react app will read, you need to be able to modify the config files.

    The problem in this case occurs because create react app hides access to the react config files.

    There are 2 ways I know about how to modify these files:

    Read the documentation of each one and choose whichever is best for you. As I do not have much experience with react config files, I opted for the 2nd option.