摘要：是一个注册在指定源和路径下的事件驱动。可以提供有效有效的离线体验，拦截网络请求。出于安全原因，要求必须在下才能运行。返回一个对象，的结果是对象值对象组成的数组。当事件的处理程序执行完毕后，可以认为安装完成了。
在前端越来越重的这个时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。
浏览器缓存、协议缓存、强缓存
懒加载（首屏）
CDN 多域名突破下载并发限制。
其实在两年前内部就对这块内容做过调研了。appCache方案？PWA方案？但是最后都没选择。
之前看代码，发现是 localstroage 存代码，如果有就拿 localstroage 去用。省去了这一部分加载的时间。
上个同事离职了。当时的调研结果我也忘了。只能再开始新一轮的调研，我选择的是 PWA 方案。（如果说是网速拖慢了加载速度，那么我的网页可以离线访问不就速度起飞了？）
网上的资料很少。我希望我可以写一篇帮助下一个想使用 PWA 方案的人。
Service worker是一个注册在指定源和路径下的事件驱动worker。
Service worker运行在worker上下文，因此它不能访问DOM。不同于主线程，它运行在其他线程中，所以不会造成主线程阻塞。它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。
Service workers 本质上充当Web应用程序(服务端)与浏览器(客户端)之间的代理服务器。
可以提供有效有效的离线体验，拦截网络请求。还可以推送通知。
需要支持 HTTPS 访问你的页面。出于安全原因，Service Workers 要求必须在 HTTPS 下才能运行。（其实好多API都需要HTTPS的支持）
资源路径为根目录的绝对路径。最大作用域 (scope)，为资源路径。
https://www.lilnong.top/static/js/sw-20190621.js的最大作用路径为/static/js/
为了便于本地开发，localhost 也被浏览器认为是安全源。
在已经支持 serivce workers 的浏览器的版本中，很多特性没有默认开启。如果你发现示例代码在当前版本的浏览器中怎么样都无法正常运行，你可能需要开启一下浏览器的相关配置：
Firefox Nightly: 访问 about:config 并设置 dom.serviceWorkers.enabled 的值为 true; 重启浏览器；
Chrome Canary: 访问 chrome://flags 并开启 experimental-web-platform-features; 重启浏览器 (注意：有些特性在Chrome中没有默认开放支持)；
Opera: 访问 opera://flags 并开启 ServiceWorker 的支持; 重启浏览器。
下载
首次访问service worker控制的网站或页面时，service worker会立刻被下载。
至少每24小时它会被下载一次。
安装
首次下载会尝试安装，
下载的文件是新的，尝试进行安装
激活
安装成功后它会被激活
如果现有service worker已启用，新版本会在后台安装，但不会被激活，这个时序称为worker in waiting
直到所有已加载的页面不再使用旧的service worker才会激活新的service worker。新的service worker会被激活（成为active worker）。
我们页面引入sw.js内容为a。当我们修改为b。
这时候a和b都是已经安装完毕的，但是a是当前正在用的。b需要等没有页面在用a，才会进入激活状态。
Cache 为缓存的 Request/Response 对象对提供存储机制。
当前我们作为 ServiceWorker 生命周期的一部分。尽管它被定义在 service worker 的标准中, 但是它不必一定要配合 service worker 使用。也暴露在 window 作用域下的。
Cache.add(request)
request 是一个字符串类型的 URL。如cache.add("https://www.lilnong.top/static/css/normalize-8.0.0.css")
功能上等于调用 fetch(), 然后使用 Cache.put()将 response 添加到 cache 中。
Cache.addAll(requests)
功能同上，只不过入参为字符串数组
Cache.match(request, options)
返回一个 Promise 对象，resolve 的结果是跟 Cache 对象匹配已经缓存的请求。
requres 同上，是要匹配的 URL
options 如下
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)
人为的，为一个URL设置response
Cache.delete(request, options)
搜索条目。如果找到，则删除该Cache 条目，并且返回一个resolve为true的Promise对象；如果未找到，则返回一个resolve为false的Promise对象。
Cache.keys(request, options)
返回一个Promise对象，resolve的结果是Cache对象key值(request 对象)组成的数组。
serviceWorkerContainer.register() 来注册
注册成功的话，会开启另一个线程来做这件事。与我们的网页是互不相干的。
service worker 现在可以接收事件。
service worker 控制的页面打开后会尝试去安装 service worker。
最先发送给 service worker 的事件是安装事件(在这个事件里可以开始进行填充 IndexDB和缓存站点资源)，让所有资源可离线访问。
当 oninstall 事件的处理程序执行完毕后，可以认为 service worker 安装完成了。
当 service worker 安装完成后，会接收到一个激活事件 onactivate 主要用途是清理先前版本的 service worker 脚本中使用的资源。
Service Worker 现在可以控制页面了，但仅是在 register() 成功后的打开的页面。
ServiceWorker 的注册if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw-test/sw.js", { scope: "/sw-test/" }).then(function(reg) {
// registration worked
console.log("Registration succeeded. Scope is " + reg.scope);
}).catch(function(error) {
// registration failed
console.log("Registration failed with " + error);
});
}
微信公众号
总结
测试路径
https://www.lilnong.top/stati...
https
SW 通过fetch来实现代理浏览器请求。
SW 注册之后会尝试安装。但是激活需要等下次（没有再用的资源了）
SW 要注意他限制的域
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); 是一个封装包
vue-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）
可以用于fetch
资料Service_Worker_API --mdn
Service Workers --mdn
cache --mdn
AppCache --mdn
这个内容我觉得不用再关心了
前端每周清单半年盘点之 PWA 篇 ---王下邀月熊_Chevalier
傻傻分不清的Manifest
PWA之 workbox 学习
初探PWA
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54097.html
摘要：是一个注册在指定源和路径下的事件驱动。可以提供有效有效的离线体验，拦截网络请求。出于安全原因，要求必须在下才能运行。返回一个对象，的结果是对象值对象组成的数组。当事件的处理程序执行完毕后，可以认为安装完成了。 在前端越来越重的这个时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。 浏览器缓存、协议缓存、强缓存 懒加载（首屏） CDN 多域名突破下载并发限制。...
摘要：我喜欢移动，而且也是那些坚持使用技术构建移动应用程序的人之一。我们准备做这样的一个渐进式应用是典型的旨在提高用户离线体验的应用。当我们开始构建应用时，你就能理解上面的场景了。的作用范围是针对相对路径的。最佳的做法是在应用的入口。 我喜欢移动app，而且也是那些坚持使用Web技术构建移动应用程序的人之一。 经过技术的不断迭代（可能还有一些其它的东西），移动体验设计愈来愈平易近人，给予用户...
摘要：基本上是使用现代技术构建的网站但是体验上却像一个移动，在年，谷歌工程师和创造了。此后谷歌就一直致力于让能给用户像原生一般的体验。检查谷歌浏览器的和现在重载你的并且打开，到选项去查看面板，确保这个选项是勾选的。 Web开发多年来有了显著的发展。它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务。只需一个浏览器，用户可以输入URL就可以访问Web应用程序了。随着 Prog...
摘要：基本上是使用现代技术构建的网站但是体验上却像一个移动，在年，谷歌工程师和创造了。此后谷歌就一直致力于让能给用户像原生一般的体验。检查谷歌浏览器的和现在重载你的并且打开，到选项去查看面板，确保这个选项是勾选的。 Web开发多年来有了显著的发展。它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务。只需一个浏览器，用户可以输入URL就可以访问Web应用程序了。随着 Prog...
摘要：基本上是使用现代技术构建的网站但是体验上却像一个移动，在年，谷歌工程师和创造了。此后谷歌就一直致力于让能给用户像原生一般的体验。检查谷歌浏览器的和现在重载你的并且打开，到选项去查看面板，确保这个选项是勾选的。 Web开发多年来有了显著的发展。它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务。只需一个浏览器，用户可以输入URL就可以访问Web应用程序了。随着 Prog...
阅读 4149·2021-09-22 15:34
阅读 2763·2021-09-22 15:29
阅读 489·2019-08-29 13:52
阅读 3350·2019-08-29 11:30
阅读 2258·2019-08-26 10:40
阅读 831·2019-08-26 10:19
阅读 2255·2019-08-23 18:16
阅读 2310·2019-08-23 17:50
