Service Worker 的 fetch 处理程序中大约 30x 重定向的限制

Question

我有一个基本的服务工作者，它在没有互联网连接时返回一个离线页面。网站返回 302 重定向的任何地方，无论是在线还是离线，该网站都会因服务人员的原因而中断。

服务人员：

'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);


        }));
    }

});

破坏服务工作者的页面：

<?php header('Location: /'); ?>

预期结果：页面照常加载，离线时除外，此时应显示offline.html。

实际结果：网站无法完全加载到响应 302 重定向的页面上，理由是“无法访问此网站”。控制台还报告：'FetchEvent 导致网络错误响应：重定向响应用于重定向模式不是“跟随”的请求。'

尝试：使用 response.status 检查响应代码，并尝试切换代码以使用“工作箱”库。还尝试了 {redirect: 'follow'} 参数，但对于如此简单的事情，它现在似乎变得相当先进。所有的“离线页面”教程似乎都有同样的错误。

Answer 1

https://bugs.chromium.org/p/chromium/issues/detail?id=658249

详细解释了底层安全限制

导航请求会出现此问题，因为这些请求使用 redirect mode 或 'manual'。 （大多数其他类型的请求将具有 'follow' 的 redirect 模式，这意味着可以使用重定向的 HTTP 30x 响应来满足它们。）

您可以通过检查其redirected 属性来检测您是否具有通过遵循HTTP 30x 重定向生成的Response 对象。

综上所述：如何使用作为 30 倍重定向的一部分生成的 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.respondWith(response) 之前，请检查response.redirected 是否为true。如果是，则首先将该重定向响应传递给await cleanRedirect()。

（此代码改编自 Workbox 的 implementation。Workbox 将自动“清理”任何针对预缓存 URL 的重定向响应，但不会对运行时缓存的 URL 执行自动清理。）