(翻译)为什么PWA是Web开发的未来

2,678 阅读4分钟

翻译自Tushar Agrawal的Why Progressive Web Apps Are The Future Of Web Development

最近,很多人都宣称PWA会成为Web开发的未来,尤其是移动设备。其核心就是,Progressive Web App (PWA) 就是使用现代web技术为用户提供类似原生APP体验的web应用。这些web程序具有渐进式增强功能,能够提供缓存,后台同步以及消息推送等功能。
尽管PWA已经被提出两年多了,但是反馈并没有那么强烈。少部分玩家已经采用了这种想法,但是大多数人并没有真正接受它。Chrome和Mozilla也许是测试你的PWA应用最好的浏览器,因为Apple还没有进入这个领域。

PWA-它真的那么好吗?

一方面,原生应用在大多数情况下都是毫无疑问的快速和敏捷。另一方面,一些网站访问缓慢并且连接问题越来越严重。 推特和谷歌在2016年实施的移动页面加速计划(AMP)只是解决链接缓慢的问题。而PWA在所有的场景下都可以完美的工作。在好的网络链接情况下,绝不会出现问题。问题是,在没有网络连接时,我们就会看到错误页面。

image
但是如果我们有一个很慢的网络连接,就会出现很多烦人的情况。页面似乎一直在加载,而我们看到的是一个空白的页面。我们只能等,一直等,但是页面似乎永远都不会加载完全。这就是PWA来拯救我们的地方。PWA最好的地方就是在网络缓慢链接以及没有连接的时候你可以获得最好的用户体验(是的,你没有看错...)。

为什么使用PWA是很好的选择

通过研究发现,平均一个用户80%的时间只花在有限的三个应用上(对我来说就是Chrome, Quora 和 Medium)。
其他的应用程序大部分时间都闲置在内存中。而且,开发一个原生应用要比开发一个相同的web应用多花10倍的时间。如果你要开发并维护基于不同平台的应用,比如安卓,IOS以及web,那要花费更多的成本。

PWA可以实现的一些原生应用特性

  • 消息推送
  • 全屏显示
  • 离线工作
  • 启动页有更加类似于原生应用的体验
    PWA能够使用更多的类似特性。以上几点只是用来说明PWA的一些能力。但是,还有一些传统的特性仍然只能在原生应用上体验到。

哪些特性是PWA无法实现的

  • 对不同硬件传感器的访问权限不高或限制严格
  • 闹钟
  • 通讯录访问
  • 修改系统设定
    PWA的发展非常快速,我们可以期待很快我们就可以在PWA上实现这些特性了。

PWA的两个主要部分

APP Manifest

它是一个用来定义应用图标的JSON文件,怎样安装应用(独立,全屏,在浏览器里等等。)以及其它相关信息。它位于您的应用程序的根目录中。每个页面都需要一个链接来呈现该文件。
将它添加在HTML文件的head部分:

<link rel=”manifest"href="/manifest.json">

Service Worker

Service Worker就是创在PWA神奇的原因。它只不过是JavaScript代码,充当可编程代理,负责拦截和响应网络请求。因为它只是充当一个代理,并且可以很容易的被修改,所以应用必须使用HTTPS请求以保证数据安全。
值得注意的是,service worker存储实际的响应,不只是响应数据,还包括HTTP响应头。这意味着您的应用程序可以简单地生成网络请求并处理响应,而无需任何特定的代码来处理缓存。

怎样开始构建一个PWA

好消息是开始构建一个PWA比你想象的要容易的多。事实上,以后现存的这些网站很有可能都要转为PWA模式。如果你打算开发PWA,我强烈建议大家看一下这个视频