web - 未捕获( promise )类型错误 : Failed to execute 'Cache' on 'addAll' : Request failed on progressive web app

Question

我正在学习一个简单的 PWA 教程，但是当我完成它时，我收到以下控制台错误，Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed这是我的 serviceworker 文件

const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/test.html",
  "/csstest/style.css",
  "/jstest/app.js",
  "/coffee.png",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})

当我运行灯塔测试时，我得到了这个，

start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker.

这是我第一次看到 PWA，所以我有点卡住了。我已经尝试了在 SO 上找到的几种解决方案，但都没有奏效。

Answer 1

对于第一个异常(exception):-
未捕获( promise )类型错误:无法在“addAll”上执行“缓存”:请求失败

当您在缓存列表中提到的任何文件返回 404 响应时，您会收到此异常。因此，请确保所有资源都提供 200。

对于第二个错误:-
当离线 start_url 确实响应时，start_url 不响应 200。

在您的情况下，由于文件没有被缓存(由于第一个异常)，您会收到此错误，并确保在缓存列表中缓 stub 索引文件。