工作箱 3 - 忽略运行时缓存中的 URL 参数答案

【问题标题】：workbox 3 - ignore URL params on run-time caching工作箱 3 - 忽略运行时缓存中的 URL 参数
【发布时间】：2017-12-24 16:38:21
【问题描述】：

我想缓存来自使用策略令牌作为 URL 参数的安全 CDN 的资产。例如：www.cdn.com/image.png?Policy=AAAAA&Key-Pair-Id=BBBBB 如果我重新访问该站点，我想从缓存中获取资产，即使我有不同的策略令牌和 Key-Pair-Id。例如：www.cdn.com/image.png?Policy=CCCCC&Key-Pair-Id=DDDDD

如果我在 service worker 中使用此代码：

workbox.routing.registerRoute(
    /^(http(s)?:)?\/\/www\.cdn\.com.*/,
    workbox.strategies.staleWhileRevalidate()
);

它在缓存中找不到响应并进入网络。我希望它与没有 URL 参数的 URL 匹配（即使 Policy=CCCCC&Key-Pair-Id=DDDDD 实际上不是有效的策略）。只需查看www.cdn.com/image.png 是否存在并检索它。

【问题讨论】：

标签： javascript service-worker offline-caching workbox

【解决方案1】：

我通过使用自定义处理程序找到了解决方案：

workbox.routing.registerRoute(
    /^(http(s)?:)?\/\/www\.cdn\.com.*/,
    ({url, event}) => {
        return caches.open(`${prefix}-${runtime}-${suffix}`).then((cache) => {
            const customRequest = `${url.origin}${url.pathname}`;
            return cache.match(customRequest).then((cacheRes) => {
                if (cacheRes) {
                    return cacheRes;
                }
                return fetch(event.request).then((fetchRes) => {
                    cache.put(customRequest, fetchRes.clone());
                    return fetchRes;
                });
            });
        });
    }
);

【讨论】：