Sorry, check with the site admin for error: EACCES : when deploying to production

[rizalrhmn]

Hello, I don't know if it's related to this package, but because I'm desperate looking for solution, maybe someone can give me some hints.

Short story, I'm facing 2 problems when deploying my react app to production.

1st I got error mimetype HTML is not supported. Something like this :

error OneSignalSDKWorker.js The script has an unsupported MIME type ('text/html').
After some research, I found that maybe this error happens because when I build the react using command : npm run build, it will serve all of the files using 1 index.html. That's why react can't find those js files.

I know this because when I try to direct accessing to https://mysite.com/OneSignalSDKWorker.js, it just found nothing and get caught to my react error handler route.

So, I try to add the OneSignalSDKWorker.js to my public folder in React and rebuild it. Here are the files : https://github.com/OneSignal/OneSignal-Website-SDK/releases/download/https-integration-files/OneSignal-Web-SDK-HTTPS-Integration-Files.zip

I got those files from here : https://documentation.onesignal.com/docs/onesignal-service-worker-faq

I also try to add these lines on my App.js, using react-helmet :

<Helmet>
      <script src="/OneSignalSDKWorker.js" type="text/javascript" />
      <script src="/OneSignalSDKUpdaterWorker.js" type="text/javascript" />
    </Helmet>

After adding those solutions, I'm quite confident that now those files is already served directly at https://mysite.com/OneSignalSDKWorker.js. Because when I access it, it doesn't get caught to my react error handler route. It opened.

But instead now it shows error like these :

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Sorry, check with the site admin for error: EACCES ..

And when I access my main app, it shows error like this :

GET https://staging.cicle.app/OneSignalSDKWorker.js net::ERR_ABORTED 500 (Internal Server Error)
A bad HTTP response code (500) was received when fetching the script.
ServiceWorkerManager.js:399 [Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope ('https://mysite.com/') with script ('https://mysite.com/OneSignalSDKWorker.js?appId=xxxxxxxxxxxxxxxxxxxxxxxxxxx'): A bad HTTP response code (500) was received when fetching the script.
(anonymous) @ ServiceWorkerManager.js:399
tslib.es6.js:63 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://mysite.com/') with script ('https://mysite.com/OneSignalSDKWorker.js?appId=xxxxxxxxxxxxxxxxxxxxx'): A bad HTTP response code (500) was received when fetching the script.

Lastly, I don't understand why I need to cope with all of this stuff about service workers. because in localhost it works without setting up anything like this (start the project with only npm start, not npm run build). It just works using this package.

Here's my code in frontend :

import OneSignal, { useOneSignalSetup } from 'react-onesignal';

//Onesignal initialization
    const options = {
      notifyButton: {
        enable: true,
        size: 'small'
      }
    }
    OneSignal.initialize(process.env.REACT_APP_PUSH_NOTIF_APP_ID, options);

Specification :
Frontend : React js - create-react-app
Backend : NodeJS - express
Server : Linux Ubuntu 20.04, nginx

[rizalrhmn]

I just don't understand why I need to add the OneSignalSDKWorker.js manually? Does the point of using this package (react-onesignal) so we don't need to add manually all of the onesignal.js manually?

[rgomezp]

Howdy,
To answer the above question, the package does not add this file for you. It must be served by your website in order to install the service worker.

Also, please update to the latest release.

Enjoy!