302 重定向在使用 Google Workbox 构建的 Service Worker 中不起作用 [英] 302 redirects do not work in a service worker built with Google Workbox

问题描述

为了显示添加主屏幕"警报，我想集成一个服务工作者和应用程序的离线功能:当用户离线时，应用程序应该只显示一个特殊的离线 HTML 文件.

For having the "add tome homescreen" alert displayed, I want to integrate a service-worker and an offline capability of the application: When the user is offline, the app should simply display a special offline HTML file.

我的 service-worker 看起来像这样:

My service-worker looks like this:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js');

const CACHE_VERSION = 1;

workbox.core.setCacheNameDetails({
  prefix: 'app',
  suffix: 'v' + CACHE_VERSION
});

workbox.routing.registerRoute(
    '/offline-page.html',
    workbox.strategies.networkFirst({
        networkTimeoutSeconds: 2,
        cacheableResponse: { statuses: [0, 200] },
    })
)

workbox.routing.registerRoute(
    ({ event }) => event.request.mode === 'navigate',
    ({ url }) =>
        fetch(url.href, { credentials: 'include', redirect: 'follow', }).catch(() => caches.match('/offline-page.html'))
)

但是一旦我的应用程序返回 302 重定向(例如在登录或注销后)，我就会在控制台中收到以下警告消息:

But as soon as my application returns a 302 redirect (e.g. after login oder logout), I get the following warning message in the console:

https://app.com"的 FetchEvent 导致网络错误响应:重定向的响应是用于重定向模式不是follow"的请求.

The FetchEvent for "https://app.com" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

Google Chrome 显示错误页面 (ERR_FAILED)，指出无法访问该网站.

and Google Chrome diplays an error page (ERR_FAILED) saying that the website can't be reached.

有人知道如何解决这个问题吗?

Does anyone have an idea how to fix this?

推荐答案

您可以调整提供对路线的回退响应" 文档中的配方以适应您的特定限制.

You can adapt the "Provide a fallback response to a route" recipe in the docs to accommodate your particular restrictions.

有几种不同的选择可以实现这一点，但最干净的方法是创建自己的 仅网络策略(模仿您在示例中使用的 fetch())，链接 .catch() 到它的末尾，然后在构建 NavigationRoute.

There are a couple of different options for accomplishing this, but the cleanest would be to create your own network-only strategy (to mimic the fetch() that you're using in your example), chain .catch() to the end of it, and then use that as the handler when constructing a NavigationRoute.

这将为您提供一个 Route，然后您可以将其传递给 workbox.routing.registerRoute().

That will give you a Route that you could then pass to workbox.routing.registerRoute().

// You're responsible for either precaching or
// explicitly adding OFFLINE_HTML to one of the caches.
const OFFLINE_HTML = '/offline-page.html';
const networkOnly = workbox.strategies.networkOnly();
const networkOnlyWithFallback = networkOnly().catch(() => caches.match(OFFLINE_HTML));
const route = new workbox.routing.NavigationRoute(networkOnlyWithFallback);
workbox.routing.registerRoute(route);

这篇关于302 重定向在使用 Google Workbox 构建的 Service Worker 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！