服务工作者从磁盘缓存中缓存资源答案

【问题标题】：Service workers caching ressources from disk cache服务工作者从磁盘缓存中缓存资源
【发布时间】：2019-09-07 14:33:14
【问题描述】：

我正在创建一个需要离线支持和更新的网络应用。当我更新应用程序时，新的服务工作者开始从磁盘缓存缓存文件并且不更新应用程序。这会导致新缓存获取旧文件。 Screenshot of chrome network debbuging。

const STATICCACHE = 'v9';
const DYNCACHE = 'dv2';
//v9
const assets = [
// All my assets
];

// install
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(STATICCACHE).then(cache => {
            console.log("caching assets");
            cache.addAll(assets);
        })
    );

});

// activate event
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(keys => {
            return Promise.all(keys
                .filter(key => key !== STATICCACHE && key !== DYNCACHE)
                .map(key => caches.delete(key))
            )
        })
    )
});

//fetch event
self.addEventListener('fetch', event => {
    if (event.request.url.indexOf('firestore.googleapis.com') === -1) {
        event.respondWith(
            caches.match(event.request).then(cacheRes => {
                return cacheRes || fetch(event.request).then(fetchRes => {
                    return caches.open(DYNCACHE).then(cache => {
                        cache.put(event.request.url, fetchRes.clone());
                        return fetchRes;
                    })
                });
            })
        );
    }
});

它不适用于 chrome for android 和 safari 在 iOS 上。

感谢您的帮助

【问题讨论】：

标签： service-worker

【解决方案1】：

发生这种情况是因为您的资产名称在您更新它们时不会改变，例如。无论文件的内容是什么，app.js 始终是 app.js。从浏览器的角度来看，文件并没有改变。

您有两个主要选择来处理这个问题：

确保您的服务器对所有静态资产使用正确的 HTTP 标头，例如。 ETags 或缓存：stale-while-revalidate 等。这样即使资产名称没有更改，您也可以强制浏览器检查服务器是否有新版本。
当文件以任何方式更改时，请始终更改文件名。

第二个选项是大多数人在开发 Web 应用程序时使用的选项。通常，工具、JS 捆绑器等会确保文件名发生变化。文件名通常分为两部分，包括文件内容的哈希：例如app.8927349789adf8.js 和styles.329789dfs89sigjg.css。当然，您不想手动执行此操作，而是使用 Webpack 或 Parcel 等。

您还可以使用一些变通方法，例如让浏览器发出请求。 app.js?XXXXXX 其中 XXXXX 是当前时间或类似的时间。此外，如果您想合并一些 Service Worker 库，如 Workbox，它支持跟踪文件内容更改，即使名称保持不变。基本上，Workbox 计算文件的哈希值，然后使用查询参数技巧缓存它们，例如。 styles.css?_HASH_OF_THE_FILE。您还可以将相同的技巧合并到您的手写 SW 文件中 - 当您的缓存名称更改时，只需从服务器请求文件并将 ?current_time 之类的内容附加到所有请求中。这将强制浏览器进行网络请求。

【讨论】：