Login/Register
Service Worker Registration Failed
Asked Answered
Solved javascriptbrowserservice-workerweb-push
K

5

38

I am currently working on service worker to handle push notification in browser. Currently I am having this "SW registration failed error":

SW registration failed with error SecurityError: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.

Check client1.html and service-worker.js file below:

service-worker.js

console.log('Started', self);
self.addEventListener('install', function(event) {
  self.skipWaiting();
  console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
  console.log('Activated', event);
});
self.addEventListener('push', function(event) {
  console.log('Push message received', event);
});

client1.html

<!doctype html>
<html>
  <head>
    <title>Client 1</title>
  </head>
  <body>
    <script>
      if('serviceWorker' in navigator){
        // Register service worker
        navigator.serviceWorker.register('service-worker.js').then(function(reg){
          console.log("SW registration succeeded. Scope is "+reg.scope);
        }).catch(function(err){
          console.error("SW registration failed with error "+err);
        });
      }
    </script>
  </body>
</html>

Can anyone help with this issue?

Knives answered 25/8, 2016 at 4:17 Comment(5)
The 1st argument to ServiceWorkerContainer.register is an URL. The error message indicates that your browser is refusing to use a resource because the origin is null - which happens often for local (file://) resources. service-worker.js is local - I'll bet this is why you're getting the cross origin resource issue – Unreserved
I do not see any reference to Pusher in the code. Why does this question have the pusher tag? – Pratincole
I am working on web pusher. This question came while creating web pusher. Do you have any idea how to identify unique browser to push from pusher? I am stuck in that portion. – Knives
Service worker will work only if you run it on a server. Just by opening the index.html from the finder will not work. You can use python -m SimpleHTTPServer or any to get started. – Ferromanganese
I'm seeing this error frequently after deploying a signed exchange (SXG). Is it possible an SXG is reporting the wrong URL and refusing to install? – Hobble
K
53

Solved: First thing is service worker only works in secure mode either in https or localhost. It doesnot work in local resources like file:// or http.

and second issue was during registration.

navigator.serviceWorkerContainer
      .register('service-worker.js')
      .then(function(reg){
Knives answered 25/8, 2016 at 4:42 Comment(4)
chromium.org/Home/chromium-security/… According to this doc, it should be supported: “Secure origins” are origins that match at least one of the following (scheme, host, port) patterns: (https, , *) (wss, *, *) (, localhost, ) (, 127/8, ) (, ::1/128, *) (file, *, —) (chrome-extension, *, —) – Teacher
There is no navigator.serviceWorkerContainer. The syntax is ServiceWorkerContainer.register – Saransk
@saugat-bhattarai You say 'second issue was during registration'. I assume you mean one should use serviceWorkerContainer instead of navigator.serviceWorker? If so: Docs say navigator.serviceWorker contains the value serviceWorkerContainer. So what's the issue you see there? developer.mozilla.org/en-US/docs/Web/API/Navigator/… – Hertha
@Saransk Indeed, OP's original code was perfectly fine, where he used the serviceWorker property. – Cirque
B
3

Use chrome webserver, to run the app or just a simple command in terminal would do.

python -m http.server <port_number>

Old Python 2 command:

python -m SimpleHTTPServer <port_number>
Baccate answered 1/3, 2019 at 7:15 Comment(0)
M
3

A weird bug in my case as this all happened without any error on my side. Simply restarting Google chrome fixed it

Macassar answered 13/1, 2022 at 10:16 Comment(0)
N
1

Please register sw.js in your html page

        <script type="text/javascript">

                navigator.serviceWorker.register('/myproject/scripts/common/pushNotifications/sw.js').then(function(registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
                     }, function(err) {
                console.log('ServiceWorker registration failed: ', err);
                });
                
        </script>
Nearly answered 9/7, 2021 at 1:58 Comment(0)
G
0

For Python 3, SimpleHTTPServer is NOT available. It is replaced by http.server

For more details, see: Set up Python simpleHTTPserver on Windows

or my note, available at: http://t.csdn.cn/ALcS6

Goblet answered 10/8, 2023 at 0:42 Comment(1)
It doesn’t answer at all the question – Rochdale

© 2022 - 2024 — McMap. All rights reserved.