javascript - Workbox - 使用自定义处理程序

Question

我想要一个数组来配置部分路径(当响应与请求的 URL 匹配时缓存响应)和过期时间(在 X 秒后使缓存过期)，但我无法创建“处理程序” ' 才能正常工作。

这是配置路径和过期时间的数组:

const PATHS_TO_CACHE = [
    { url: 'api/v1/destination', expiration: THIRTY_DAYS },
    { url: 'api/v1/hotel', expiration: THIRTY_MINUTES },
];

这是调用 cachePath 进行匹配并调用 pathHandler 进行处理的缓存方法:

function cachePaths() {
    workbox.routing.registerRoute(cachePath, pathHandler);
}

匹配方法:

function cachePath({ url, event }) {
    const match = PATHS_TO_CACHE.find(function(path) {
        return url.href.includes(path.url);
    });

    return match || false;
}

以及处理程序方法:

function pathHandler({ url, event, params }) {
    return workbox.strategies.staleWhileRevalidate({
        cacheName: 'url-cache',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200],
            }),
            new workbox.expiration.Plugin({
                maxAgeSeconds: params.expiration,
            }),
        ],
    });
}

好吧，pathHandler 不起作用，几次尝试让我感到沮丧......在我需要 返回新响应(某物) 的地方抛出错误(是用url 和 event)，不正确的获取请求和不正确的对象响应。

那么，我如何构建 pathHandler 方法来将响应缓存 X 秒并仍然获得正确的响应？

提前致谢!

Answer 1

您稍微误用了 API。


workbox.strategies.staleWhileRevalidate({...}) <- Returns a Route


遗憾的是，这里的文档对此并不清楚:https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies

此处概述了您想要执行的操作:https://developers.google.com/web/tools/workbox/modules/workbox-strategies#advanced_usage

function pathHandler({ url, event, params }) {
    const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate({
        plugins:[...],
    });
    return staleWhileRevalidate.handle({event});
})