什么是PWA？
PWA全称ProgressiveWebApp，直译是渐进式WEB应用，是Google在年提出，年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。
所谓的P（Progressive）这里有两层含义，一方面是渐进增强，让WEBAPP的体验和功能能够用渐进增强的方式来更接近原生APP的体验及功能；另一方面是指下一代WEB技术，PWA并不是描述一个技术，而是一些技术的合集。
PWA特性
渐进增强-能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则。响应式用户界面-适应任何环境：桌面电脑，智能手机，笔记本电脑，或者其他设备。不依赖网络连接-通过serviceworkers可以在离线或者网速极差的环境下工作。类原生应用-有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在appshellmodel上的。持续更新-受益于serviceworker的更新进程，应用能够始终保持更新。安全-通过HTTPS来提供服务来防止网络窥探，保证内容不被篡改。可发现-得益于WCmanifests元数据和serviceworker的登记，让搜索引擎能够找到web应用。再次访问-通过消息推送等特性让用户再次访问变得容易。可安装-允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。可连接性-通过URL可以轻松分享应用，不用复杂的安装即可运行。
PWA优、缺点
优点
上面提到的，所有这些现代Web特性。Web最重要的意义在于开放和去中心化，这才是万维网的初衷
缺点
门槛不低。部署的服务器要求HTTPS，ServiceWorker涉及API众多，需要单独学习浏览器支持不够全面。苹果Safari短时间内不会支持，5年计划里可能实施用户体验习惯。网页应用替代原生应用的方式，用户短时间内不适应
PWA关键技术
Manifest（应用清单）
WebAppManifest是一个WC规范，定义了一个基于JSON的清单，为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。manifest就是PWA概念的一环，它给你了控制你的应用如何出现在用户期待出现的地方（比如用户手机主屏幕），这直接影响到用户能启动什么，以及更重要的，用户如何启动它。
使用web应用程序清单，你的应用可以：
能够真实存在于用户主屏幕上在Android上能够全屏启动，不显示地址栏控制屏幕方向已获得最佳效果定义启动画面，为你的站点定义主题追踪你的应用是从主屏幕还是URL启动的
例如：
{"lang":"en","dir":"ltr","name":"DonateApp","description":"Thisapphelpsyoudonatetoworthycauses.","short_name":"Donate","icons":[{"src":"icon/lowres.webp","sizes":"64x64","type":"image/webp"},{"src":"icon/lowres.png","sizes":"64x64"},{"src":"icon/hd_hi","sizes":"18x18"}],"scope":"/racer/","start_url":"/racer/start.html","display":"fullscreen","orientation":"landscape","theme_color":"aliceblue","background_color":"red","serviceworker":{"src":"sw.js","scope":"/racer/","use_cache":false},"screenshots":[{"src":"screenshots/in-game-1x.jpg","sizes":"x","type":"image/jpeg"},{"src":"screenshots/in-game-x.jpg","sizes":"x90","type":"image/jpeg"}]}
ServiceWorkers
ServiceWorker是浏览器在后 立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。这个API之所以令人兴奋，是因为它可以支持离线体验，让开发者能够全面控制这一体验。
ServiceWorker是由两部分构成，一部分是cache，还有一部分则是Worker。
它被设计为一个相对底层、高度可编程、子概念众多，也因此异常灵活且强大的API，它就像一个位于客户端和网络之间的代理，可以拦截、处理、响应流经的网络请求，配合CacheAPI，你可以自由管理网络请求文件的缓存，这使得ServiceWorker可以从缓存中向web应用提供资源，即使是在离线的环境下。这样，在离线和网速低的情况下也能秒开，说白了，之前的Hybrid架构的出现不就是为了这个功能么。之前虽然有AppCache，但它具有相当多的缺陷，这里就不说了。
PushNotification（推送通知）
Push和Notification是两个不同的功能，涉及到两个API，但是它们之前有依赖关系。
Notification这块应该大家多少了解一些，属于浏览器发出的通知消息，之前需要浏览器一直开着才能实现这种通知，但是现在有了上面提到的ServiceWorker，就可以驻留在进程里面操作了。
PushNotification关系：
Push:服务器端将更新的信息传递给ServiceWorkerNotification:ServiceWorker将更新的信息推送给用户
PWA与其它App的对比
目前的移动端APP：
NativeAPPWebAppHybridApp
NativeAPP
NativeAPP，指原生App，是一个完整的App，可拓展性强，需要用户下载安装使用。
优点：
可使用移动设备所有功能速度快、性能高、用户体验好离线使用
缺点：
开发成本高、维护成本高每个不通的平台都要重新开发应用商店审核复杂，效率低
WebAPP
WebApp指采用Html5语言写出的App，生活在浏览器里的应用，不需要下载安装。
优点：
跨平台开发、无需下载、无需安装,开发速度快发布灵活，因为根本不需要应用商店的审核较低的开发成本可即时上线用户可以直接使用最新版本支持设备广泛
缺点：
只能使用有限的移动设备API浏览器兼容问题无法上传到应用商店用户暂时不适用
HybridApp
HybridAPP指的是半原生半Web的混合类App，需要下载安装。
优点：
兼容多平台Web前端工作人员就可快速构建可以上传到应用商店可以基于浏览器的方式进行页面调试可使用的移动设备的API多
缺点：
用户体验不如原生应用为模拟原生样式，需要大量的html和css性能稍慢技术不是很成熟
PWA兼容性
Blink内核（Chrome、Oprea、SamsungInternet等）和Gecko内核（Firefox）和MicrosoftEdge都已经实现了PWA所需的所有关键技术的支持，但IOS的Safari（Webkit），目前不支持PWA的API。
不过在年Webkit的5年计划里面，已经提及了ServiceWorker，相信很快就能实现。
PWA在中国
国在IPhone不在少数，而IOS目前是不支持PWA的国内Android系统，大部分早已把Google框架移除了，所以兼容性会出问题推送依赖于GCM，而国内Google是无法访问的
Google的技术在国内推进是很痛苦的，Android虽然近年来在国内不错，但PWA在国内的发展有很多困难。
PWA的未来
总的来说，PWA还是很不错的，虽然PWA在国内的体验目前有一些限制，但相信PWA在国内的春天肯定会来的。
WA关键技术Manifest
前言
前面说过，让WebApp能够达到NativeApp外观体验的主要实现技术就是PWA中的manifest技术，本章会详细说明manifest的实现，及各个参数的具体含义，还将了解如何定义WebApp的启动图标、启动样式等。
简介
manifest是一种简单的json数据风格的配置文件，通过对其相应的属性进行配置，才实现相应的功能，这里可以称manifest为WEB应用清单。WEB应用清单可以实现自定义启动画面、打开URL、设置界面颜色、设置桌面图标等等。
大概就是下面这样：
{"short_name":"短名称","name":"这是一个完整名称","icons":[{"src":"x.png","type":"image/png","sizes":"x"}],"background_color":"#f","display":"standalone","start_url":"index.html"}
部署到浏览器
好么manifest.js如何让浏览器去执行呢？只需要用link标记引用即可：
linkrel="manifest"href="manifest.js"
目前各大浏览器对manifest的支持程度：
成员
下面对manifest涉及到的各个属性详细说一下。
name
name:{string}，用来描述应用的名称，会显示在各类提示的标题位置和启动画面中。
short_name
short_name:{string}，用来描述应用的短名字。当应用的名字过长，在桌面图标上无法全部显示时，会用short_name中定义的来显示。
start_url
start_url:{string}，用来描述当用户从设备的主屏幕点击图标进入时，出现的第一个画面。
如果设置为空字符串，则会以manifest.js的地址做为URL如果设置的URL打开失败，则和正常显示的网页打开错误的样式一下（可以通过后面讲的ServiceWorker改善）如果设置的URL与当前的项目不在一个域下，也不能正常显示start_url必须在scope的作用域范围内如果start_url是相对地址，那么根路径基于manifest的路径如果start_url为绝对地址，则该地址将永远以/作为根路径
scope
scope:{string}，用来设置manifest对于网站的作用范围。下面列一下，scope的作用范围及对start_url的影响：
icons
icons:{Array.ImageObject}，用来设置WebApp的图标集合。
ImageObject包含属性：
src:{string}，图标的地址type{string}，图标的mime类型，可以不填写。这个字段会让浏览器不使用定义类型外的图标sizes{string}，图标的大小，用来表示widthxheight，单位为px，如果图标要适配多个尺寸，则第个尺寸间用空格分割，如1x14xx。
sizes适配规则：
在PWA添加到桌面的时候，浏览器会适配最合适尺寸的图标。浏览器首先会去找与显示密度相匹配且尺寸调整到48dp屏幕密度的图标，例如它会在倍像素的设备上使用96px，在倍像素的设备上使用px。。如果没有找到任何符合的图标，则会查找与设备特性匹配度最高的图标。如果匹配到的图标路径错误，将会显示浏览器默认icon。
需要注意的是，图标中必须要有一张尺寸为x的，图标的mime类型为image/png的。
background_color
background_color:{Color}，值为CSS的颜色值，用来设置WebApp启动画面的背景颜色。
可以像正常写CSS颜色那样定义：
//完整色值"background_color":"#ff"//缩写"background_color":"#00f"//预设色值"background_color":"yellow"//rgb"background_color":"rgb(0,55,55)"//transparent背景色显示为黑色"background_color":"transparent"
其他的定义rgba、hsl、hsla等颜色定义方式浏览器不支持，未设置时，背景色均显示白色。
theme_color
theme_color:{Color}，定义和background_color一样的CSS颜色值，用于显示WebApp的主题色，显示在banner位置。
display
display:{string}，用来指定WebApp从主屏幕点击启动后的显示类型
显示类型描述降级显示类型fullscreen应用的显示界面将占满整个屏幕standalonestandalone浏览器相关UI（如导航栏、工具栏等）将会被隐藏minimal-uiminimal-ui显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同browserbrowser浏览器模式，与普通网页在浏览器中打开的显示一致(None)
对于不同的显示样式，可以通过CSS的媒体查询进行设置：
mediaalland(display-mode:fullscreen){div{padding:0;}}
mediaalland(display-mode:standalone){div{padding:1px;}}mediaalland(display-mode:minimal-ui){div{padding:px;}}mediaalland(display-mode:browser){div{padding:px;}}orientation
orientation:{string}，WebApp的在屏幕上的显示方向。
landscape-primary，当视窗宽度大于高度时，当前应用处于“横屏”状态landscape-secondary，landscape-primary的°方向landscape，根据屏幕的方向，自动横屏幕°切换portrait-primary，当视窗宽度小于高度时，当前应用处于“竖屏”状态portrait-secondary，portrait-primary的°方向portrait，根据屏幕方向，自动竖屏°切换natural，根据不同平台的规则，显示为当前平台的0°方向any，任意方向切换
dir
dir:{string}，设置文字的显示方向。
ltr，文本显示方向，左到右rtl，文本显示方向，右到左auto，根据系统的方向显示
related_applications
related_applications:{Array.AppInfo}，用于定义对应的原生应用，类似应用安装横幅的形式去推广、引流。
AppInfo结构：
platform:{string}，应用平台id:{string}应用id
如安卓可以这么定义：
"related_applications":[{"platform":"play","id":"