1

我需要添加credentials: 'same-origin'到所有获取请求中，以使 PWA 在受密码保护的网站中工作。否则，如果我离开网站并稍后返回，浏览器不会询问我的密码并返回未经授权的错误。

我如何使用 Workbox 做到这一点？我注意到RequestWrapper该类包含 fetchOptions，但我找不到使用它们的方法。

4

2 回答 2

2

在 v2 中，预缓存应该已经设置 credentials: 'same-origin'为FetchOptions所有传出请求的。

对于运行时缓存，您可以通过构建自己的RequestWrapper实例并将其传递给您正在使用的运行时缓存处理程序来获得此行为：

const requestWrapper = new RequestWrapper({
  cacheName: 'my-cache-name', // Change this for each separate cache.
  fetchOptions: {
    credentials: 'same-origin',
  },
  plugins: [], // Add any plugins you need here, e.g. CacheExpiration.
});

const staleWhileRevalidateHandler = new StaleWhileRevalidate({requestWrapper});

workboxSW.router.registerRoute(
  new RegExp('/path/prefix'),
  staleWhileRevalidateHandler
);

（我不确定您如何使用 Workbox 库，但您可能需要显式导入其他脚本才能访问RequestWrapper该类，例如https://unpkg.com/workbox-runtime-caching@2.0.3/构建/importScripts/workbox-runtime-caching.prod.v2.0.3.js）

于 2017-12-22T18:37:34.783 回答
0

感谢 Jess Posnick 的回答。为了避免重写所有工作箱策略，我最终使用了一个自定义插件：

const addFetchOptionsPlugin = {
  requestWillFetch: ({ request }) => new Request(request, { 
    credentials: 'same-origin', redirect: 'follow'
  })
};

workbox.router.registerRoute(
  new RegExp('my-route'),
  workbox.strategies.cacheFirst({
    cacheName: 'my-cache',
    plugins: [addFetchOptionsPlugin]
  })
);
于 2018-03-19T08:56:00.647 回答