在这个前端越来越重的时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。浏览器缓存、协议缓存、强缓存懒加载（首屏）CDN多域名突破并发下载限制。事实上，我们在两年前就对这个内容进行了内部研究。应用缓存解决方案？PWA解决方案？但最终没有选择。之前看了一下代码，发现localstroage存放的是代码，有的话就用localstroage。节省这部分加载时间。最后一个同事离开了。我也忘记了当时的调查结果。只能开始新一轮的研究，我选择了PWA方案。（如果说网速拖慢加载速度，那我的网页可以离线访问，所以速度会起飞？）网上的资料很少。我希望我能写一篇文章来帮助下一个想使用PWA解决方案的人。ServiceWorkersServiceworker是在指定源和路径下注册的事件驱动的worker。serviceworker在worker上下文中运行，因此它无法访问DOM。不像主线程，它运行在其他线程中，所以不会造成主线程阻塞。它被设计成完全异步的，ServiceWorker中不能使用XHR和localStorage等同步API。ServiceWorkers本质上充当Web应用程序（服务器）和浏览器（客户端）之间的代理服务器。它可以提供有效且有效的离线体验并拦截网络请求。推送通知也可用。ServiceWorkers需要注意需要支持HTTPS才能访问你的页面。出于安全原因，ServiceWorkers需要HTTPS才能运行。（其实很多API都需要HTTPS的支持）资源路径是根目录的绝对路径。最大作用域（scope），也就是资源路径。https://www.lilnong.top/static/js/sw-20190621.js的最大功能路径是/static/js/为了方便本地开发，localhost也被浏览器认为是安全源。在已经支持serivceworkers的浏览器版本中，默认情况下不启用许多功能。如果您发现示例代码在当前版本的浏览器中无法正常运行，您可能需要启用浏览器的相关配置：FirefoxNightly：访问about:config，将dom.serviceWorkers.enabled的值设置为true;重启浏览器;ChromeCanary：访问chrome://flags并启用experimental-web-platform-features；重启浏览器（注意：Chrome默认不支持某些功能）；Opera：访问opera://flags并启用ServiceWorker支持；重新启动浏览器。ServiceWorker声明周期下载当第一次访问ServiceWorker控制的网站或页面时，会立即下载ServiceWorker。至少每24小时下载一次。安装第一次下载会尝试安装，下载的文件是新的，尝试安装并激活安装成功后会激活如果启用了已有的serviceworker，会在后台安装新版本，但是会不被激活，这个序列被称为workerinwaiting，直到所有加载的页面都不再使用旧的serviceworker，才会激活新的serviceworker。新的服务工作者将被激活（成为活跃的工作者）。我们的页面介绍sw.js内容作为一个。当我们修改为b。这个时候a和b都已经安装好了，但是a目前正在使用中。b需要等到没有页面正在使用a才进入活动状态。CacheCache为缓存的Request/Response对象对提供了一种存储机制。目前我们作为ServiceWorker生命周期的一部分。虽然它在serviceworker标准中定义，但它不一定与serviceworker一起使用。也暴露在窗口范围下。Cache.add(request)请求是一个字符串类型的URL。例如cache.add('https://www.lilnong.top/static/css/normalize-8.0.0.css')在功能上等同于调用fetch()，然后使用Cache.put()添加对缓存的响应。Cache.addAll(requests)和上面的功能一样，只是入参是一个字符串数组.requres同上，是要匹配的url。选项如下ignoreSearch：设置是否忽略url中的query。此选项默认为false。ignoreMethod:True匹配时不会验证Request对象的http方法（通常只允许GET或HEAD）。该参数默认值为false。ignoreVary：为true时，匹配不匹配VARY部分。例如，如果一个URL匹配，则无论Response对象是否包含VARY头，都将认为匹配成功。此参数默认为false。cacheName：表示要搜索的特定缓存的DOMString。请注意，此选项会被Cache.match()方法忽略。Cache.matchAll(request,options)同上，返回一个Promise对象，resolve的结果是所有匹配到Cache对象的请求的数组。Cache.put(request,response)人工设置responseCache.delete(request,options)搜索条目为URL。如果找到，则删除Cache条目，并返回一个解析为true的Promise对象；如果未找到，则返回解析为false的Promise对象。Cache.keys(request,options)返回一个Promise对象，resolve的结果是一个Cache对象键值数组（request对象）。如果ServiceWorker使用serviceWorkerContainer.register()注册成功，就会开启另一个线程来做这件事。它与我们的网站无关。serviceworker现在可以接收事件。serviceworker控制的页面打开后，会尝试安装serviceworker。发送给serviceworker的第一个事件是install事件（indexDB可以开始填充和缓存站点资源），使所有资源都可以离线使用。当oninstall事件的处理程序完成执行时，可以认为服务工作者安装完成。安装serviceworker后，它将收到一个激活事件。onactivate的主要目的是清理之前版本的serviceworker脚本中使用的资源。serviceworker现在可以控制页面，但只有在register()成功之后。ServiceWorker的注册if('serviceWorker'innavigator){navigator.serviceWorker.register('/sw-test/sw.js',{scope:'/sw-test/'}).then(function(reg){//注册有效console.log('注册成功。范围是'+reg.scope);}).catch(function(error){//注册失败console.log('注册失败'+error);});}微信公众号总结测试路径https://www.lilnong.top/stati...httpsSW通过fetch实现代理浏览器请求。软件注册后，它将尝试安装。但是激活需要等待下一次（没有资源可以再次使用）。SW要注意域importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');是一个packagevue-cli也有一些webpack支持的工具@vue/pwa@vue/cli-plugin-pwa参数中的request可以是url比如"https://www.lilnong.top/static/project/pwa-20190625/index.5.html”也可以是一个Request对象。可以直接用于保存（put）、查找（match）、添加（add）。可以用来取数据Service_Worker_API--mdnServiceWorkers--mdncache--mdnAppCache--mdn我觉得不用再关心这些内容
