PWA - 渐进式网络应用初认识

Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来，沉浸式的体验，改进web的性能低下等。是Google 在2015年提出，今年才推广开来。其宗旨是渐进增强，不再有媲美原生应用的想法，而是让 WebApp 变得更加对移动环境友好，体验自然顺滑。

目前移动web网页的体验

1. 手机桌面入口不够便捷； 当然现在可以添加到主屏幕
2. 没网络就没响应，不具备离线能力； 
3. 不像APP一样能进行消息推送。

PWA带来的新特性

Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. 
Connectivity independent - Service workers allow work offline, or on low quality networks.  可以离线，使用service worker技术，即使网页关闭，PWA 仍然可以在后台运行获取数据更新
App-like - Feel like an app to the user with app-style interactions and navigation.  
Fresh - Always up-to-date thanks to the service worker update process.  
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. 
Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.  可以推送消息
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.  可以添加到home屏幕
Linkable - Easily shared via a URL and do not require complex installation.  便于分享

浏览器支持情况

基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了，Firefox 和微软的 Edge 正在开发中，水果公司的 Safari 最近刚刚表达了可能会支持 PWA。从长久的角度看，只要 Google 不断推动一些网站往 PWA 转型，其他的浏览器或者竞争对手也就会自然跟风上船。

怎么实现？

实现 PWA 所需要的特性，主要是围绕着 Service Workers 的基于事件的 cache 系统和消息推送的一套新的 API，此外还需要定义 manifest.json 来定义安装行为或是样式等。

体验PWA

首先，将你的chrome升级到最新的55版本

1 合集

https://pwa.rocks/，这个网址有很多pwa应用。其中不乏 The Washington Post，Flip Board，AliExpress，Wikipedia，Gmail，Booking 这样的大头

2 阿里巴巴

http://m.alibaba.com

和Hybrid App的区别

Hybrid App虽然看上去是一个Native App，但只有一个UI WebView + Native的壳子，里面访问的是一个Web App。而PWA是真正的Web App。

和微信小程序的区别

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 37 内核来渲染的
在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的

小程序入口在微信里面，并不能添加到主屏幕，不能离线，不能推送。小程序的优势就是庞大的用户群，推广起来非常好。

总而言之，PWA是未来的趋势。

参考文章：

1. 我们真的需要网页版App吗？Google PWA的困局

2. https://github.com/hemanth/awesome-pwa#tutorials

3. https://developers.google.cn/web/progressive-web-apps/