即使注册成功，服务工作人员也显示为已删除

Question

I can't seem to figure out any reason why a service worker would be deleted with the code that I have that registers or actually is the service worker.

But in this site, it shows up as deleted in the Service Workers section of the chrome dev tools (image below).

Yet it is also registering properly as logged in the console (same image below).

Here is the service worker registration code:

if('serviceWorker' in navigator){

    navigator.serviceWorker.register('/earnie.min.js', { scope: '/'}).then(function(registration){
        console.log('Registration successful, scope is:', registration.scope);
}).catch(function(error){
        console.log('Service worker registration failed, error:', error);
    });
}

Here is the service worker code:

var cachename="e2",cachelist=";;.;/;./;/privacyPolicy.html;/css/main.css;/css/normalize.css;".split(";");

self.addEventListener("install",function(a){
    a.waitUntil(caches.open(cachename).then(function(a){
        return a.addAll(cachelist)
    }))
});
self.addEventListener("fetch",function(a){
    a.respondWith(caches.match(a.request).then(function(b){
        return b?b:fetch(a.request.clone(), { credentials: 'include', redirect: 'follow' })
    }))
});

What is causing it to be deleted and not registering?

Answer 1

Registration succeeded, but installation actually fails. Your waitUntil() promise is not resolving, which causes InstallEvent event to fail, thus deleting the ServiceWorker. cachelist probably returns invalid/empty values when you run split(';')

I recommend ensuring that cachelist is an array with valid URI values, then you can debug within the install event**

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open(cachename)
    .then(cache => cache.addAll(cachelist))
    .catch(error => console.error('💩', error))
  )
})

**You'll most likely need "Preserve log" console option enabled in Chrome Dev Tools to see the console error.