Question

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

如何使用Workbox执行此操作？我注意到RequestWrapper类包含fetchOptions，但我找不到使用它们的方法。

Answer 1

在第2版中，预先缓存应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）

Answer 2

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

SELECT * FROM table WHERE [some conditions] AND (col1 <> 0 OR col2 <> 0)

如何向Workbox添加提取选项？

2 个答案: