为什么chrome开发人员工具中的缓存存储在脱机模式下变为空

Question

我正在使用服务工作者来缓存和获取文件.
这些文件在在线模式下被缓存,但是当我转换到离线模式时,chrome开发人员工具中的缓存存储空了.我无法弄清问题是什么.
任何帮助表示赞赏.

const cacheName = 'myCacheVersion1';
var filesToCache = [
    '/',
    '/service-worker/offline-page.html',
    '/service-worker/sw.js'
]

const offlineUrl = 'https://gmc-test.mytrah.com/service-worker/offline-page.html';

this.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName).then(function(cache){
            console.log(offlineUrl);
            return cache.addAll(filesToCache);
        })
            .then(() => self.skipWaiting())
    );
})

self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate');
    e.waitUntil(
        caches.keys().then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                if (key !== cacheName) {
                    console.log('[ServiceWorker] Removing old cache', key);

                    return caches.delete(key);
                }
            }));

        })
    );
    return self.clients.claim();
});

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});`

以上显示的是服务工作者代码.提前致谢

Answer 1

在我看来，问题在于您正确地缓存了文件，但是当您处于离线状态且服务工作人员尝试获取预缓存的资产时，您实际上是从网络请求它们：

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});

你应该做这样的事情：

event.respondWith(
    caches.open(cacheName).then((cache) => {
        return cache.match(evt.request).then((response) => {
            // get from the cache, then make a network request if theres no cache
            return response || fetch(event.request);
        } 
    }
)