使用工作箱时如何从缓存的 url 中忽略 url 查询字符串？答案

【问题标题】：How to ignore url querystring from cached urls when using workbox?使用工作箱时如何从缓存的 url 中忽略 url 查询字符串？
【发布时间】：2017-09-18 14:23:37
【问题描述】：

有没有办法使用工作箱从注册路由下方忽略查询字符串“？screenSize =”！如果我可以使用正则表达式，我将如何在下面的场景中编写它？基本上，无论 screenSize 查询字符串是什么，我都希望匹配缓存。

workboxSW.router.registerRoute('https://example.com/data/image?screenSize=980',
workboxSW.strategies.cacheFirst({
    cacheName: 'mycache',
    cacheExpiration: {
        maxEntries: 50
    },
    cacheableResponse: {statuses: [0, 200]}
})
);

在尝试了 cachedResponseWillBeUsed 插件之后：我没有看到插件被应用：

【问题讨论】：

标签： caching fetch service-worker progressive-web-apps workbox

【解决方案1】：

更新：从 Workbox v4.2.0 开始，新的 cacheKeyWillBeUsed 生命周期回调可以帮助覆盖读取和写入操作的默认缓存键：https://github.com/GoogleChrome/workbox/releases/tag/v4.2.0

原始回复：

您应该可以通过编写一个cachedResponseWillBeUsed plugin 来做到这一点，您在配置策略时将其传入：

// See https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed
const cachedResponseWillBeUsed = ({cache, request, cachedResponse}) => {
  // If there's already a match against the request URL, return it.
  if (cachedResponse) {
    return cachedResponse;
  }

  // Otherwise, return a match for a specific URL:
  const urlToMatch = 'https://example.com/data/generic/image.jpg';
  return caches.match(urlToMatch);
};

const imageCachingStrategy = workboxSW.strategies.cacheFirst({
  cacheName: 'mycache',
  cacheExpiration: {
      maxEntries: 50
  },
  cacheableResponse: {statuses: [0, 200]},
  plugins: [{cachedResponseWillBeUsed}]
});


workboxSW.router.registerRoute(
  new RegExp('^https://example\.com/data/'),
  imageCachingStrategy
);

【讨论】：

如果 url 类似于 example.com/data/{id}/image?screenSize=980，是否有可能使这种类型的 url 与上述方法一起使用？
我更新了响应以显示使用硬编码的 URL 作为缓存键，并使正则表达式更通用。我真的不明白 URL 的 {id} 部分在确定您的缓存查找时是如何发挥作用的——应该考虑到它吗？它应该被忽略吗？——所以你必须根据它来调整代码。
是的，我有另一个使用动态 id 的 url，现在可以对这种类型的 url 执行与上述相同的操作吗？就像使用 'ignoreSearch: true'
如何验证这个插件是否被应用？
我包含了应用的插件截图，但没有看到 cachedResponseWillBeUsed，我看对地方了吗？

【解决方案2】：

在other 答案的基础上，caches.match 有一个选项ignoreSearch，所以我们可以简单地使用相同的 url 再试一次：

cachedResponseWillBeUsed = ({cache, request, cachedResponse}) => {
  if (cachedResponse) {
    return cachedResponse;
  }

  // this will match same url/diff query string where the original failed
  return caches.match(request.url, { ignoreSearch: true });
};

【讨论】：

【解决方案3】：

从 v5 开始，基于 aw04 的答案，代码应如下所示：

const ignoreQueryStringPlugin = {
    cachedResponseWillBeUsed: async({cacheName, request, matchOptions, cachedResponse, event}) => {
        console.log(request.url);
        if (cachedResponse) {
            return cachedResponse;
        }

        // this will match same url/diff query string where the original failed
        return caches.match(request.url, {ignoreSearch: true});
    }
};

registerRoute(
    new RegExp('...'),
    new NetworkFirst({
        cacheName: 'cache',
        plugins: [
            ignoreQueryStringPlugin
        ],
    })
);

【讨论】：

【解决方案4】：

ignoreURLParametersMatching 参数对我有用：

https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters

【讨论】：

【解决方案5】：

您可以简单地使用cacheKeyWillBeUsed，修改保存的缓存键以完全忽略查询，并将对url的每个响应与任何查询匹配。

const ignoreQueryStringPlugin = {
 cacheKeyWillBeUsed: async ({request, mode, params, event, state}) => {
  //here you can extract the fix part of the url you want to cache without the query
  curl = new URL(request.url);
  return curl.pathname;

 }
};

并将其添加到策略中

workbox.routing.registerRoute(/\/(\?.+)?/,new 
 workbox.strategies.StaleWhileRevalidate({
  matchOptions: {
   ignoreSearch: true,
  },
  plugins: [
   ignoreQueryStringPlugin
  ],
}));

【讨论】：