ServiceWorker 不加载匹配的资源答案

【问题标题】：ServiceWorker doesn't load matched resourcesServiceWorker 不加载匹配的资源
【发布时间】：2021-01-15 14:19:53
【问题描述】：

我正在我的网络应用程序上实现一个服务工作者。

这是我的 serviceWorker.js：

var CACHE_NAME = 'my-cache';
var urlsToCache = [
    'img/logout.png'
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME).then(function(cache) {
            return cache.addAll(urlsToCache);
        }))
});

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

一切正常（在开发工具中，我可以看到存储的 png 文件是缓存存储）。问题是当我离线时：我猜对 png 文件的获取请求是匹配的，因为如果我导航到 localhost:8080/myapp/img/logout.png 记录的响应（如您在上面的脚本中所见）它不是未定义但 chrome 仍然返回ERR_INTERNET_DISCONNECTED。

这是 webapp 的目录结构： here

我做错了什么？

【问题讨论】：

标签： javascript service-worker

【解决方案1】：

在fetch 服务工作者事件中，而不是匹配请求对象将其更改为cache.match(event.request.url).

【讨论】：