Service-Mitarbeiter arbeiten nicht mehr

Question

Ich habe Service-Mitarbeiter in meine Website integriert. Alles zu Werken verwendete perfekt, aber jetzt, ich habe einen Fehler, wenn mein Servicemitarbeiter zu installieren versuchen:

Uncaught (in promise) TypeError: Request failed at anonymous service-worker.js:1

Und mein Servicemann ist in dem ‚redundanten‘ Zustand.

Ich weiß nicht, warum ... Ich habe nicht meinen Code ändern, das ist meine index.html:

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/service-worker.js').then(function(reg) { 

    if(reg.installing) { 
    console.log('Service worker installing'); 
    } else if(reg.waiting) { 
    console.log('Service worker installed'); 
    } else if(reg.active) { 
    console.log('Service worker active'); 
    } 

    }).catch(function(error) { 
    // registration failed 
console.log('Registration failed with ' + error); 
    }); 
} 

Und hier ist mein service-worker.js:

self.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open('v1').then(function(cache) { 
     return cache.addAll([ 
     '/', 
     '/theme/website_mobile/js', 
     '/theme/website_mobile/css', 
     '/theme/website_mobile/js.js', 
     '/theme/website_mobile/css.css', 
     '/js/614cd8e.js', 
     '/css/f1407bb.css', 
     '/js/93779bc.js', 
     '/js/d228ec7.js', 
     '/theme/website_mobile/img/slider-home/slider1.jpg', 
     '/theme/website_mobile/img/slider-home/slider2.jpg', 
     '/theme/website_mobile/img/slider-home/slider3.jpg', 
     '/theme/website_mobile/img/slider-home/slider4.jpg', 
     '/theme/website_mobile/img/logo-website.png', 
     '/theme/website_mobile/img/picto-menu-close.png', 
     '/theme/website_mobile/img/picto-close.png', 
     '/var/website/storage/images/media/website-medias/website-materials/5163440-1-eng-GB/website-materials_article_list_main_website_enm.jpg', 
     '/theme/website_mobile/fonts/website-montserrat/Montserrat-Light.woff2', 
     '/theme/website_mobile/fonts/website-montserrat/Montserrat-Regular.woff2', 
     '/theme/website_mobile/fonts/website-montserrat/Montserrat-ExtraBold.woff2', 
     '/theme/website_mobile/fonts/website-avenir/Fonts/065a6b14-b2cc-446e-9428-271c570df0d9.woff2', 
     ]); 
    }) 
); 
}); 

self.addEventListener('fetch', function(event) { 
    event.respondWith(caches.match(event.request).then(function(response) { 
    // caches.match() always resolves 
    // but in case of success response will have value 
    if (response !== undefined) { 
     return response; 
    } else { 
     return fetch(event.request).then(function (response) { 
     // response may be used only once 
     // we need to save clone to put one copy in cache 
     // and serve second one 
     let responseClone = response.clone(); 

     caches.open('v1').then(function (cache) { 
      cache.put(event.request, responseClone); 
     }); 
     return response; 
     }).catch(function (e) { 
     return caches.match('/'); 
     }); 
    } 
    })); 
}); 

ein Fremde, was ist, wenn ich versuche, meinen Service-worker.js zu bearbeiten, ich diese hinzugefügt:

self.addEventListener('install', function(event) { 
    **reg.update();** 

was ein Fehler ist, aber ich t heraus Hat das gut funktioniert? Ich habe eine Registrierung ist nicht definiert Fehler in der Konsole, aber mein Service-Mitarbeiter funktioniert gut.

Ich versuchte, die reg.update() Teil und einen einfachen console.log sondern setzen sich ändern, wenn ich das getan habe, der Service-Arbeiter Rückkehr im redundanten Zustand und nicht installieren ...

Ich verstehe nicht, warum, wenn ich ein undefiniertes Objekt in den Service-Worker-Code einfüge, einen Fehler erzeugt, aber es funktioniert großartig, und als ich zu meinem alten Code kam (der früher funktionierte), wurde er nicht installiert .

Vielleicht mache ich es irgendwo falsch ...?

Dank

Answer 1

Ich lief in das nach mir die Haare aus für mehrere Tage ziehen.

In meinem Fall eine der URLs der Liste war eine 404 zurück, die die gesamte Cache.addAll Rückgabeversprechen mit dem extrem unspezifischen Fehler TypeError: Request failed ("gescheitert, was, warum ?!") abgelehnt.

Wenn Ihr Business-Logik für anmutige Caching erlaubt, trotz einer der Urls versagt, möchten Sie vielleicht Ihre Herangehensweise an Cache.add jedes Element der Liste ändern:

var urls = ['/', ...] 
self.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open('v1').then(function(cache) { 
     urls.forEach(function (url) { 
     cache.add(url).catch(/* optional error handling/logging */); 
     }); 
    }) 
); 
});