如何使 Workbox 缓存不区分大小写

Question

我正在使用 Workbox 存储离线页面，它工作正常，除了 URL 需要匹配大小写。如果 Workbox 缓存有 'mysite.com/OfflinePage' 页面，而用户键入 'mysite.com/offlinepage'，则缓存不会找到它。

我正在为我的离线页面使用 StaleWhileRevalidate，我认为使用 'i' 参数制作一个正则表达式，如下所示：

RegisterStaleWhileRevalidate(new RegExp('/Login', 'i'), 'home');

function RegisterStaleWhileRevalidate(Expression, CacheName) {
workbox.routing.registerRoute(
    Expression,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: CacheName,
        matchOptions: {
            ignoreSearch: true,
        },
    })
);

}

会做，但不开心。我在想我可能需要在 url 被缓存之前捕获它并将其更改为小写字母或其他东西，但在这里完全是盲目的。有谁知道我应该看什么技术？

Answer 1

这个问题有两个部分：使用不区分大小写的路由标准，以及在策略中使用缓存键也是如此。

在 Workbox 中有多种不同的方式来处理路由；我们已经将文档中的大部分示例从使用 regular expressions in favor of match callbacks 中移除，因为这样最终会更加清晰。

要使缓存键不区分大小写，cacheKeyWillBeUsed 插件是最干净的方法。

因此，可以通过以下方式完成与您所描述的相同的事情：

function normalizeCacheKeyCase({request}) {
  return request.url.toLowerCase();
}

workbox.routing.registerRoute(
  // Change this match criteria as you see fit.
  ({url}) => url.pathname.toLowerCase() === '/offlinepage',
  new workbox.strategies.StaleWhileRevalidate({
    matchOptions: {
      ignoreSearch: true,
    },
    plugins: [
      {cacheKeyWillBeUsed: normalizeCacheKeyCase},
    ],
 })
);

Answer 2

根据 Jeff 的建议重写了我的新函数：

function RegisterStaleWhileRevalidate(Expression, CacheName) {
workbox.routing.registerRoute(
    Expression,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: CacheName,
        matchOptions: {
            ignoreSearch: true,
        },
        plugins: [
            { cacheKeyWillBeUsed: normalizeCacheKeyCase },
        ],
    })
);}

function normalizeCacheKeyCase({ request }) {
    return request.url.toLowerCase();}

调用它：

RegisterStaleWhileRevalidate(new RegExp('\.(?:css)'), 'css');

如何使 Workbox 缓存不区分大小写

How to make Workbox cache case-insensitive

workbox