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