响应式网页应用-PWA

一、响应式网页应用-PWA介绍

响应式网页应用-PWA是Progressive Web App的英文缩写，渐进式增强WEB应用。一个为响应式设计的“保护伞”式的术语，是 Google 在2015年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。独立连接性、新颖、安全、可探索、可重定制、可安装性、可链接的应用web站点，并带有原生应用般的交互性能。

二、PWA 的优势

1、消息推送。用户只要允许，即使网页关闭后仍然可以在系统通知栏收到推送消息。

2、后台加载。往常的网页应用只要关闭了网页他的生命就结束了，现在引入了一个 Service Worker 的概念，即使网页关闭，PWA 仍然可以在后台运行获取数据更新（当然有限制）。离线使用。PWA 打开后会缓存一些内容，之后再次访问即使没有网络也可以浏览之前的页面（如同IE时代的离线浏览）。

3、原生应用界面。在某些情况下 PWA 应用可以隐藏浏览器本身的所有视觉成分，光从UI和UX上看，很容易认为这就是一个原生界面，如下图其实都是PWA而不是原生应用。

4、桌面图标。PWA只要配上一个图标，再放快捷方式在桌面上，就真的和原生系统无异了，打开的速度也很快。另一方面，和原生应用比，PWA 又不需要用户安装，只需要浏览器支持 PWA 就可以了。

三、PWA中包含的核心功能及特性如下：

1. Web App Manifest
2. Service Worker
3. Cache API 缓存
4. Push&Notification 推送与通知
5. Background Sync 后台同步
6. 响应式设计

四、Service Worker 介绍

Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静静更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力，是PWA的核心。

五、Service Worker 工作原理

Service worker 是一个完全独立于 Web 页面的 js 脚本，有他自己的生命周期。每个 service worker 会对应一个缓存池，每个缓存池有多个缓存仓库。

首先讲讲它的声明周期：

若网站对应的 cacheName 没有 install，则首先触发 install事件。
若install失败，则退出等待下次访问再启动；否则触发activate事件。
在activate中，判断当前页面是否在上文声明的 filesToCache 列表中，如果是则接管网页的显示。接管网页以后，如果当前内存不足，会被杀死；否则等待处理fetch和message事件。这两个事件一个是当网络请求时，或者其他网页发出了消息时。

转载于:https://my.oschina.net/alan01/blog/3078491