开始有兴趣了解ServiceWorker，因为在学习react的时候使用create-react-app创建的应用，src下会有一个registerServiceWorker.js文件。后来在了解PWA的时候，也看到了。所以我决定写一篇笔记来了解更多。什么是ServiceWorker？ServiceWorkers本质上充当代理服务器，位于Web应用程序、浏览器和网络（如果可用）之间。它们旨在（除其他外）实现有效的离线体验的创建，拦截网络请求并根据网络是否可用以及更新的资产是否驻留在服务器上采取适当的行动。他们还将允许访问推送通知和后台同步API。—来自MDN的翻译是：Serviceworkers本质上充当Web应用程序和浏览器之间的代理当网络可用时，服务器也可以充当浏览器和网络之间的代理。它们旨在（除其他事项外）支持创建高效的离线体验、拦截网络请求并根据网络是否可用以及更新的资源驻留在服务器上采取适当的行动。它们还允许访问推送通知和后台同步API。ServiceWorker在主线程之外的线程上运行，因此不会阻塞主线程，有自己独立的上下文，不能访问DOM。只能使用异步API。而且为了安全起见，serviceworker只能在https上运行。部分浏览器的隐私模式也不可用。由于serviceworkers是chrome提出和推广的技术，chrome对其支持最好。其他浏览器的支持请参考CanIUse：一张MDN生命周期盗用图。离线应用相关接口CacheStorage在浏览器中的引用称为缓存。CacheStorage是多个Cache的集合，每个Cache可以存储多个Response对象。虽然在ServiceWorker规范中定义了它，但它可以在其他worker和windows中使用。可以通过调用缓存上的open方法异步获取对缓存对象的引用。Cache.match(request,options)返回一个Promise对象，resolve的结果是第一个匹配到Cache对象的缓存请求。Cache.matchAll(request,options)返回一个Promise对象，resolve的结果是所有匹配到Cache对象的请求的数组。Cache.add(request)获取此URL，检索返回的响应对象并将其添加到给定的Cache对象。这在功能上等同于调用fetch()，然后使用Cache.put()将响应添加到缓存。Cache.addAll(requests)获取一个URL数组，检索并将返回的响应对象添加到给定的Cache对象.Cache.put(request,response)获取请求及其响应并将它们添加到给定的缓存中。Cache.delete(request,options)查找key值为request的Cache条目。如果找到，则删除Cache条目，并返回一个解析为true的Promise对象；如果未找到，则返回解析为false的Promise对象。Cache.keys(request,options)返回一个Promise对象，resolve的结果是Cache对象的键值数组。下面的代码是一个实现离线应用的demo——ServiceWorkerDemo这个demo是一个简单的离线应用，缓存了所有的静态资源请求。即使修改了index.js和index.css文件，刷新页面还是没有变化。要看到新的变化，您必须更改CACHE_KEY或修改fetch事件的处理逻辑。constCACHE_KEY='演示';constCACHE_FILES=['/','bg.jpg','index.js','index.css'];self.addEventListener('install',function(event){//监听worker的安装事件event.waitUntil(//延迟安装事件直到缓存初始化caches.open(CACHE_KEY).then(function(cache){console.log('Cachecreated');returncache.addAll(CACHE_FILES);}));});self.addEventListener('activate',function(event){//监听worker的激活事件event.waitUntil(//延迟激活事件直到缓存被初始化caches.keys().then(function(keys){returnPromise.all(keys.map(function(key,i){//清除旧版本缓存if(key!==CACHE_KEY){returncaches.delete(keys[i]);}}))}))});self.addEventListener('fetch',function(event){//拦截资源请求event.respondWith(//返回资源requestcaches.match(event.request).then(function(res){//判断是否命中缓存if(res){//返回缓存返回资源；}回退（事件）；//执行请求备份操作}))});functionfallback(event){//恢复原始请求consturl=event.request.clone();returnfetch(url).then(function(res){//请求资源//如果不是有效响应则发送错误if(!res||res.status!==200||res.type!=='basic'){returnres;}constresponse=res.clone();caches.open(CACHE_KEY).then(function(cache){//缓存刚刚下载的资源cache.put(event.request,response);});returnres;})}其他使用消息推送后台消息传递网络代理，转发请求，假响应
