Service Worker Registration Failed

Question

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?

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 — Tibrogargan, Aug 25 '16 at 04:27
I do not see any reference to Pusher in the code. Why does this question have the [`pusher`](http://stackoverflow.com/questions/tagged/pusher) tag? — Alex Booker, Aug 31 '16 at 10:02
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. — Saugat Bhattarai, Aug 31 '16 at 10:19
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. — Harish V, Apr 06 '19 at 08:13
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? — Lucent, Jan 18 '22 at 18:41

score 52 · Accepted Answer · edited Jul 28 '20 at 18:09

52

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){

edited Jul 28 '20 at 18:09

Michael Nelles

5,426
8
41
57

answered Aug 25 '16 at 04:42

Saugat Bhattarai

2,614
4
24
33

4

https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features 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, *, —) – Ben Coffin Feb 05 '18 at 20:24
4

There is no navigator.serviceWorkerContainer. The syntax is ServiceWorkerContainer.register – freethinker Apr 13 '20 at 09:37

score 3 · Answer 2 · edited Aug 14 '23 at 13:08

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>

edited Aug 14 '23 at 13:08

General Grievance

4,555
31
31
45

answered Mar 01 '19 at 07:15

geekme

294
2
4

score 3 · Answer 3 · answered Jan 13 '22 at 10:16

3

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

answered Jan 13 '22 at 10:16

Oush

3,090
23
22

score 1 · Answer 4 · answered Jul 09 '21 at 01:58

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>

score 0 · Answer 5 · edited Aug 10 '23 at 01:07

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

edited Aug 10 '23 at 01:07

toyota Supra

3,181
4
15
19

answered Aug 10 '23 at 00:42

黃奕捷

1

1

It doesn’t answer at all the question – azro Aug 12 '23 at 15:18

Service Worker Registration Failed

5 Answers5

Linked