Create React App Integration

Integration & Migration
#1

Hello,

I’m very new to using service workers. I’m trying to integrate this service into my react app created using create react app. I have followed the instructions but in my console i get …

Service worker registration failed DOMException: Failed to register a ServiceWorker for scope…

I’m using a https website. Is there anything to be aware of in a react app, it already has a service worker, can they both co exist, thanks for any help.

#2

Our service workers webpushr-sw.js will attempt to overwrite other service workers that are registered with the topmost (site root) scope. Would it be possible to import your other service workers into our service worker?

Here’s how to do that:

webpushr-sw.js contains the following by default:

importScripts('https://cdn.webpushr.com/sw-server.min.js');

Please modify the content of webpushr-sw.js to import your other service worker files like this:

importScripts('https://example.com/my-other-service-worker.js');
importScripts('https://cdn.webpushr.com/sw-server.min.js');

We recommend the above approach instead of importing our service worker into another file because our web SDK will attempt to overwrite other service workers.

Remember to remove the non-Webpushr service worker file from your server and also point your existing code (that is pointing to the non-webpushr service worker file) to webpushr service worker file (webpushr-sw.js).

More on service workers can be read here.

#3

Thanks for the reply, I will remove the create react app sw for the moment, stupidly had the webpushr sw in wrong place also, and will go from there.

For context, in the root of a create react app there is a service-worker.js file
Then in index.js also in root there is the following code included…

import * as serviceWorker from ‘./serviceWorker’
serviceWorker.register()

I have commented those out for the moment…should these two lines be added to the webpushr-sw.js?

Might be worth adding documentation for React implementations, I noticed it covered more in OneSignal.

Thank you.

#4

No you do not need to add these lines in the webpushr-sw.js

#5

By just adding webpushr worker in the root directory does not work, please provide steps/doc for react project.