2018-10-12 20:35:31 +00:00
|
|
|
|
---
|
|
|
|
|
|
title: Progressive Web Apps
|
|
|
|
|
|
localeTitle: 渐进式Web应用程序
|
|
|
|
|
|
---
|
|
|
|
|
|
## 渐进式Web应用程序
|
|
|
|
|
|
|
2019-01-20 05:52:45 +00:00
|
|
|
|
渐进式网络应用程序或“PWA”似乎不仅仅是一种时尚，而是用另一种不同的方式来处理网站，也可以查看任何平台上的内容。
|
2018-10-12 20:35:31 +00:00
|
|
|
|
|
|
|
|
|
|
PWA可以将部分自身安装到设备上以供离线查看，使用服务工作人员在连接可用时根据需要提供内容，最重要的是标准化移动和桌面设备之间的某些功能。
|
|
|
|
|
|
|
|
|
|
|
|
### 特征
|
|
|
|
|
|
|
|
|
|
|
|
PWA的具体功能包括：
|
|
|
|
|
|
|
|
|
|
|
|
* **响应**
|
|
|
|
|
|
* 适合任何形状因素
|
|
|
|
|
|
* **离线功能**
|
|
|
|
|
|
* 通过Service Workers逐步增强，让他们脱机工作
|
|
|
|
|
|
* **原生App感觉**
|
|
|
|
|
|
* 采用Shell＆Content应用程序模型来创建应用程序导航和交互
|
|
|
|
|
|
* **新鲜**
|
|
|
|
|
|
* 始终是最新的，感谢服务人员
|
|
|
|
|
|
* **安全**
|
|
|
|
|
|
* 通过TLS（服务工作者要求）提供服务以防止窥探
|
|
|
|
|
|
* **发现的**
|
|
|
|
|
|
* 由于W3C清单和服务工作者注册范围允许搜索引擎找到它们，因此可以识别为“应用程序”
|
|
|
|
|
|
* **引人入胜**
|
|
|
|
|
|
* 可以通过推送通知访问操作系统的重新参与UI
|
|
|
|
|
|
* **简易安装**
|
|
|
|
|
|
* 可以通过浏览器提供的提示添加到主屏幕，允许用户“保留”他们认为最有用的应用程序，而无需应用程序商店的麻烦
|
|
|
|
|
|
* **可链接**
|
|
|
|
|
|
* 这意味着它们零摩擦，零安装，易于共享
|
|
|
|
|
|
* URL的社交能力很重要
|
|
|
|
|
|
|
|
|
|
|
|
> 这些应用程序不是通过商店打包和部署的，它们只是采用了所有正确维生素的网站。 1
|
|
|
|
|
|
|
|
|
|
|
|
### 渐进式增强
|
|
|
|
|
|
|
|
|
|
|
|
渐进增强意味着每个人都可以在任何浏览器中访问页面的基本内容和功能，而没有某些浏览器功能的人可能会获得减少但仍然有效的体验。 [\- 灯塔](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced-b5ad7cf7a447) 2
|
|
|
|
|
|
|
|
|
|
|
|
[Aaron Gustafson的](http://alistapart.com/article/understandingprogressiveenhancement)一个很好的类比是渐进增强（PE）就像花生M＆M。
|
|
|
|
|
|
|
|
|
|
|
|
> “花生是你的内容，巧克力涂层是你的表现层，你的JavaScript是硬糖壳。”
|
|
|
|
|
|
|
|
|
|
|
|
这意味着取决于浏览器，体验可能会发生变化。
|
|
|
|
|
|
|
|
|
|
|
|
### 演示
|
|
|
|
|
|
|
|
|
|
|
|
### 参考
|
|
|
|
|
|
|
|
|
|
|
|
1. [拉塞尔，亚历克斯。 “渐进的网络应用程序：逃避标签而不会失去我们的灵魂”“不经常注意到”发布日期：2015年6月15日。](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/)
|
2019-01-20 05:52:45 +00:00
|
|
|
|
2. [渐进式网络应用程序 - Google Developers](https://developers.google.com/web/progressive-web-apps/)
|
