2

为了显示“添加主屏幕”警报，我想集成服务工作者和应用程序的离线功能：当用户离线时，应用程序应该只显示一个特殊的离线 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)，指出无法访问该网站。

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

4

2 回答 2

2

您可以调整文档中的“为路由提供后备响应”配方以适应您的特定限制。

有几种不同的选择可以实现这一点，但最简单的方法是创建自己的纯网络策略（模仿fetch()您在示例中使用的策略），链接.catch()到它的末尾，然后将其用作当handler构造一个NavigationRoute.

这会给你一个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);
于 2018-04-30T19:59:09.020 回答
1

这似乎可以解决问题：

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);
于 2018-11-23T15:46:51.970 回答