# 渐进式 Web 应用（PWA）

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

## PWA应用

指那些使用指定技术和标准模式来开发的web应用，这将同时赋予它们web应用和原生应用的特性。

### 对比 App

* web应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享web应用。
* 原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行，并且相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

### 优势

可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。

* 减少应用安装后的加载时间, 多亏了 Service Workers来进行缓存, 以此来节省带宽和时间。
* 当应用有可用的更新时，可以仅仅去更新发生改变的那部分内容。与之相反，对于一个原生应用而言，即便是最微小的改动也需要强制用户去再次下载整个应用。
* 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上，应用可以全屏运行，等。
* 凭借系统通知和推送消息与用户保持连接，对用户产生更多的吸引力，并且提高转换效率。

### Service Worker 手册：(实例)

<https://serviceworke.rs/>

### 支持率

* <https://jakearchibald.github.io/isserviceworkerready/>
* <https://caniuse.com/#search=serviceworker>

### 在线生成 PWA

可以使用 PWABuilder 网站在线生成 PWA。

* [App Structure](https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/App_structure)
* [简单实例](https://mdn.github.io/pwa-examples/js13kpwa/)
* [Offline\_Service\_workers](https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Offline_Service_workers)

## 国内

* [饿了么](https://h5.ele.me/)：第一个支持PWA的
* [微博](https://m.weibo.cn/beta)：
* [哔哩哔哩](https://m.bilibili.com/)
* [豆瓣](https://m.douban.com/)：
* [飞猪](https://h5.m.taobao.com/trip/home-pwa/index.html)
* [天气（baidu）](https://weatherpwa.baidu.com/)：一个简单的APP
* [糯米电影·演出](https://mdianying.baidu.com/)
* [腾讯新闻](https://xw.qq.com/)
* [人人FED](https://fed.renren.com/)
* [基于 Vue 的 PWA 解决方案](https://lavas.baidu.com/)

## 国外

* [Wikipedia](https://en.m.wikipedia.org/wiki/Main_Page)
* [Twitter](https://mobile.twitter.com/home)
* [Google Contacts](https://contacts.google.com/)
* [Google Photos](https://photos.google.com/)
* [Google Plus](https://plus.google.com/)
* [The Weather Channel](https://weather.com/)
* [Telegram](https://web.telegram.org/)
* [Forbes](https://m.forbes.com/)
* [The Guardian](https://www.theguardian.com/)
* [FT](https://app.ft.com/)
* [DuckDuckGo](https://duckduckgo.com/)
* [Vice](https://www.vice.com/en_us)
* [Omni Calculator](https://www.omnicalculator.com/)
* [ET](https://m.economictimes.com/)