why failed to register a service worker?

service worker is not registered or does not control the start url
service registration failed
service worker register on load
service worker has a pushmanager registration
the user denied permission to use service worker
service worker boilerplate
service worker cpu
serviceworker must be a dictionary

I am working on the progressive web application sample: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/

Following the instruction, I am on the step of register service worker. This is the code for register service worker:

 if ('serviceWorker' in navigator) {
    navigator.serviceWorker
         .register('./service-worker.js')
         .then(function() { console.log('Service Worker Registered'); });
  }

But it is always failed and get the error log as:

Could you please teach me why I cannot register the service worker?

Your service worker is not linked properly. Mentioned path is not correct and so it’s getting 404 response. Remove the "." In the path and place service worker and the file containing this script in same place.

Failed to register a ServiceWorker Issue · Issue #24 · mdn/sw-test , deploying to https and enabling experimental web platform features: Registration failed with TypeError: Failed to register a ServiceWorker: A  Delaying service worker registration until after the page has loaded during the initial visit can help ensure that. You'll still get all the benefits of having a service worker for your repeat visits.

i fixed this

and im agin have problem

i coding to add add to home screen button to mywebsite

this is myt code :

let installPromptEvent;

window.addEventListener('beforeinstallprompt' , (event) => {
    e.preventDefault();
    console.log('before install prompt event')
    installPromptEvent = event;
});

document.querySelector('.addtohomescreenbutton a').addEventListener('click' , (event) => {
    e.preventDefault();
    console.log(installPromptEvent);
    if(installPromptEvent) {
        installPromptEvent.prompt();

        installPromptEvent.userChoice
            .then((choiceResult) => {
                if(choiceResult.outcome === 'accepted') {
                    console.log('User Accepted');
                } else {
                    console.log('User dismissed');
                }

                installPromptEvent = null;
            })
    }
})

and this is my error :

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at

and this is him line :

.addEventListener('click' , (event) => {

what is problem ?

Failed to register a ServiceWorker: 404 · Issue #12 · vuejs-templates , Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. The ServiceWorkerRegistration interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin. The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their

I fixed this console error by creating a js file in the work directory called service-worker, which is what the tutorial asks you to do.

This correctly links the service worker, which means you will see the console log message that it is correctly registered.

The basics of Service Workers: how should our application behave , Unfortunately, the above approach fails, and we experience an error: ServiceWorker registration failed: TypeError: Failed to register a  Since a service worker can't have a scope broader than its own location, only use the scope option when you need a scope that is narrower than the default. Syntax serviceWorkerContainer.register(scriptURL, options) .then(function(serviceWorkerRegistration) { }); Parameters scriptURL The URL of the service worker script.

Service Worker Registration | Web Fundamentals, Improving the boilerplate. The solution is to control start of the service worker by choosing when to call navigator.serviceWorker.register() . A  To avoid this, you can only register service workers on pages served over HTTPS, so we know the service worker the browser receives hasn't been tampered with during its journey through the network. GitHub Pages are served over HTTPS, so they're a great place to host demos.

ServiceWorkerContainer.register(), If successful, a service worker registration ties the provided script URL registration failed:', error); }); } else { console.log('Service workers are  In Firefox, Service Worker APIs are hidden and cannot be used when the user is in private browsing mode. Install and activate: populating your cache. After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site. The install event is fired when an install is successfully completed.

ServiceWorkerRegistration, You register a service worker to control one or more pages that share the console.log('Service worker registration failed:', error); }); } else  If the service worker is already installed, navigator.serviceWorker.register returns the registration object of the currently active service worker. The scope of the service worker determines which files the service worker controls, in other words, from which path the service worker will intercept requests.

Comments
  • is file 'service-worker.js' in the root folder of your app?
  • Thanks. but your method doesn't work. The service worker is not created in any folders... In addition, I follow the instructions from beginning, it didn't mention change path and replace the file...
  • I'm not talking about "my method" here. I'm pointing at the issue based on the screenshot you have attached. Post your list of files from your screenshot and URL to the site you have created(you can host free in github pages, including many others).