Progressive Web App Uncaught (in promise) TypeError: Failed to fetch

Question

我開始學習 PWA（漸進式 Web 應用程序），但遇到問題，控制台“拋出”錯誤未捕獲（承諾）類型錯誤：無法獲取。

有誰知道可能是什么原因？

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');
                });
            });
        }
      })
  );
});          

注意：緩存的策略有很多，我在這里展示的是離線優先的方法。 欲了解更多信息這和這是一個必須閱讀。

Answer 2

我找到了相同錯誤的解決方案，在我的情況下，當服務工作者找不到文件時顯示錯誤* ，通過在 chrome 會話的開發工具中跟蹤網絡來修復它，並識別出服務工作者沒有的不存在的文件查找並刪除要注冊的文件數組。

  '/processos/themes/base/js/processos/step/Validation.min.js',
  '/processos/themes/base/js/processos/Acoes.min.js',
  '/processos/themes/base/js/processos/Processos.min.js',
  '/processos/themes/base/js/processos/jBPM.min.js',
  '/processos/themes/base/js/highcharts/highcharts-options-white.js',
  '/processos/themes/base/js/publico/ProcessoJsController.js',
 // '/processos/gzip_457955466/bundles/plugins.jawrjs',
 // '/processos/gzip_N1378055855/bundles/publico.jawrjs',
 // '/processos/gzip_457955466/bundles/plugins.jawrjs',
  '/mobile/js/about.js',
  '/mobile/js/access.js',

*我為我加粗了解決方案......我從一個緩存文件開始，然后添加另一個......直到我得到一個錯誤的路徑，同時定義范圍 {scope: '/'} 或 {scope: ' ./'} - 由 lawrghita 編輯

Answer 3

我遇到了同樣的錯誤，在我的情況下，Adblock 阻止了對以“ad”開頭的 url 的獲取（例如 /adsomething.php）

Answer 4

就我而言，未找到要緩存的文件（檢查網絡控制台），這與相對路徑有關，因為我使用的是 localhost，並且站點位於子目錄中，因為我在 XAMPP 服務器上開發了多個項目。

所以我改變了

let cache_name = 'Custom_name_cache';

let cached_assets = [
    '/',
    'index.php',
    'css/main.css',
    'js/main.js'
];

self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cache_name).then(function (cache) {
            return cache.addAll(cached_assets);
        })
    );
});

到下面：注意 cached_assets 上的“./”

let cache_name = 'Custom_name_cache';

let cached_assets = [
    './',
    './index.php',
    './css/main.css',
    './js/main.js'
];

self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cache_name).then(function (cache) {
            return cache.addAll(cached_assets);
        })
    );
});

Answer 5

在添加或獲取任何路徑（如/offline.html或/main.js之前嘗試使用/

Answer 6

緩存文件引用應該是正確的，否則獲取將失敗。 即使一個引用不正確，整個提取也會失敗。

let cache_name = 'Custom_name_cache';


let cached_files = [
    '/',
    'index.html',
    'css/main.css',
    'js/main.js'
]; 
// The reference here should be correct. 

self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cache_name).then(function (cache) {
            return cache.addAll(cached_files);
        })
    );
});