4

我有一个基于 SSR 的反应应用程序，目前正在实施 Workbox 工具，用于预缓存和离线功能。我遇到问题主要是因为该站点依赖于服务器端的 cookie 并基于这些发出重定向。

  • 初始加载工作正常，但是一旦服务工作者（sw）在线并且另一次刷新导致 sw 使用来自工作箱源中的 url 进行 fetch 调用。在此期间，服务器找不到 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 这是我第一次尝试使用工作箱工具或服务人员，我可能错过或忽略了一些细节。请指出我的方向。

4

1 回答 1

1

默认情况下，fetch不传递 cookie，因此您需要在选项中添加凭据：

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#sending-cookies

于 2018-03-02T17:39:05.590 回答