PWA实现离线存储时出现respondWith错误及本地资源加载报错

你遇到的两个报错里，贴出的web manifest配置、页面图标标签配置均无语法问题，不需要修改这部分内容：

• 核心故障来自Service Worker的fetch事件处理逻辑：传给respondWith()方法的不是合法的Response对象，也不是resolve结果为Response的Promise，触发了an object that was not a Response was passed to respondWith()警告。绝大多数场景下是缓存匹配逻辑漏写了分支：比如缓存未命中时没有返回网络请求结果、网络请求失败时没有做异常兜底，最终respondWith()接收到undefined、错误对象等非法值。
• Not allowed to load local resource: chrome-error://chromewebdata/favicon@2x.png是连带次生报错：因为Service Worker拦截https://localhost:7047/Shop/Catalog请求时返回了非法值，浏览器直接跳转内置错误页，尝试加载错误页内置的本地favicon资源时触发了安全限制，该报错会在Service Worker逻辑修复后自动消失，不需要单独处理。

• 修正Service Worker的fetch事件监听逻辑，确保respondWith()在所有分支下都能拿到合法的Response对象。
  典型错误写法示例（漏写网络回退分支）：

  // 错误实现：缓存未命中时无返回值，最终传递undefined给respondWith
  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then(cacheRes => {
        if (cacheRes) return cacheRes
        // 缺少 return fetch(event.request) 逻辑
      })
    )
  })
  

  可正常运行的基础实现参考（覆盖全分支+异常兜底）：

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request)
        .then(cacheRes => {
          // 缓存命中直接返回缓存资源
          if (cacheRes) return cacheRes
          // 缓存未命中回退到网络请求
          return fetch(event.request).then(networkRes => {
            // 此处可按需添加新资源写入缓存的逻辑
            return networkRes
          })
        })
        .catch(() => {
          // 离线+缓存未命中时的兜底，必须返回Response对象
          // 可提前缓存离线页，此处返回caches.match('/offline.html')即可
          return new Response('Network unavailable', {
            status: 503,
            headers: new Headers({'Content-Type': 'text/plain'})
          })
        })
    )
  })
  

• 检查respondWith()的传值，禁止传入普通对象、null、undefined等非Response/非合法Promise值。
• 代码修改完成后，打开浏览器开发者工具，进入Application > Service Workers面板，先注销旧的异常Service Worker，勾选「Update on reload」选项后硬刷新页面，让新的Service Worker生效即可。

内容的提问来源于stack exchange，提问作者Intolighter