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

时间:2017-09-03 18:55:51

标签: workbox

我有一个使用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>

有什么建议吗?

非常感谢

1 个答案:

答案 0 :(得分:0)

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

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

strategies.staleWhileRevalidate