Как разрешить использование файлов cookie и обработку перенаправлений 302 с помощью рабочих инструментов службы рабочего ящика?

У меня есть приложение реагирования на основе SSR, и в настоящее время я внедряю в него инструменты Workbox для предварительного кэширования и автономных возможностей. Я столкнулся с проблемами в основном потому, что сайт использует куки на стороне сервера и создает перенаправления на их основе.

  • Первоначальная загрузка работает нормально, но как только сервисный работник (sw) подключен к сети, а другое обновление приводит к тому, что sw выполняет вызов извлечения с URL-адресом из источника рабочего ящика. В течение этого времени сервер не находит файлы cookie (выборка не несет учетные данные - ссылка) и выдает перенаправление (302) на другой URL-адрес (что позволяет настроить некоторые параметры для файлов cookie и обновить старый URL-адрес).

  • Это приводит к следующей ошибке на стороне клиента The FetchEvent for "http://localhost:8080/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

  • Сервер выдает перенаправление как состояние 302, но клиент приводит к:site can’t be reached The web page at http://localhost:8080/ might be temporarily down or it may have moved permanently to a new web address. ERR_FAILED

Вот мой код работника службы, а ресурсы заполняются плагином workbox-webpack.

/* global importScripts, WorkboxSW */

importScripts('/client/workbox-sw.prod.js')

// Create Workbox service worker instance
const workboxSW = new WorkboxSW({
    clientsClaim: true,
    cacheId: 'app-v3-sw',
})

// Placeholder array which is populated automatically by workboxBuild.injectManifest()
workboxSW.precache([])

// cache the offline html to be used as fallback navigation route.
workboxSW.router.registerRoute(
    '/offline.html',
    workboxSW.strategies.networkFirst({
        networkTimeoutSeconds: 2,
        cacheableResponse: { statuses: [0, 200] },
    })
)

// cache google api requests.
workboxSW.router.registerRoute(
    /\.googleapis\.com$/,
    workboxSW.strategies.staleWhileRevalidate({
        cacheName: 'v3-google-api-cache',
        networkTimeoutSeconds: 2,
        cacheableResponse: { statuses: [0, 200] },
    })
)

// cache external requests.
workboxSW.router.registerRoute(
    /(static\.clevertap\.com|www\.google-analytics\.com|wzrkt\.com|www\.googletagservices\.com|securepubads\.g\.doubleclick\.net|www\.googletagmanager\.com)/,
    workboxSW.strategies.cacheFirst({
        cacheName: 'v3-externals-cache',
        cacheExpiration: {
            maxEntries: 30,
        },
        cacheableResponse: { statuses: [0, 200] },
    })
)

// Check if client can hit the url via network, if cannot then use the offline fallback html.
// https://github.com/GoogleChrome/workbox/issues/796
workboxSW.router.registerRoute(
    ({ event }) => event.request.mode === 'navigate',
    ({ url }) =>
        // eslint-disable-next-line compat/compat
        fetch(url.href).catch(() => caches.match('/offline.html'))
)

PS Это моя первая попытка использования рабочих инструментов или сервисных работников, и я мог пропустить или пропустить некоторые детали. Пожалуйста, укажите мне в каком-то направлении.

Источник

1 ответ

По умолчанию, fetch не передает куки, поэтому вам нужно будет добавить учетные данные в опциях:

workboxSW.router.registerRoute(
  ({ event }) => event.request.mode === 'navigate',
  ({ url }) => fetch(url.href, {credentials: 'same-origin'}).catch(() => caches.match('/offline.html'))
)

Больше информации здесь: https://github.com/github/fetch

Источник
Другие вопросы по тегам