[TOC] # Progressive Web Apps 一种新的方式为web提供极其惊人的用户体验。 PWA应用的超前的体验方式已经可以开始使用，这是它的优点。 * 极其可靠的：PWA应用 拥有极其快速的载入速度，即便是在离线无网络的环境下也不会出现网络异常。 * 它的响应非常的迅速并且拥有丝滑流畅的动画，绝对不会出现异常卡顿滑动。 * 你会感觉就像在使用一个原生应用，并且拥有它会提供给你沉浸式的用户体验。 最新的特性允许你在桌面创建一个PWA应用的图标。 ## 可靠性 当你从桌面点击PWA应用的时候，PWA服务会非常快速加载PWA应用，无视网络环境。 PWA服务就像一个代理客户端，它由JavaScript写成，并且可以让你控制缓存和如何响应资源的请求，并且PWA应用通过预缓存即预先加载缓存资源让用户不必依靠网络就可以打开PWA应用，确保了可靠的即时的应用体验。 [关于Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/)  ## 快速 如果一个网站加载甚至需要3秒，那么53%的用户都会抛弃它。当用户一旦点击开启即时app，用户希望它的开启是快速的，没有延迟，没有异常滑动和慢响应。 [了解更多](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)  ## 参与性 PWA应用可被添加在用户的桌面上，不需要应用商店，通过PWA应用的配置文件可以为用户提供全屏沉浸的体验，甚至可以通过网络发起通知重新吸引用户。 配置文件允许你控制你的PWA应用怎么被显示和启动，你可以把它放在桌面上，并且可以改变他的图标移动它的位置，指定应用在启动时启动哪个界面，屏幕方向，甚至是显示或者不显示chrome浏览器。 [web-app-manifest](https://developers.google.com/web/fundamentals/web-app-manifest/) [Web Push Notifications](https://developers.google.com/web/fundamentals/push-notifications/) ## 为什么要开发一个PWA应用 开发一个PWA应用是非常有帮助的，可以提高你的用户的使用愉悦读，增加用户参与度并且提高用户转化率。 * [呈现在用户桌面上](https://developers.google.com/web/fundamentals/app-install-banners/) 当你的PWA应用符合PWA标准时，chrome会提示用户将其放在桌面上。 * [无论什么情况的网络下，PWA应用都可以可靠的工作](https://developers.google.com/web/progressive-web-apps/) 开发人员使Konga(一个购物网站)在初始化页面的时候使数据加载量减少了63%，第一次响应用户操作的数据量也减少了84%。 * [增加用户的参与度](https://developers.google.com/web/showcase/2016/extra) 基于的web通知推送方式帮助eXtra Electronics (同样是购物网站)他们的用户在这个网站增加了4倍的参与度，并且这些用户在这个网站停留了比以往两倍的时间。 * [提高用户转化](https://developers.google.com/web/showcase/2016/aliexpress) PWA应用得天独厚的体验方式帮助AliExpress将第一次浏览这个网站的新用户的转化次数提高了104%，在IOS端转化次数提高了82%。 ## Lighthouse 这是一个开源的自动化工具，并且他可以帮助你提高的应用质量，你甚至将它集成到你的应用里，来抓取用户使用用遇到的问题。  [了解更多](https://developers.google.com/web/tools/lighthouse/) ## 深入研究 ### [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist) 这份清单打破了我们认为成为Progressive Web App所需的所有事情。 ### [转到HTTPS](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) 必须从安全的来源提供渐进式Web应用程序。 ### [防止混合内容](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content) 查找和防止混合内容对于确保安全起源至关重要。 ### [App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners) Chrome使用一组条件和访问频率启发式来确定何时显示横幅广告。 ### [Lighthouse](https://developers.google.com/web/tools/lighthouse/) Lighthouse是一种开源的自动化工具，用于提高Web应用程序的质量。 ### [得到支持](http://stackoverflow.com/questions/tagged/progressive-web-apps) 在Stack Overflow上回答您的问题。 ## 参考资料 [Progressive Web Apps | Web | Google Developers](https://developers.google.com/web/progressive-web-apps/) [谷歌Progressive Web Apps官方文档翻译](https://www.jianshu.com/p/4e9d14fcb9de)