Service worker fails to install due to a security error

iAmWillShepherd commented 2 years ago

I ran into this issue while attempting to integrate with the plugin a Vue2 project following the instructions on npm.

2021-12-09 17 47 46

Note that the Service worker appears to be installed and OneSignal is initialized, but when I click Allow in the notification dropdown, nothing happens on the screen; however, there is an error emitted to the console.

Console output

Full log ☝🏾

I did a bit of digging and noticed this request is returning a webpage result. I'm not sure if it's relevant to the issue, but since it's sending a request to the web worker, I figured I'd share a bit more info on it.

Request

GET /OneSignalSDKWorker.js?appId=6620ca78-6da6-4346-bd79-5f893b33459f?sdkVersion=151510 HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Pragma: no-cache
Cache-Control: no-cache

Response

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>onesignalvue2</title>
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but onesignalvue2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

jkasten2 commented 2 years ago

@iAmWillShepherd Looks like the request to localhost:8080/OneSignalSDKWorker.js?appId=6620ca78-6da6-4346-bd79-5f893b33459f?sdkVersion=151510 is not giving back a Content-Type HTTP header to the browser based on your Request code block above. It should be something like Content-Type: application/x-javascript;charset=utf-8.

If you do the same kind of GET request noted above on these URL does the HTTP headers in the response change?

localhost:8080/OneSignalSDKWorker.js
- Wondering if any query params cause your local server to omit Content-Type
localhost:8080/OneSignalSDKWorker.js?appId=6620ca78-6da6-4346-bd79-5f893b33459f&sdkVersion=151510
- Almost the same, replaced the 2nd ? with & to fix the URL query string, wondering if it caused an issue with your local server

iAmWillShepherd commented 2 years ago

Request: localhost:8080/OneSignalSDKWorker.js

GET /OneSignalSDKWorker.js HTTP/1.1
Content-Type: application/x-javascript;charset=utf-8
Host: localhost:8080
Connection: close
User-Agent: Paw/3.3.2 (Macintosh; OS X/12.0.1) GCDHTTPRequest

Response

HTTP/1.1 404 Not Found
X-Powered-By: Express
Content-Security-Policy: default-src 'none'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 160
Date: Mon, 13 Dec 2021 19:38:33 GMT
Connection: close

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /OneSignalSDKWorker.js</pre>
</body>
</html>

I received the same result sending a request to your second suggestion, localhost:8080/OneSignalSDKWorker.js?appId=6620ca78-6da6-4346-bd79-5f893b33459f&sdkVersion=151510, so I also tried to do it in the browser and received the following in my console.

I've seen an error similar to this caused by not installing the service worker file in the public folder of the project. Could it be that I need to manually install the service worker? The getting started guide makes no mention of it, so I didn't do the typical song and dance I typically would to make that file available.

jkasten2 commented 2 years ago

@iAmWillShepherd ah yes that is it, you do need to manually put the OneSignal service worker file (OneSignalSDKWorker.j) in your public folder. We should update the docs to instruct developers to do that.

It might be possible in the future for this plugin to automatically include OneSignalSDKWorker.j. Somethings to consider however before attempting to do this is:

Will the URL for the SW stay consistent?
- You should never stop hosting a SW if you have any clients who have already installed it. The reason being the SW code can go stale as the SW will try to update itself when an event happens, such as a push is received.
Is the service worker a different URL from dev vs production?
- If so can we detect that?
Can the developer configure the URL Vue plugins are hosted from?
- If so can we detect that?

Another option to help developer might be to offer a plugin for ways you can host, such as express as you are running here.

OneSignal / onesignal-vue