Javascript 如何使用service worker获取json数据并更新应用程序外壳

我已经通过ServiceWorker注册、激活和缓存了资源，现在我想知道如何使用ServiceWorker获取JSON数据和更新应用程序外壳

我已经通过ServiceWorker注册、激活和缓存了资源，现在我想知道如何使用ServiceWorker获取JSON数据和更新应用程序外壳

var CACHE_NAME='my-CACHE-v1'； var urlsToCache=[ “/common.css”， “/common.js” ]; self.addEventListener'install'，函数e{ console.log“[Service Worker]Install”； e、 等到 caches.openCACHE\u NAME.then函数缓存{ log“[Service Worker]缓存应用程序外壳”； 返回cache.addAllurlsToCache； }然后呢{ 返回自我滑雪等待； } ; }; self.addEventListener'fetch'，functionevent{ 事件响应 caches.matchevent.request .Then函数响应{ //缓存命中返回响应 如果响应{ 返回响应； } var fetchRequest=event.request.clone； 返回fetchrequest.then 函数响应{ //检查我们是否收到了有效的回复 if！response | | response.status！==200 | | response.type！=='basic'{ 返回响应； } var responseToCache=response.clone； caches.openCACHE\u名称 .thenfunctioncache{ cache.putevent.request，responseToCache； }; 返回响应； } ; } ; }; self.addEventListener“激活”，函数E{ 控制台日志“[ServiceWorker]激活”； e、 等到 caches.keys.thenfunctionkeyList{ 返回Promise.allkeyList.mapfunctionkey{ 如果键！==缓存\u名称{ console.log“[ServiceWorker]删除旧缓存”，键； 返回caches.deletekey； } }; } ; 返回self.clients.claim；

---

}; 一个值得效仿的例子是

它在构建过程中集成了sw precache，以保持应用程序外壳资源HTML、JS和CSS的最新

它通过sw工具箱上的依赖项使用运行时缓存来缓存JSON API响应以及图像

它基于稍微过时的React/React router/React redux版本，但一般原则仍应适用