渐进式web应用开发---service worker 原理及介绍(一)

渐进式web应用(progressive Web app) 是现代web应用的一种新形式。它利用了最新的web功能，结合了原生移动应用的独特特性与web的优势，为用户带来了新的体验。

一：传统web端开发及现有移动端领域

04-05年之间，ajax出现，让传统的web开发有了一种新的体验，在咱们很早以前都是在后端jsp,php等这些后端语言使用form表单提交一些简单的数据，html由后端拼接输出，可是自从有了ajax之后，改变了咱们对web的理解，咱们须要有更好的用户体验，所以这个时候有了前端这个行业，先后端分离了，前端负责用户体验及页面的事情，然后端则专一于业务逻辑的开发。

几年以后，移动优先原则 出现了，它标志着咱们对web开发的见解发生了改变。完全了让咱们有了一种新的方式来使用网络，在咱们很早以前都是用户坐在台式机前，用20英寸显示器和一根连接到墙上的电缆上网的时代已经结束了。移动领域出现后，让咱们有更好的方式是使用互联网。
在07年的时候，第一款iphone被推出的时候，咱们那个时候就可使用手机来浏览咱们的网站。

可是Web它具备高级图像技术、地理位置识别、消息推送、离线可用性、主屏幕图标等这些特性。这些技术在当时web领域中存在限制，所以用户体验得不到提高。所以这个时候原生应用就出现了，来解决这些事情。

可是这种趋势也正在改变，虽然咱们大部分时间都花在手机应用上，好比玩游戏，看网页，平时装了不少不少应用app，可是咱们平时常常用到的应用并很少，所以用户安装应用变少了，而且平时常常用的app就那么几个，咱们平时安装一个app是这么一个流程，首先我要经过一些网页知道有这个app, 而后去咱们手机的应用商店搜索该app，而后进行下载并安装，安装完成后，咱们须要启动该应用app。而后就是使用该app.

让用户安装一个app应用程序是一个昂贵的选择，可是它相对于传统web端开发的优点是，原生应用并不只仅用户首次打开该app到离开这些短暂的时间，一旦安装完成后，那么原生应用就会在咱们的手机主屏幕中显示一个app图标，而且占据了咱们手机的内存空间，可是若是该App有内容更新的时候，它能够随时经过消息推送的技术来告诉用户，相对于传统的web开发，用户体验会获得一个提高。

可是随着渐进式web应用的到来，这些曾经在原生应用有的技术，如今咱们的web也能作这些事情了，下面咱们能够看下咱们的渐进式web应用有哪些优点。

二：渐进式web应用的优点

渐进式web应用能够作以下事情：

1. 无链接状态下的可用性。
2. 加载速度会更快。
3. 推送消息技术能够实现。
4. 能够在主屏幕上显示快捷方式。
5. 能够媲美原生应用。

2.1 无链接状态下的可用性

渐进式web应用它不依赖于用户的链接状态，当用户访问一个渐进式web应用时，它会注册一个service worker。 service worker能够检测并响应用户链接状态的变化。不管用户是离线、在线、仍是处理网络断开的状态下，它均可以提供完整的用户体验。

2.2 加载速度会更快

使用service worker技术，咱们能够建立一个瞬间运行的网站，不管用户的网速是很快，仍是说用户的网络是2g网络，或者说用户根本就没有网络的连接状态，网站均可以在几毫秒内加载出来。这比咱们的web要快不少，甚至比原生应用还快。

2.3 推送消息技术能够实现

渐进式web应用开发能够向用户发送消息，这些推送消息提供了一个好机会，能够从新吸引用户，而且提醒他们从新回到咱们的网页。渐进式web应用的通知是彻底原生化的，和原生应用推送消息没有区别的。

2.4 能够在主屏幕上显示快捷方式

一旦用户表现出对渐进式web应用感兴趣的话，浏览器就会自动建议用户添加快捷方式到主屏幕上，它和原生应用是彻底一致的。

2.5 能够媲美原生应用

渐进式web应用从主屏幕启动的过程当中能够彻底原生化，和原生应用很是类似。在加载过程当中咱们能够显示启动画面，能够全屏模式运行，摆脱浏览器和手机系统的UI界面，甚至咱们能够锁定屏幕方向。

如上实现咱们全部的关键技术就是 service worker，service worker它是一种脚本，能够经过注册它来控制咱们站点中的一个或多个页面，一旦咱们注册完毕后，service worker就会独立存在，它不属于某个窗口或浏览器标签页的。

service worker 能够监听并响应在其控制下的全部页面事件，好比向web请求文件等事件，它能够修改请求中的响应，能够拦截，修改，传递并返回给页面。以下所示：

如上图所示，service worker 在web应用和服务器层之间，它能够响应请求，不管网络的连接状态如何，service worker它甚至能够在用户离线的状况下正常工做。它能够检测到离线状态或者服务器响应慢的状况，它能够返回缓存内容取而代之。

它还能够当用户关闭咱们的浏览器中的全部标签页，service worker依然能够和服务器进行通讯，它能够接收并显示推送通知。

这就是咱们service worker的优势。它是咱们渐进式web应用的核心。它弥补了web应用的缺失环节。在过去咱们只能使用原生来作的事情了，如今咱们也能够经过web来作这些事情了。

service worker对于咱们学校的成原本讲也是很是低的，它只是简简单单的javascript文件。对于咱们前端开发来说学习没有任何难度。如上就是渐进式web应用的原理，接下来咱们能够慢慢来学习咱们的service worker技术了。

service worker的兼容性

最后咱们来看看service worker 在咱们浏览器和移动端的兼容性以下图所示：