Unknown service worker is being registered

Question

I am using the built in service worker found in create-react-app. I have registered it in index.tsx with serviceWorker.register();. If I create a production build and run it, or run it on heroku server, I successfully get a service worker registered. However, upon further inspection under the Application tab in the dev tools, I see service-worker.js as the name of my service worker, which is NOT what mine is called. Inspecting the worker, it is also very different code from that of the default create-react-app, the contents are below -

/**
 * 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.
 * See https://developers.google.com/web/tools/workbox/guides/service-worker-checklist
 *
 * 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.
 * See https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "/precache-manifest.740fac3abc44b443a1d2c6ac9789a1e1.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

workbox.core.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://developers.google.com/web/tools/workbox/modules/workbox-precaching
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {

  blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
});

Meanwhile the create-react-app service worker should look like this.

I am wondering where this other service worker is coming from, and how can I make sure my own is registered instead?

Did you run the build script on your create-react-app? And did you look at your service worker before or after the build? — Sydney Y
Yes, I ran the build script and looked both before and after. Before it looked identical to the above linked create-react-app service worker file, and after there is a generated service-worker.js file in the build folder that is identical to the one I pasted above. This does look to be the one that is showing up in the dev tools, but it doesn't seem to reflect my source file. For example I added in a fetch event as well as a console.log for testing, and neither show up in the generated file. — Kyle Soeltz
In your build folder is there any mention of that precache-manifest? — Sydney Y

Sydney Y Sydney Y · Accepted Answer · 2020-02-12T04:48:27

I haven't read them both, but it seems like maybe yours was compiled/transpiled by webpack into that one.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json

That service worker cdn is workbox v4.3.1 which you can see in the above package.json is a dependency. It is then used in a webpack config file.

Typescript is a way to write JavaScript, but it needs to be changed to JavaScript before it can be run in most cases.

Edit: where it's used

https://github.com/facebook/create-react-app/blob/589b41aecaa10d410713794f66a648bf3a72fb62/packages/react-scripts/config/webpack.config.js#L674

https://create-react-app.dev/docs/making-a-progressive-web-app/

And in conclusion: serviceWorker.ts is not a service worker. It is used to register one. The one you see on Heroku? That is the service worker you registered for, create-react-app's default one.

Unknown service worker is being registered

2 Answers