作者|汪志成 Angular 谷歌开发技术专家(GDE) 搜索加关注Google官方微信公众号:谷歌开发者。与谷歌一起创造未来! 被微信小程序刷屏了?来看看 PWA 吧,它们之间有千丝万缕的联系 作为一个程序员,你这两天的朋友圈被微信小应用刷屏了吧?想试了吧?没拿到邀请吧?没关系,我来帮你! 当然,我没法帮你拿到邀请码 —— 因为我也没有。不过,别失望,我今天要跟大家谈一项比微信小程序更宏观的概念 —— Google 提出的 PWA。 1. PWA是什么? PWA 全称是 Progressive Web Apps ,译成中文就是渐进式应用。这是 Google 在 2015 年 6 月 15 日提出的概念,参见 Alex Russell 写的: https:///2015/06/progressive-apps-escaping-tabs-without-losing-our-soul 那么,什么是渐进式应用呢?Alex 写道:在昨天的晚餐上,我和 Frances 列举出了新型应用的几个特征:
2. PWA 怎么用? 一个 PWA 的使用过程大概是这样的: 1) 这货开始就是一个普通网页: 2) 然后,右下角这是什么鬼? 3) 这网站看着还不错,那就接受吧! 4) 它出现在手机的首屏了,以后随叫随到! 5) 点了就能像一个本地应用那样启动它: 6)看,启动完也跟一个本地应用没有区别: 3. PWA 的好处 Web 应用(网页)和本地应用(App)各有优势,比如:
那么,它们能否合二为一呢?这就是 PWA 所做的事! 通过前面提到的这些步骤,PWA 可以让用户同时获得这两种好处。这无论对于用户本身还是对于应用的开发者都非常有意义。 4. 如何实现 PWA? 其实从 Alex 的描述中就可以看到,在技术上我们离实现 PWA 并不远: 1)Web 应用开发技术 已经具备。 特别是得益于 Angular 等 SPA 应用的普及,SPA 不但响应更加快速,更加接近原生应用的操作体验,而且让我们可以完全不依赖服务器工作了。 2)离线存储技术 有人可能还记得一项叫 AppCache 的技术,它已经废弃了,现在由 Service Worker 所取代。这是一个更强大的 AppCache,它不仅能存储 HTML/JS 等静态文件,而且还让你能够在客户设备上运行起一个仿真的超轻量级 Web 服务器,你在里面已经几乎可以写 Node 程序了! 这是新的 H5 标准的一部分,而不是 PWA 特有的。 3)推送通知 H5 标准中已经有了用来推送通知的 API(用过 Web Gmail 的话应该见过),现在只要把它和操作系统的 API 对接就行了。当然,这最好由操作系统提供支持,这已经实现了,那就是新推出的 Android 7。 4)App 壳程序 这个壳程序其实自己来实现也没问题,技术上没啥难度,不过不用重复造轮子了,因为官方已经出了一个,参见: https://github.com/GoogleChrome/application-shell 如果用 Angular 2 就更幸福了,因为 Angular 2 还制作了一个 Angular 2 专用的壳: https://github.com/angular/mobile-toolkit 不过,它现在还处于未发布状态,早鸟可以开始提前尝试了。 最后,假如你没有拿到微信小程序的邀请码,不妨像我一样,先从研究 PWA 开始吧。 相关文章: 9.22 Google Doodle: 2016 年春分( 南半球) |
|