302 перенаправления не работают в сервисном работнике, построенном с Google Workbox

Question

302 перенаправления не работают в сервисном работнике, построенном с Google Workbox

1

Для отображения предупреждающего сообщения "add tome homescreen" я хочу интегрировать сервис-работника и автономную возможность приложения: когда пользователь отключен, приложение должно просто отображать специальный автономный 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 " привел к ответу на сетевую ошибку: перенаправленный ответ был использован для запроса, режим переадресации которого не "следует".

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

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

Tineler 28 апр. 2018, в 10:21

Источник

Теги:

javascript

service-worker

progressive-web-apps

workbox

1 ответ

Ещё вопросы

Jeff Posnick · Answer 1 · 2018-04-30T17-55-00.000Z

Вы можете адаптировать рецепт " Предоставьте ответный ответ на маршрут " в документах, чтобы учесть ваши конкретные ограничения.

Есть несколько различных вариантов для этого, но самым чистым было бы создание вашей собственной стратегии только для сети (для имитации используемой вами fetch(), которую вы используете в своем примере), chain .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);

Если я использую ваш код, я получаю следующую ошибку Uncaught TypeError: networkOnly.catch is not a function . Также прямо сейчас я делаю именно то, что вы опубликовали здесь: GitHub Issue . Просто мой сервисный работник неправильно обрабатывает 302 перенаправления ...
Извините, я оставил скобки после networkOnly()