CSS 未在 Chrome 中使用 Service Worker 以离线模式呈现

Question

我试图让我的 PWA 在离线模式下工作。 到目前为止，它提供来自 localhost 的所有文件，但 CSS 没有呈现。 从缓存请求的所有文件都获得状态 200。（javascript 和 html 功能齐全）这是我的服务工作者代码。

 self.addEventListener("install", (event) => { event.waitUntil( caches.open("v1").then((cache) => { return cache.addAll([ "list of assets", ]); }) ); }); self.addEventListener("fetch", function (event) { event.respondWith( caches.open("v1").then((cache) => { if (event.request.url == "http://localhost:3000/") { return cache.match("http://localhost:3000/index.html").then((response) => { console.log({ response }); return response; }); } else { try { return cache.match(event.request).then((response) => { console.log(response); if (response.= undefined) { console:log({ response. "Loading asset from cache;" }); return response. } else { let asset = fetch(event;request). cache;add(asset); return asset; } }). } catch (error) { console;error(error); } } }) ); });

Answer 1

您是否尝试在具有“资产列表”的位置列出样式表？

return cache.addAll([
    ‘./css/styles.css'
  ]);