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 (например, после входа в систему или выхода из системы), я получаю следующее предупреждение в консоли:

FetchEvent для "https://app.com" привел к ответу об ошибке сети: перенаправленный ответ использовался для запроса, режим перенаправления которого не является" follow ".

и Google Chrome отображает страницу с ошибкой (ERR_FAILED), в которой говорится, что веб-сайт недоступен.

У кого-нибудь есть идеи, как это исправить?

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

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