PWA (Progressive Web App)

PWA (Progressive Web App)
1、简介
是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生的功能,比如：通知推送
Js-to-Native与以PWA为首的纯web应用,将分别从两个方向挤压Hybrid的生存空间,消化当前Hybird架构主要解决的问题
IOS目前还不支持PWA
2、下一代web应用
2.1 优点
webpack、Rollup等打包工具
Babel、PostCSS等转译工具
TypeScript等可转译为Javascript的编程语言
React、Angular、vue等现代web前端框架
同构Javascript应用
2.2 缺点
网页资源下载带来的网络延迟
web应用依赖于浏览器作为入口
没有好的离线使用方案
没有好的消息通知方案
3、PWA的优点及特征
显著提高应用加载速度
web应用可以在离线环境下使用
web应用能够像原生应用一样被添加到主屏幕
web应用能够在未被激活的时候发起推送通知
web应用与操作系统集成能力进一步提高
具有渐进增强,响应式用户界面,不依赖网络链接,类原生应用,持续更新,安全,可发现,再次访问,可安装,可连接性的特征
4、Web App Manifest
4.1 介绍
通过一个清单文件向浏览器暴露web应用的元数据,包括名字、icon的URL等,以备浏览器使用,比如：在添加至主屏幕或推送通知时暴露给操作系统,从而增强web应用与操作系统的集成能力
它就好比PWA的户口本一样,承载着web应用与操作系统集成能力的重任,还将在日后不断发展,以满足web应用高速演化的需要
4.2 manifest.json

{

“short_name”: “Manifest Sample”,

“name”: “Web Application Manifest Sample”,

“icons”: [{

“src”: “launcher-icon-2x.png”,

“sizes”: “96x96”,

“type”: “image/png”

}],

“scope”:“/sample/”, // -> 定义了web应用的浏览作用域,比如作用域外的url会打开浏览器而不会在当前的PWA里继续浏览

“start_url”: “/sample/index.html”, // -> 定义了一个PWA的入口页面

“display”: “standalone”,

“orientation”: “landspace”, // -> 锁定屏幕旋转

“theme_color”: “#000”, // -> 主题色

“background_color”: “#fff” // -> 背景色

}
5、Service Worker
5.1 LocalServer
让web应用离线使用的第一次尝试
Google为了让web应用可以在本地存储数据与离线执行,特意在07年开发了一个浏览器来增强web应用 Goole Gears
在Gears API中,通过向LocalServer模块提交一个缓存文件清单来实现离线支持
5.2 Application Cache
让web应用离线使用的第二次尝试
在LocalServer的基础上进一步发展
缺点：不可编程,无法清理缓存,几乎没有路由机制

 ​   CACHE MANIFEST  ​  CACHE:  index.html  main.js 5.3 Service Worker介绍 让web应用离线使用的第三次尝试 可编程的Web Worker 像一个位于浏览器与网络之间的客户端代理,可以拦截、处理、响应流经的HTTP请求 配合Cache Storage API, 可以自由的管理HTTP请求文件粒度的缓存 是支撑PWA作为下一代web应用模型的最核心技术 是未来web客户端技术工程化的必争之地,带来离线优先的架构革命 5.4 Service Worker生命周期 01.png 5.5 Service Worker的安装  // sw.js  self.oninstall = (e) => {  e.waitUntil(  caches.open('installation').then(cache => cache.addAll([  './',  './styles.css',  './script.js'  ]))  )  } 5.6 Service Worker使用离线缓存  // sw.js  self.onfetch = (e) => {  const fetched = fetch(e.request)  const cached = caches.match(e.request)  e.respondWith(  fetched.catch(_ => cached)  )  } 5.7 Service Worker的缓存策略 02.png 6、Push Notification Push API的出现则让推送服务具备了向web应用推送消息的能力 Push API不依赖web应用与浏览器UI存活,所以即使是在web应用与浏览器未被用户打开的时候,也可以通过后台进程接受推送消息并调用Notification API向用户发送通知  // sw.js  self.addEventListener('push', event => {  event.waitUntil(  self.registration.showNotification('Hey!')  )  })  self.addEventListener('notificationclick', event => {  event.notification.close()  })  self.addEventListener('notificationclose', event => { 

})
7、PWA与原生APP的差异
03.png
8、PWA对web APP的影响
体验层面上逐渐向原生APP靠拢,离线可用,主屏图标入口,启动动画,基本上可以和原生APP的体验一致
开发模式的变革,Web开发的同时考虑离线模式和体验
App的安装更新机制带来运营方式的变化,url可达,应用间可链接,不仅仅依赖商场分发应用