How to allow cookies and handle 302 redirects with workbox service worker tools?

问题

I have a SSR based react app and at present implementing Workbox tools for precaching and offline capabilities into it. I ran into issues mainly because the site relies on cookies at server side and issues redirects based on these.

Initial load works fine, but once service worker(sw) is online and another refresh results in sw doing a fetch call with the url from within workbox source. During this time, the server doesn't find cookies(fetch doesn't carry credentials - link) and issues a redirect(302) to a different url(which lets you set some options into cookies and refreshes to old url).
This results in the following error on the client side 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".
The server issues redirect as 302 status, but the client results in: 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

Here is my service worker code and the assets are populated by workbox-webpack plugin.

/* 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'))
)

P.S. This is my first try with workbox tools or service workers and I might have missed out or overseen some details. Kindly point me in some direction.

回答1:

By default, fetch doesn't pass the cookies, so you will need to add the credentials in the options:

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

More informations here: https://github.com/github/fetch#sending-cookies

来源：https://stackoverflow.com/questions/47019571/how-to-allow-cookies-and-handle-302-redirects-with-workbox-service-worker-tools

标签

service-worker

workbox

service-worker-events