Question

我有一个使用workbox 2.0.0的服务工作者，对于某些页面，我使用的是workboxSW.strategies.staleWhileRevalidate（）缓存策略：

const customFilter = {

cachedResponseWillBeUsed: function (input) {
    try {
        console.log('cacheResponseWillBeUsed for : ' + input.request.url);
        // modify the response body here
    } catch (e) {
        console.error(e);
    }

    return input.cachedResponse;
},

requestWillFetch: function (input) {
    try {
        console.log('requestWillFetch for ' + input.request.url);
    } catch (e) {
        console.error(e);
    }

    return input.request;
},

fetchDidFail: function (input) {
    console.log('A fetch request for ' + input.request.url + ' failed.');
}
}

const cachingStrategy = workboxSW.strategies.staleWhileRevalidate({
    plugins: [
        customFilter
    ]
});

workboxSW.router.registerRoute(
    new RegExp('\/(.*)/suffix/?$'),
    cachingStrategy
);

这很顺利，我可以快速更新从缓存中获得的响应。但我想动态修改所有响应，包括第一次从网络获取它们时（我必须在其中插入一些javascript）。

从我的测试中，cachedResponseWillBeUsed只允许从缓存中进行后处理响应（根据方法名称），但我还没有找到一种方法来访问网络响应（尽管通常情况下仍然使用staleWhileRevalidate策略。）< / p>

有什么建议吗？

非常感谢

Answer 1

您的更正是因为没有RequestWrapper生命周期事件对应于成功返回的网络请求。（如果您希望将其添加到fetchDidSucceed或类似内容中，请随意打开feature request！）

您可以通过编写自己的自定义处理程序来解决此问题，该处理程序调用{{1}}，然后在返回之前对响应执行某些操作，如下所示：

strategies.staleWhileRevalidate

使用staleWhileRevalidate进行后处理页面内容

1 个答案: