27.渐进式网页应用(PWA)解决了什么Web应用问题.md

27 | 渐进式网页应用（PWA）：它究竟解决了Web应用的哪些问题？

浏览器切入移动端问题，Web应用移动化

三大进化路线

1. 应用程序Web化
2. Web应用移动化
3. Web操作系统化

PWA

• PWA -- Progressive Web Application 渐进式Web应用
  • Web应用开发者角度，PWA提供渐进式过度方案，将普通站点过度到Web应用，降低站点改造的代价，让站点逐步支持各种新技术
  • 技术层面看，PWA是一种渐进式演化过程，会一点点演进，提供更好设备特性支持，不断优化流畅的动画效果，页面加载速度，本地应用等。
• Web优势： 自由开放，code once ，run anywhere
• PWA： 定义：一套里面逐渐增强Web的优势，通过技术将本地应用和小程序的距离缩短

Web应用 VS 本地应用

• Web页面缺少的东西
  1. Web应用缺少离线使用能力，用户沉浸式的体验在离线或者弱网的情况下没办法体现出来
  2. Web应用缺乏消息推送的能力
  3. Web应用缺少一级入口，也就是在桌面端可以打开应用的能力而不是每次用浏览器打开。
• 解决方案：
  1. 引入service Worker尝试解决离线存储和消息推送的问题
  2. 通过引入manifest.json解决一级入口问题(安卓基于manifest清单配置)

Service Worker

• WHATWG提出过使用app cache标准缓存页面，但是使用中暴露问题角度，所以标准被废弃
• 2014年标准委员会提出Service Worker的概念，在页面和网络中间增加一个拦截器，用于缓存和拦截请求
• 没安装service worker之前，WebApp通过网络模块进行请求资源，安装之后，WebApp请求资源时，会先通过Service worker，判断返回的是Service worker缓存的资源还是重新去请求资源，控制权在Service Worker手里
• 拦截请求、 缓存资源
• 避免JS占用主线程事件过多的问题，浏览器提供了service worker的功能， 目的让JS运行在主线程之外，但是web worker没有当前页面的DOM环境，只能执行一些与DOM无关的操作，并通过postMessage方法将执行的结果返回主线程，所以Web Worker只是在渲染进程中新开的一个线程，生命周期与页面关联
• Service worker思想与web worker同出一辙，只是Service worker要在web worker的基础上加上存储功能，service worker还得为其他多个页面提供服务，所以不能将其与单个页面绑定在一起，Chrome架构中，Service worker是运行在浏览器进程中的，因为浏览器进程与页面主进程渲染进程不一样，生命周期最长，能为所有页面提供服务
• 消息推送
  • 消息推送时浏览器页面未必启动，需要Service worker接收服务器推送的信息，并将消息通过一定方式在端中推送。
• 安全
  • HTTP明文传输，如果使用HTTP传输数据肯定是裸奔，所以采用HTTPS，HTTPS密文传输，无法破解数据内容，HTTPS还有校验机制，双方很容易知道数据是否被篡改，所以站点使用Service worker就要升级https
  • Service worker需要支持Web页面默认的安全策略

summary

• 渐进式演进将Web技术发挥到极致的同时也渐渐缩短本地应用的差距，PWA Service worker的设计思路同样也是一个亮点
• 添加桌面图标，增加离线缓存，增加消息推送是PWA走向设备的必备功能，但是真正决定PWA的关键还得看底层技术支持，对于页面渲染效率和设备兼容问题，WebAssembly等技术也在渐进式的不断前进。