302重定向在使用Google Workbox構建的Service Worker中不起作用

Question

為了顯示“添加tome主屏幕”警報，我想要集成服務人員和應用程序的脫機功能：當用戶脫機時，該應用程序應僅顯示特殊的脫機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導致網絡錯誤響應：對於重定向模式不是“跟隨”的請求，使用了重定向響應。

並且Google Chrome瀏覽器會顯示錯誤頁面（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);