有没有办法判断您是否从服务人员那里获取缓存数据？答案

【问题标题】：Is there a way to tell if you're getting cached data from the service worker?有没有办法判断您是否从服务人员那里获取缓存数据？
【发布时间】：2019-09-30 23:19:48
【问题描述】：

我正在开发一个创作/CMS 类型的应用程序。该应用程序允许同时编辑各种“块”数据。它支持离线使用 appache 和 indexDB。通过这种方法，我知道我的数据是来自网络还是来自缓存。现在我想迁移一些东西以使用服务工作者和新的缓存 api。

我需要一种方法来了解我的数据（请求）是从缓存还是网络提供的，以便我可以通知用户他们可能正在查看过时的数据，以便任何编辑都可能覆盖他们不知道的数据。 IMO，这将是一件很常见的事情，但事实证明并不是那么容易......

我目前正在尝试使用 WorkBox 让事情正常运行，但我对原生解决方案非常满意。使用 Workbox 我试图在响应上设置一个新的标题，但 Chrome 抱怨

const apiStrategy = workbox.strategies.cacheFirst({
    cacheName: 'data-cache',
    cacheExpiration: {
        maxEntries: 100,
        maxAgeSeconds: 3600 * 24
    },
    cacheableResponse: { statuses: [200] }
});

workbox.routing.registerRoute(
    new RegExp('/api/'),
    async ({event, url}) => {
        const cachedResponse = await apiStrategy.handle({event, url});
        if (cachedResponse) {
            const responseClone = cachedResponse.clone();
            responseClone.headers.set('x-sw-cache', 'yes');
            return responseClone;
        }
        return cachedResponse;
    }
);

那么有什么方法可以知道响应是来自网络还是缓存？

【问题讨论】：

标签： javascript html caching service-worker workbox

【解决方案1】：

如果您查看浏览器的开发工具（即 chrome）切换到网络选项卡，它将显示为（来自 ServiceWorker）。此外，如果您启用调试工作箱输出，您需要在控制台中了解所有信息。

【讨论】：

这不是我想要的。我需要知道我的 js 代码中的数据来自哪里。

【解决方案2】：

原来有一堆plugins。我能够使用自定义 cacheWillUpdate 插件获得我需要的东西。我的代码现在看起来像

workbox.routing.registerRoute(
    new RegExp('/api/'),
    new workbox.strategies.NetworkFirst({
        cacheName: 'data-cache',
        cacheExpiration: {
            maxEntries: 100,
            maxAgeSeconds: 3600 * 24
        },
        cacheableResponse: { statuses: [ 200 ] },
        plugins: [
            {
                cacheWillUpdate: ({ response }) => {
                    return newResponse(response.clone(), (headers) => {
                        headers.set("x-sw-cache", 'yes');
                        return headers;
                    });
                }
            }
        ]
    })
);


const newResponse = (res, headerFn) => {
    const cloneHeaders = () => {
        const headers = new Headers();
        for (const kv of res.headers.entries()) {
            headers.append(kv[0], kv[1]);
        }
        return headers;
    };

    const headers = headerFn ? headerFn(cloneHeaders()) : res.headers;

    return new Promise((resolve) => {
        return res.blob().then((blob) => {
            resolve(new Response(blob, {
                status: res.status,
                statusText: res.statusText,
                headers: headers
            }));
        });
    });
};

newReponse 函数取自 How to alter the headers of a Response? 感谢@mjs！

我现在可以检查 x-sw-cache 标头以通知我的用户他们可能正在查看状态数据。 :)

【讨论】：