pwa技术分析

PWA是什么？

PWA的含义

1.       PWA（ProgressiveWeb Apps）：渐进式应用；

2.       google于2016年推出；

3.       webapp，但是功能和性能上可以媲美nativeapp，有三个主要特点：可靠、快速、沉浸式体验；

4.       PWA是一系列规范+技术的集合；

PWA能实现的功能

l   功能点：

1.       离线缓存：使其能在离线状态下访问缓存过的页面，消除了webapp首次访问白屏的问题；

2.       添加到主屏：能升级成native app，和na一样被添加到桌面上；

   

图 1

3.       全屏展现：webapp在浏览器中无法全屏展现，有浏览器的容器标记，当升级成na后，能够全屏展现；

example：

https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/images/background-color.gif

4.       推送和通知：普通webapp是单向访问的，na能够通过推送和通知将用户重新拉回到app上，pwa也提供了同样的能力，使其在形态上更接近na；

图 2

example：

https://developers.google.com/web/updates/images/2015-03-04-push-on-the-open-web/push-message.gif

 

 

l   性能：

PWA提供了对网页进行性能优化的一些方法和工具：

1)     方法

1.       优化内容效率：目的是优化每个字节数据的交付[1]；

2.       优化关键呈现路径：目标是优先显示与用户要在网页上执行的主要操作有关的内容[2]；

3.       提高渲染性能：保证web应用是可交互且运行流畅的[3]；

2)     工具[4]：

1.       chrome浏览器的开发者工具：可以模拟各种网络条件，以便观察app在低带宽和高延时情况下的表现

2.       mac的系统工具networklink conditioner：功能同1

3.       android 模拟器：允许仿真android环境下的网络条件iphone的模拟方法同2

4.       实测性能的工具：

测试不同地区和网络条件下的网页性能：webpagetest、fiddler

测试受限网络条件下的网页性能：facebook的ATC、charles

关键技术

service worker：

W3C的规范[5]

作用：

service worker在使webapp具备native app独有的能力发挥了重要的作用；

能力：

1.       离线缓存

2.       后台更新[6]：backgroundsync：用户在离线状态下发起的网络请求可以等待到有网络时再发送，不影响用户离线的体验

3.       推送通知

4.       后期可能增加地理信息功能

5.       最主要的功能是能控制网络请求

技术实现：

1.       语言：js

2.       关键技术：

JavaScript worker[7]：可在后台执行的任务，不能直接操作dom，使用postmessage和页面用message进行通信；

Promise：JavaScript的异步解决方案[8]，属于js的标准库。能够把js的异步执行用同步的编码方式进行；

可编程的网络代理：可以控制网络请求，包括截取和发送

3.       生命周期：存在于页面打开期间，页面关闭后service worker也关闭，如果要使用全局状态，需要配合indexedDB API[9]

图 3

运行环境：

浏览器

限制：

1.       chrome、opera、firefox、microsoftedge浏览器在开发中，safari将对service worker的支持安排在5年规划中[10]

2.       使用HTTPS

例子：

serviceWorkerRegistration.showNotification(title,options);//推送

{