Unknown service worker is being registered - reactjs

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?

Answer 1

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.

Answer 2

In my case:
I was using react.js and create-react-app.
I adopted new service-worker.js in public/
and my problem was that when I used yarn build to build react app, my service-worker.js is replaced with above file you copied(workbox service worker)
So I just made new file (public/worker.js) and replace
const swUrl = "${process.env.PUBLIC_URL}/service-worker.js";
with
const swUrl = "${process.env.PUBLIC_URL}/worker.js";
in src/serviceWorker.js > register > window.addEventListener('load')
and finally I can register my own service worker to my app