Service Worker 仅更新缓存中更改的内容，或在 Service Worker 之间共享数据

Question

我有以下服务人员：

var files2cache = {
    "001.html": 1482843787, 
    ..
    "/": 1482821117, 
};

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll(Object.keys(files2cache));
        })
    );
});

// If request matches something in cache - return it from cache
// otherwise do actual request
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

files2cache 生成并包含对其中列出的文件所做的最后更改的时间戳。

问题是如何从以前版本的 service worker 获取这个变量的值，所以我可以 addAll 只有 files2cache[fn] > oldFiles2cache[fn] 为真的文件？

Answer 1

有（至少）两个选项用于存储此版本控制信息：

修改URL缓存中用作键的API

这是sw-precache uses. It modifies request URLs to append a new URL query parameter of the form _sw-precache=<ID> before storing entries using the Cache Storage API. You can see this in action by looking at Chrome's cache viewer after visiting the demo page:

的方法

由于您的 fetch 处理程序需要对不包含此附加查询参数的 URL 执行缓存匹配，因此您需要将匹配的 URL 修改为在调用 caches.match() 之前添加预期的版本控制信息。 sw-precache 通过将原始 URL 的 maintaining a mapping 处理为具有版本控制信息的 URL。

使用 IndexedDB 存储版本控制信息

这种方法涉及更多的开销，因为您需要在 IndexedDB 和缓存存储中同步信息 API，但是通过将版本控制信息卸载到 IndexedDB，您可以保留缓存的请求 URLs 未修改，这使得使用 caches.match() 对 "real" URLs.

执行缓存查找变得更容易

在 sw-helpers 存储库的新 sw-precaching 项目中有这种方法的 example。该项目仍在进行中，但它应该说明概念。

使用支持 promises 的 IndexedDB 包装器库，如 https://www.npmjs.com/package/idb-keyval，如果您采用这种方法，可以真正简化事情。

Service Worker 仅更新缓存中更改的内容，或在 Service Worker 之间共享数据

Service worker update only changed content in cache, or share data between service workers

service-worker

progressive-web-apps