プログレッシブウェブアプリTypeError：フェッチに失敗しました

Question

PWA（プログレッシブウェブアプリケーション）を学習し始めましたが、問題があり、コンソールに「スロー」エラーが表示されました未知（未定）TypeError：フェッチできませんでした。

誰でも原因が分かりますか？

let CACHE = 'cache'; 

self.addEventListener('install', function(evt) { 
    console.log('The service worker is being installed.'); 
    evt.waitUntil(precache()); 
}); 

self.addEventListener('fetch', function(evt) { 
    console.log('The service worker is serving the asset.'); 
    evt.respondWith(fromCache(evt.request)); 
}); 
function precache() { 
    return caches.open(CACHE).then(function (cache) { 
     return cache.addAll([ 
      '/media/wysiwyg/homepage/desktop.jpg', 
      '/media/wysiwyg/homepage/bottom2_desktop.jpg' 
     ]); 
    }); 
} 
function fromCache(request) { 
    return caches.open(CACHE).then(function (cache) { 
     return cache.match(request).then(function (matching) { 
      return matching || Promise.reject('no-match'); 
     }); 
    }); 
} 

Answer 1

これはフォールバック戦略がないためです。 event.respondWithには、何らかのエラーがある場合にキャッチする必要がある約束が付いています。

だから、私はあなたがこのことから、あなたのコードを変更することをお勧めしたい：

self.addEventListener('fetch', function(evt) {   
    console.log('The service worker is serving the asset.'); 
    evt.respondWith(fromCache(evt.request)); 
});     

をこのような何かに：

addEventListener('fetch', function(event) { 
    event.respondWith(
    caches.match(event.request) 
     .then(function(response) { 
     if (response) { 
      return response;  // if valid response is found in cache return it 
     } else { 
      return fetch(event.request)  //fetch from internet 
      .then(function(res) { 
       return caches.open(CACHE_DYNAMIC_NAME) 
       .then(function(cache) { 
        cache.put(event.request.url, res.clone()); //save the response for future 
        return res; // return the fetched data 
       }) 
      }) 
      .catch(function(err) {  // fallback mechanism 
       return caches.open(CACHE_CONTAINING_ERROR_MESSAGES) 
       .then(function(cache) { 
        return cache.match('/offline.html'); 
       }); 
      }); 
     } 
     }) 
); 
});   

注：私は「何キャッシュするための多くの方法がありますここに示したのはオフラインの最初のアプローチです。詳細はthis & thisです。