这曾经对我有用,但是在几个月前就停止了,我已经重新定位了自己,无法再解决这个问题了。我在这里做错了什么?
调用服务工作者模板,没问题:
if(navigator.serviceWorker){
window.addEventListener('load',() => {
navigator.serviceWorker
.register('/sw.js')
.then(console.log('[ServiceWorker] Registered Successfully'))
.catch(err => console.log(`[ServiceWorker] Error: ${err}`));
});
} else {
console.log('Service Worker not supported.');
}
设置缓存版本并预加载缓存,没问题:
const cacheName='2020.10.06-01';
var cacheFiles = ['/offline.html'];
安装了服务工作者,没问题:
addEventListener('install', e => {
e.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll(cacheFiles);
})
);
});
激活了用于自动缓存翻转的服务工作器,没问题:
addEventListener('activate', e => {
e.waitUntil(
caches.keys().then(keyList => {
return Promise.all(keyList.map(key => {
if(key !== cacheName) {
return caches.delete(key);
}
}));
})
);
});
从缓存或网络获取,没问题:
addEventListener('fetch', e => {
e.respondWith(async function() {
try {
const cache = await caches.open(cacheName);
const cachedResponse = await cache.match(e.request);
const networkResponsePromise = fetch(e.request);
e.waitUntil(async function() {
const networkResponse = await networkResponsePromise;
await cache.put(e.request, networkResponse.clone());
}());
// Returned the cached response if we have one, otherwise return the network response.
return cachedResponse || networkResponsePromise;
} catch (error) {
console.log('Fetch failed; returning offline page instead.', error);
const cache = await caches.open(cacheName);
const cachedResponse = await cache.match('/offline.html');
return cachedResponse;
}
}());
});
但是,如果我要请求的页面/资源不在缓存中,并且网络不可用,它将拒绝显示我的“ offline.html”页面。(我知道缓存中的IS)
有任何想法吗?
这是我最后编写的Fetch代码,非常适合我:
self.addEventListener('fetch', (event) => {
event.respondWith((async() => {
const cache = await caches.open(cacheName);
try {
const cachedResponse = await cache.match(event.request);
if(cachedResponse) {
console.log('cachedResponse: ', event.request.url);
return cachedResponse;
}
const fetchResponse = await fetch(event.request);
if(fetchResponse) {
console.log('fetchResponse: ', event.request.url);
await cache.put(event.request, fetchResponse.clone());
return fetchResponse;
}
} catch (error) {
console.log('Fetch failed: ', error);
const cachedResponse = await cache.match('/en/offline.html');
return cachedResponse;
}
})());
});
这按特定顺序完成了我需要的所有操作。它首先检查缓存,如果找到则将其返回。下一步,它检查网络,如果发现,则先对其进行缓存,然后将其返回。或者,它会显示一个自定义的脱机页面,并带有一个较大的“重新加载”按钮,以鼓励访问者重新联机后重试。
但是要意识到的最重要的一点是,以这种方式进行操作可以使我显示一个页面及其所有资源(无论是否具有网络访问权限)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句