开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
Service Workers
一、什么是Service Workers
Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。
二、渐进式web应用
应用场景
渐进式Web应用是一种崭新的Web应用，它结合了原生应用的优点和Web少冲突的特点。
渐进式Web应用始于简单的网站，但随着用户的使用，它不断获得新的权限，并从网站变成一种更像传统原生应用的形式。
使用场景描述：
想象一下，你早上醒来，抓起手机，浏览本地列车公司的网站。你快速查看了上班需要乘坐的列车的时间表，然后关闭浏览器，并把手机放进口袋。下班时，你再次访问该网站，查看下一趟列车何时发车（你甚至没有注意到正在乘坐的电梯没有手机信号，因为列车公司的网站依然在运行，即使你处于离线状态）。次日，当你再次访问该网站时，浏览器询问你是否要添加快捷方式到主屏幕上，你欣然同意。当天晚些时候，当你从主屏幕的图标登录该网站时，它通知你，由于施工，列车可能会延误，并问你是否想接收关于列车时刻变化的后续通知。第三天早上，当你醒来时，手机收到消息推送，说该列车会延误15分钟。你按下闹钟上的延时按钮，又多睡了一会。
渐进式Web应用从一个简单的网站开始，慢慢获得新的权限，直到和原生应用一样，而不是试图把你送到应用商店，希望你安装应用。就这样，列车公司在你的手机上一步一步赢得了永久性的位置。
这种新的渐进增强模型，取代了只提供“安装”和“不安装”两种选择的原生应用。渐进式Web应用能赢得用户的信任，并按需获得新的权限。
你可能会问，为什么这是对原生应用的改进呢？我们为什么不坚持使用原生应用呢？好吧，除非你是少数的幸运儿，否则你应该知道，原生应用已经行不通了。用户安装应用的可能性在逐年减小，获取新用户的成本在逐渐增长，留住用户变得越来越困难。
当前的移动环境
当第一款iPhone在2007年推出时，它的杀手级功能是让你能够在手机上浏览网站。当移动应用于一年后诞生时，开发人员终于能够突破网页的功能限制了（同时，由于应用商店的引入，也面临许多新的限制）。Web具有高级图像技术、地理位置识别、消息推送、离线可用性、主屏幕图标等特性，但在许多开发人员的眼中，Web似乎相形见绌。原生应用接管了全球（和我们的手机）。但这种趋势正在转变。虽然我们在手机和移动应用上花费的时间比以往任何时候都多，但我们使用的应用却越来越少。用户安装的应用少了，而且只使用其中几个。如果你的应用在应用商店中排在前10位，你可能不会有这种困扰。但是，现在尝试将一款新的应用打入市场几乎是不可能的，成本就更别提了。
用户行为
根据2016年comScore的报告，在移动设备上，平均每人将84%的时间花在最流行的5个应用上。抱歉，这些不是你的应用。在平板电脑上，这个比例甚至更高，用户将95%的时间花在了这5个应用上。
该报告还表明，移动网站比原生应用更容易获得大量用户。拥有500万以上访问者的移动网站接近600个，比拥有类似受众的原生应用多4.5倍。排名前1000位的移动网站拥有的用户数量几乎是排名前1000位的原生应用的3倍，而且前者的用户增长速度是后者的两倍。
让用户安装并使用应用，如同在一个漏斗形空间里挣扎求生。用户需要知道你的应用（通过传统的在线广告或你的网站），然后必须访问其在应用商店中的页面，接下来需要点击安装。他们需要同意授予应用不同的权限，然后等待应用下载并安装。最后，他们至少要启动一次应用，甚至使用它。
当用户安装他们知道并喜欢的应用（比如抖音或者微信）时，这个漏斗看起来并不算太糟糕。但是大量研究表明，在这个漏斗的每一个环节，平均有20%的用户丢失了。应用开发人员为广告点击付费后，发现只有不到20%的用户实际启动了应用，这种情况并不罕见。
网站竭尽所能地让你安装他们的应用，甚至采用了一种新的广告方式。你肯定见过这种广告：当你打开一个网站，想看一篇短文或者查询明天的天气时，发现所需信息近在眼前，但是一个横幅广告随即弹了出来，挡住了你想看的内容。它问你是否愿意安装一个应用，而不直接阅读已经在你眼前的内容。
与传统网站不同，原生应用的生命并不限于用户首次发现它到离开这段短暂的时间（有时候，这段时间只有几秒钟）。一旦安装，原生应用就在你的主屏幕上占据了永久性的位置。它可以随时通过消息推送提醒你它的存在。这让开发者有很多机会在应用的长生命周期里尝试获得投资回报。
但随着渐进式Web应用的推出，潮流终于开始转向了。这些超能力所带来的优势曾经是原生应用专有的，但现在可以移植到Web应用上了。将这些能力与Web少冲突、一步漏斗的特点（使用点击链接取代安装应用）结合起来，你就会明白为什么用户、Web开发者和企业都能因拥抱渐进式Web应用而获益良多。
- 利用PWA技术，讲移动网页的用户转换为永久用户
三、hello world
判断浏览器中是否支持PWA
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/serviceworker.js").then(function (registration) {
console.log("ServiceWorkerregisteredwithscope:", registration.scope);
}).catch(function (err) {
console.log("Serviceworkerregistrationfailed:", err);
});
}
拦截css
self.addEventListener("fetch", function (event) {
if (event.request.url.includes("bootstrap.min.css")) {
event.respondWith(new Response(
".hotelslogan{background:green!important;}nav{display:none}",
{
headers: {
"ContentType": "text/css"
}
}
));
}
});
