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

【问题标题】：How to make Workbox cache case-insensitive如何使 Workbox 缓存不区分大小写
【发布时间】：2021-01-22 22:24:57
【问题描述】：

我正在使用 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 并将其更改为小写或其他内容，但在这里完全失明。有谁知道我应该看什么技术？

【问题讨论】：

标签： workbox

【解决方案1】：

这个问题有两个部分：使用不区分大小写的路由条件，以及在策略中使用缓存键。

在 Workbox 中有许多不同的方法来处理路由；我们已将文档中的大部分示例从使用 regular expressions 改为使用 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},
    ],
 })
);

【讨论】：

【解决方案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');

【讨论】：