如何向 Workbox 添加获取选项？答案

【问题标题】：How to add fetch options to Workbox?如何向 Workbox 添加获取选项？
【发布时间】：2017-12-14 08:18:44
【问题描述】：

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

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

【问题讨论】：

澄清几点：您使用的是 Workbox v2（当前稳定版本）还是 v3 的 alpha 版本？您是否需要将此应用于预缓存请求、运行时缓存请求或两者兼而有之？
@jeff-posnick，我使用的是 Workbox v2.1.2。我需要将此应用于预缓存请求和运行时缓存请求。谢谢！

标签： progressive-web-apps workbox

【解决方案1】：

在 v2 中，预缓存应将 already set 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/build/importScripts/workbox-runtime-caching.prod.v2.0.3.js）

【讨论】：

【解决方案2】：

感谢 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]
  })
);

【讨论】：