时间戳

首页 > 解决方案 > Service Worker 获取缓存资产失败

caching - Service Worker 获取缓存资产失败

问题描述

大家好，我是服务人员的新手，我正面临这个错误

The FetchEvent for "<My Local URL>" resulted in a network error response: the promise was rejected.

我不知道这是什么意思

这就是当我单击offline并refresh 从网络选项卡脱机问题时发生的情况

这是我的代码

self.addEventListener('install', function(event) 
{
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
  caches.open('static')
      .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.add('/src/js/app.js')
    })
  )
});

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
event.respondWith(
  caches.match(event.request)
    .then(function(response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request);
      }
    })
 );
});

任何线索我都会受到赞赏。

标签： cachingprogressive-web-appscacheapi

解决方案

如果install是您的服务工作者，您只需向缓存存储 API 添加一项/src/js/app.js。当您尝试检查您的应用程序如何离线工作时，首先要获取的是主页的 HTML 响应，并且由于它没有添加到缓存中，因此您会得到这样的结果。

因此，您需要将离线模式所需的所有资产添加到缓存存储中，例如，如下所示：

self.addEventListener('install', function(event) 
{
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
  caches.open('static')
      .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.addAll([
         '/src/js/app.js',
         '/src/css/app.css',
         '/src/index.html'
     ]);
    })
  )
});

...

请根据您的应用检查资产的路径。希望对您有所帮助！

推荐阅读