Failed to register a ServiceWorker when PUBLIC_URL is CDN

Can you reproduce the problem with latest npm?

Yes.

Description

When set PUBLIC_URL to a cdn address, service worker registration is blocked. It seems a cross-domain problem:

Error during service worker registration: DOMException: Failed to register a ServiceWorker: The origin of the provided scriptURL (‘https://o0tu0aq0f.qnssl.com’) does not match the current origin (‘https://apporz.com’).

Expected behavior

ServiceWorker should work well when PUBLIC_URL isn’t local host.

Actual behavior

ServiceWorker doesn’t work.

Environment

1. npm ls react-scripts (if you haven’t ejected): react-scripts@1.0.6
2. node -v: v7.10.0
3. npm -v: v4.2.0

Then, specify:

1. Operating system: macOS
2. Browser and version: Chrome 58.0.3029.110 (64-bit)

Reproducible Demo

See console output on my website.

[vincentbel]

Why not also use service worker when PUBLIC_URL env variable set to a CDN?

We can serve index.html and service-worker.js in our server(the same origin) and put other js/css/images assets into our CDN server. And then using service worker to cache assets in CDN server.

[jeffposnick]

@hartono-sulaiman-kaskus, what you describe is expected after https://github.com/facebookincubator/create-react-app/pull/2432 went into effect.

The history behind that PR can be found upthread. There are definitely scenarios in which you can configure everything properly to safely use a service worker while retrieving all of your assets from a CDN, but doing so requires a lot of assumptions (such as: your CDN supports CORS, that the deployment of your service-worker.js and CDN happens at exactly the same time, etc.). It’s not safe to make those assumptions in a general-purpose project like create-react-app.

(If you want to manually update your service worker configuration, post-eject, because you know that the way you’re using a CDN is “safe” from the issues I mentioned above, then the stripPrefixMulti option allows you to remap the precached URLs.)