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

呜呜呜

我正在创建一个需要离线支持和更新的网络应用程序。当我更新应用程序时,新的 Service Worker 开始从磁盘缓存中缓存文件并且不更新应用程序。这会导致新缓存获取旧文件。chrome 网络调试的屏幕截图

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 和 iOS 上的 safari。

谢谢你的帮助

头颅

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

您有两个主要选项来处理此问题:

  1. 确保您的服务器对所有静态资产使用正确的 HTTP 标头,例如。ETags 或缓存:stale-while-revalidate 等。即使资产的名称没有更改,您也可以强制浏览器检查服务器是否有新版本。

  2. 当文件以任何方式更改时,请始终更改文件的名称

第二个选项是大多数人在开发 Web 应用程序时使用的选项。通常工具、JS 打包器等确保文件名改变。文件名通常分为两部分,包括文件内容的散列:例如app.8927349789adf8.jsstyles.329789dfs89sigjg.css. 当然,您不想手动执行此操作,而是使用 Webpack 或 Parcel 等。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Javascript服务工作者:从缓存中获取资源,但也进行更新

如何列出服务工作者已经存储在浏览器缓存中的博客帖子?

是否可以修改服务工作者缓存响应标头?

服务工作者和客户端请求“缓存控制”:“无缓存”

使Web应用程序脱机-应用程序缓存或服务工作者哪个更好?

WebView:以编程方式清除服务工作者缓存

使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

服务工作者不会从缓存中返回文件

具有SSL证书缓存的服务工作者

PWA服务工作者缓存/更新预期行为

根据年龄删除服务工作者缓存中的条目

注销时如何清除服务工作者缓存?

延迟加载或预加载Angular模块并使用服务工作者来缓存结果?

服务工作者列出缓存中的所有URL并传递给另一个函数

从create-react-app中的服务工作者缓存中排除index.html

如何根据服务工作者中的某些标志缓存响应

在服务工作者中服务之前,可以编辑缓存的index.html吗?

通常,服务工作者应预缓存哪些文件?

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

服务工作者查询缓存算法是否允许表达式匹配URL路径?

服务工作者中的XMLHttpRequest

检查服务工作者缓存中是否存在URL

在服务工作者中添加图像和CSS文件以及HTML文件以进行离线缓存

服务工作者缓存文件但不离线加载

服务工作者在反应中缓存的路由

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?

服务工作者缓存破坏谷歌地图 api