service-worker - 在 Service Worker 的获取处理程序中限制 30 倍左右的重定向

Question

我有一个基本的服务 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'} 参数，但对于如此简单的事情，它现在似乎变得相当先进。所有“离线页面”教程似乎都有同样的错误。

Answer 1

基础安全限制在 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 执行自动清除。)