我正在尝试使用 Service Worker 来执行以下任务:
- 缓存一组页面。
- 如果请求,则从缓存中返回页面 - 如果该页面不在缓存中,则从服务器返回。
- 如果缓存或服务器没有响应,则返回自定义离线页面。
我有以下代码:
this.addEventListener('install', function(event) {
console.log('Service Worker: Installing');
event.waitUntil(
caches.open('v1').then(function(cache) {
console.log('Service Worker: Caching Files');
return cache.addAll([
'/assets/logo.svg',
'/assets/app.css',
'/assets/app.js',
'/assets/common.js',
'/offline.html'
]);
})
);
});
this.addEventListener('fetch', function(event) {
if (event.request.method != "GET" || event.request.mode == "cors" || event.request.url.startsWith('chrome-extension')) return;
console.log('Event to be passed', event);
event.respondWith(
caches.open('v1').then(function(cache) {
return cache.match(event.request).then(function(response) {
if (response) {
console.log('Service Worker: Returning Cached Response', response);
return response;
} else {
fetch(event.request).then(function(response) {
console.log('Service Worker: Returning Response from Server', response);
cache.put(event.request, response.clone());
return response;
}).catch((error) => {
console.log('Fetch failed; returning offline page instead.', error);
return caches.match('/offline.html');
});
}
});
})
);
});
this.addEventListener('activate', function activator(event) {
console.log('Service Worker: Activating', event);
event.waitUntil(
caches.keys().then(function(keys) {
return Promise.all(keys
.filter(function(key) {
return key.indexOf('v1') !== 0;
})
.map(function(key) {
return caches.delete(key);
})
);
})
);
});
我遇到的问题是,即使在离线状态下,我的请求也会收到 200 响应,即使我处于离线状态并且实际上并未检索文件。
我知道这是 PWA 始终返回 200 响应的先决条件之一,但如果我的响应始终返回 200,我如何返回离线页面。
任何有关服务人员的帮助、建议或资源都会很有用。
干杯。
最佳答案
你必须处理所有事件,如果没有什么特别的事情发生,你不能只是“返回”。
this.addEventListener('fetch', function(event) {
if (event.request.method != "GET" || event.request.mode == "cors" || event.request.url.startsWith('chrome-extension')){
event.respondWith(fetch(event.request));
return;
}
....
那么你还必须返回你的 fetch 事件,否则你就会破坏 promise 链。
} else {
return fetch(event.request).then(function(response) {
关于javascript - 尝试与服务 worker 一起显示离线页面,但即使在离线状态下,我的请求也会收到 200 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45258359/