サービスワーカーはもう役に立たない

Question

私は自分のウェブサイトにサービスワーカーを統合しています。すべてが完璧に動作するために使用されるが、今、私は私のサービスワーカーをインストールしようとすると、エラーがあります：

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

をそして、私のサービス労働者は「冗長」状態です。私は自分のコードを変更しなかった理由...私は知りません

、これは私の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); 
    }); 
} 

そしてここでは、私のサービス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('/'); 
     }); 
    } 
    })); 
}); 

間違いである

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

が、私はトンを考え出した：私は私のサービスworker.jsを編集しようとしたときに

は、より多くの見知らぬ人の事は、私はこれを追加します帽子これは良い作品！私はregがコンソールで定義されていないエラーがありますが、私のサービスワーカーはうまくいきます。

私はパート）（reg.updateを変更しようとしました

とシンプルにconsole.logを入れますが、私は、という冗長な状態でサービスワーカー復帰してインストールしていないでした...

私はサービスワーカーコードで未定義のオブジェクトを追加するとエラーになるが、それはうまくいき、前のコードに戻ったときにインストールされなかった理由を理解できません。 。

多分私はどこかで間違っているのですか？

おかげ

Answer 1

は、私はちょうど数日間、私の髪を引っ張った後、これに走りました。

私の場合、リストのURLの1つが404を返していたため、Cache.addAll全体が非常に不特定なエラーTypeError: Request failed（ "何が失敗したのですか？"

ビジネスロジックは、優雅なキャッシングが可能な場合は、URLのいずれかが失敗にもかかわらず、あなたは、リストの各項目のCache.addにあなたのアプローチを変更する場合があります

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 */); 
     }); 
    }) 
); 
});