我有一个基本的服务 worker ,它在没有互联网连接时返回一个离线页面。在网站返回 302 重定向的任何地方,无论是在线还是离线,该网站都会因 service worker 而中断。
服务 worker :
'use strict';
var cache_key = 'offline_cache_v18';
this.addEventListener('install', event => {
event.waitUntil(
caches.open(cache_key).then(function(cache) {
return cache.addAll([
'/offline.html'
]);
})
);
});
this.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) ) {
event.respondWith(
fetch(event.request.url).catch(error => {
return caches.match('/offline.html');
})
);
} else {
event.respondWith(caches.match(event.request).then(function (response) {
return response || fetch(event.request);
}));
}
});
破坏 service worker 的页面:
<?php header('Location: /'); ?>
预期结果:页面正常加载,但离线时除外,此时应显示 offline.html。
实际结果:网站无法完全加载响应 302 重定向的页面,引用“无法访问此网站”。控制台还报告:“FetchEvent 导致网络错误响应:重定向响应用于重定向模式不是“跟随”的请求。”
尝试过:使用 response.status 检查响应代码,还尝试将代码切换为使用“workbox”库。还尝试了 {redirect: 'follow'} 参数,但对于如此简单的事情,它现在似乎变得相当先进。所有“离线页面”教程似乎都有同样的错误。
最佳答案
基础安全限制在 https://bugs.chromium.org/p/chromium/issues/detail?id=658249 中有详细解释。
导航请求会出现此问题,因为这些请求使用 redirect
mode '手册'
。 (大多数其他类型的请求将具有 'follow'
的 redirect
模式,这意味着可以使用重定向的 HTTP 30x 响应来实现它们。)
您可以通过检查其 redirected
来检测您是否具有通过遵循 HTTP 30x 重定向生成的 Response
对象属性(property)。
综上所述:如何使用作为 30x 重定向的一部分生成的 Response
对象来满足导航请求的 fetch
事件?答案是首先“清理”重定向的响应,方法是创建一个新的(大部分相同的)Response
对象,但是会将 redirected
属性设置为 false
。
async function cleanRedirect(response) {
const clonedResponse = response.clone();
return new Response(await clonedResponse.blob(), {
headers: clonedResponse.headers,
status: clonedResponse.status,
statusText: clonedResponse.statusText,
});
}
您可以通过检查 event.request.redirect === 'manual'
是否位于 fetch
处理程序中来使用它。如果是这样,在调用 event.responseWith(response)
之前,检查 response.redirected
是否为 true
。如果是,则首先将重定向的响应传递给 await cleanRedirect()
。
(此代码改编自 Workbox 的 implementation。Workbox 将自动“清除”预缓存 URL 的任何重定向响应,但它不会对运行时缓存的 URL 执行自动清除。)
关于service-worker - 在 Service Worker 的获取处理程序中限制 30 倍左右的重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56903357/