302重定向在使用Google Workbox构建的服务工作者中不起作用

Question

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

我的服务工作进程如下所示：

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 重定向(例如，在登录或注销后)，我在控制台中收到以下警告消息：

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

谷歌浏览器会播放一个错误页面(ERR_FAILED)，说无法访问该网站。

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

Answer 1

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

有几种不同的选项可以实现此目的，但最干净的是创建您自己的纯网络策略(模仿您在示例中使用fetch())，将.catch()链接到它的末尾，然后在构建NavigationRoute时将其用作handler。

这将为您提供一个Route，然后您可以将其传递给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);

Answer 2

这似乎可以解决问题：

const FALLBACK_URL = '/';
const networkOnly = workbox.strategies.networkOnly();
const route = new workbox.routing.NavigationRoute(({event}) => {
return networkOnly.handle({event})
.catch(() => caches.match(FALLBACK_URL));
});
workbox.routing.registerRoute(route);