关于PWA落地问题的思考

原创 2017年03月29日 03:20:39

PWA是最近一个热门话题,很多开发同学都在尝试落地,其中也有些还在犹豫。这篇文章主要阐述对几个问题的看法,供大家参考。
注: 这不是一篇介绍PWA的文章。

简而言之(TL;DR):
 . PWA落地最大的纠结在于iOS支持的问题,且短时间难以得到改善。如果你的业务仅限于iOS,就不用再往下看了。
    . 事实上,PWA本身与其它技术方案并不冲突,比如各类的Web性能优化方案,以及基本的H5技术仍然可以落地共存,PWA只是在其之上进行更进一步。这正是其所谓渐进式命名的由来。
 . PWA正在拥有一个完善的技术体系,涉及五个层次,从Web平台,到各类工具。
 . 无论是从最近Web生态的发展,到未来应用开发技术的演进,再到实际开发落地和维护,PWA都代表了一个正确方向,值得投入。

iOS之痛是个伪命题

iOS中Safari内核支持一直是PWA绕不开的问题。2016年参加Google I/O时,与Chrome团队做了一次交流。他们明确表达了期望UC参与Chromium社区,越多人使用Chromium内核,Safari承受的压力就越大,就能促使其快速跟进Chrome提出的一系列新标准,其中的重点就是PWA方向。Safari团队虽然将Service Worker列入其五年计划,但并没松口开工。反观Microsoft Edge要积极的多。曾经打破浏览器格局的WebKit(Safari)已显然要成为移动时代的IE6了,主要着眼于其封闭的生态思考!

但是,iOS支持的问题不应该阻碍了PWA技术选型!原因是PWA是渐近增强式(Progressive)的技术,其核心是增强,而不是直接替代(比如没有替换某个H5特性,而是新增。),在不支持的场景下可以安全降级。以离线存储为例,AppCache实在太难用, 在没有支持Cache API的情况下可以使用Local Storage实现,如果支持了Cache API,就可以直接使用ServiceWorker+Cache来实现。在技术方案上,有一个基本的实现方案,是通用的。

在支持PWA相关标准的环境下,还可以进一步使用加强的技术方案。正如软件开发没有银弹一样,不能期望一个新技术可以解决所有问题。之前要解决的问题还是要继续分析解决,比如JS逻辑优化、图片压缩、CDN配置优化之类的工作,还是应当要一样展开的。

如果一定在iOS要使用到某些PWA特性带来的好处。可以考虑:

  • 评估使用Polyfill的可行性。直接到下面Polyfills那一节看下。
  • 实现一套在独立线程(类似于Service worker)运作的扩展机制,使用JS Bridge提供给页端使用。有一定的风险,可以提供主要特性的支持,比如Cache & Fetch。
  • 通过各种渠道(Mailing list, App Store, Twitter, etc.)向Safari吐槽。这条简单易行!

PWA === Servie Worker + Fetch + Cache?

初次进行PWA落地,我们往往会聚焦于几个抢眼的特性。从小步快走的角度来看这是正确的,但不能仅限于这一点,我们还需要更加系统了解PWA的技术体系。

从整个技术体系上看,分成五个层次:

  • PWA Features 通过标准定义,开放传播。易于各方理解和支持,特别是凝聚一些中间力量。因为Top的玩家也可以选择玩封闭的生态。
  • Web Platforms (各家浏览器及WebView) Web平台的支持,才能让PWA有应用的空间。特别是进一步与OS的结合,提高了Web应用与原生应用的竞争力,才能保证Web App能够成为应用开发的选项之一。从平台的角度思考,它一定会支持多种技术方案,更多的应用形式能帮助整个应用市场活跃起来。
  • 组件库及工具库(Polymer等) 开发最容易纠结在库、框架、组件的选择上,因为这是实实在在的痛点。有了进一步封装的库、组件、解决方案,无论具体什么形式,它必须要简化PWA的开发,是一个可以复用的技术方案,以降低开发成本和技术风险。
  • 工具及支撑平台 工具则包括开发调试、检测等可以提高开发效率的工具。支撑平台则是为这个生态提供基础服务的。
  • 设计思想和开发模式 在一个技术生态内,对实践的指导原则可以理解对最佳实践的抽象总结,可以帮助开发者更好理解这个生态面对的问题和解决的思路。最终它会影响到工具和组件,甚至是平台和Features。

Features不用多说,Web Platforms则是除了Safari之外的主流浏览器都有支持,只是Edge在支持的范围上有所差异。以下是工具和组件的构成:

最后特别需要提醒的是,落地过程也是一个持续学习和优化的过程。比如Polymer本身有一些性能优化策略,如果简单的使用可能会发现有性能上的降级,UC的同学也是在实践中积累了些经验。

工具库示例:sw-toolbox

工具库固化了一些常用的实现,以sw-toolbox为例,其核心是提供一组离线应用的策略机制,可以结合导航使用不同加载策略。详细的策略说明文档是: The Offline Cookbook, 其中总结并定义了在离线应用中涉及的五种加载策略。sw-toolbox对应定义如下的策略:

  • networkFirst
  • cacheFirst
  • fastest
  • cacheOnly
  • networkOnly
    其中fastest的策略是同步从Cache和网络中加载,使用先返回的数据。另外还可以指定超时时间等加载选项。超时选项(networkTimeoutSeconds)设置是需要考虑的,因为Chrome的网络请求没有默认的Timeout机制,UC则是自己做了实现。详细内容看它的API定义文档

整个使用非常简洁,下面是一个service worker的写法,使得进入offline/时仅从缓存加载:

// DEMO for sw-toolbox.
importScripts('sw-toolbox/sw-toolbox.js');

// Optional
toolbox.options.cache.name = 'sw-toolbox-cache';

toolbox.precache(['./caching.html', './offline/index.html']);

// Define different strategies as below:
toolbox.router.default = toolbox.fastest;
// Below router means to load data from cache only while navigating to offline.
toolbox.router.get('/offline/.*', toolbox.cacheOnly);

// For more details, please refer to SW-Toolbox API:
//    https://googlechrome.github.io/sw-toolbox/api.html

完整的例子可以访问这里PWA Demo

HTTPS还是HTTP2?

这里有一个清晰的技术链条:

  • PWA要求使用HTTPS。
  • HTTP2较HTTPS提供更高的性能表现。
    所以在考虑PWA落地,还要纠结下HTTPS和HTTP2。HTTPS本身会有一定的成本(证书、CPU等)和性能影响(首次明显),HTTP2则有更好的性能收益,但应用上有不同的Web优化策略,核心是多路复用和Server Push,使得之前的一些优化实践无效,甚至有负作用,比如内联资源,分散服务器等。可以简单参考Web 开发者的 HTTP/2 性能优化指南

除了自己的服务部署,还要涉及CDN的支持。正如之前HTTP Pipeline的支持,浏览器乐于支持,但实际测试数据却发现性能更差,原因就是大部分的服务器后台和CDN都没有支持。现在的情况是,目前国内的主要CDN可以支持HTTPS,如阿里云还支持了HTTP2。 长远来看一定是HTTP2,只是需要从业务本身出发,仔细评估下相关的风险和影响,绝非是后台做了支持就万事大吉了。

PWA特性支持不完整,怎么破?

PWA这个体系涉及的功能很多,也是逐渐在完善。Chrome本身迭代比较快,国内浏览器有一个较长的跟进周期。所以特性支持不全是比较容易遇到的问题。举个例子,饿了么团队在PWA实践中遇到了Fetch Redirect失败的问题,详情可以参考:PWA 在饿了么的实践经验。从页端或者后台还是比较容易处理的。

但是不是所有的问题都能这样解决,也会有必须内核进行支持的问题,这种情况下,浏览器是可以做部分升级的。如果你遇到了,欢迎随时和我们联系。

关于Polyfills

仅列几个给有需要的同学参考:

PWA的未来

PWA首先瞄准的是应用开发,以其官方定义,是为应用开发者提供多一个选择。所以会尽力缩小其与原生应用在能力上的差距。回头想到2012年前后那股也是Chrome推动的WebApp,最终不了了之。现在的PWA机会其实也就是H5的未来空间。

可以想象未来5年,应用开发的技术模式一定会有很大的变化。总体方向就是高动态性、低开发成本(包括了低风险), 产品形式上超级应用 (包括OS)和轻快的小型应用两极分化,前者越来越寡头,后者则占据绝大多数。

纵观现在App开发技术上的创新都是在这个方向上,包括RN, Weex, AMP(或者Instant Article), PWA, Android Instant App之类。无论Native容器、或者原生应用本身如何发展,产品对动态性的需求只会越来越高。而产品技术的复杂度也会越来越高,开发周期、变更成本、维护成本都有越来越高的要求。

Web的优势是开放的标准,一是持续改进,不断扩展和丰富,使其展现能力越来越强。二是技术清晰透明,易于理解和传播,有助于降低开发成本,包括风险。着眼于未来,不在于现在谁的市场占比提升速度,而在于哪方能更稳健地持续提供系统的支持,让生态更完整。

具体到内容展现,或者渲染技术上。虽然Web目前仍然有较大的性能问题,但它正通过自身的优化、以及提供原生扩展不断缩小差距。以UC实践的经验来看,除了内核演进外,前端对渲染性能的理解和优化也是同样关键的问题。可以参考Roger的对页端开发高性能(交互/动画) Mobile WebApp 的一些思考

再回到2016年底到现在3月份,Node.js的成熟推广,Weex/RN发力,再到小程序造的势(轻快),让页端承担应用+H5主力开发的模式越来越清晰。
再从Google对Web开发者的推崇(16年底的开发者大会)以及对业界的技术推广活动,到iOS AppStore的热修复门,一边推,一边收紧,所产生的不确定性反而让H5方向更为明确。


问题总是越辨越明,欢迎大家指正。

从PWA到WebAR,UC想让Web无所不能

移动互联网的发展变化,飞速而剧烈。曾几何时,APP似乎把Web打得节节败退,APP和一个个超级应用,成为了每个移动终端接入互联网的重要入口。然而新技术的不断涌现,又在给既有格局带来新的改变。  ...
  • ZabeNbRdit36243qNJX1
  • ZabeNbRdit36243qNJX1
  • 2017-10-16 00:00:00
  • 153

苹果加快支持PWA,毕竟不能忍小程序啊

苹果将在 iOS 11.3 和 macOS 10.13.4 版本上正式增加对 Service Worker 的支持,同时还支持了添加到桌面(Web App Manfiest)! 这意味着可以通过...
  • TripleS_X
  • TripleS_X
  • 2018-01-26 17:13:31
  • 420

苹果拒绝支持PWA,有损Web的未来

本文是美国的资深开发者 Greg Blass 针对对苹果公司的激烈吐槽
  • eyeofangel
  • eyeofangel
  • 2017-07-29 17:05:44
  • 1321

PWA(Progressive Web App)入门系列:(一)PWA简介

前言PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习。什么是PWAPWA全称Progressi...
  • lecepin
  • lecepin
  • 2017-03-22 15:46:41
  • 9113

关于PWA落地问题的思考

PWA是最近一个热门话题,很多开发同学都在尝试落地,其中也有些还在犹豫。这篇文章主要阐述对几个问题的看法,包括iOS支持的问题等,供大家参考。 注: 这不是一篇介绍PWA的文章。...
  • HorkyChen
  • HorkyChen
  • 2017-03-29 03:20:39
  • 6265

迁移Hexo博客到Google渐进式Web应用(PWA)

如果说通过TravisCI实现博客的自动化部署,是持续集成这个概念在工作以外的一种延伸,那么今天这篇文章想要和大家分享的,则是我自身寻求技术转型和突破的一种挣扎。前段时间Paul同我聊到Web技术的发...
  • qinyuanpei
  • qinyuanpei
  • 2017-11-19 14:14:45
  • 1083

2017进入前端的必备资料!!~~

先来个大概预览: 项目工程化 发展方向 职业环境 总结要掌握的框架/技能 小结放在前: 2017的前端与其说更残酷,不如说更规范化,前两年各种培训了几个月就出来随口开价上万,几万的新手将被市场淘汰。 ...
  • lijiajun95
  • lijiajun95
  • 2017-01-18 22:48:52
  • 3260

关于人工智能若干问题的思考

“凡是预先设定的都缺乏弹性亦不够全面,面对一场决斗必须要根据实际变化去决定下一步的行动“—李小龙1、前言人工智能是人类发展到一定阶段而必然产生的一门学问,她既包括人,也包括机和环境两部分,所以也可以说...
  • VucNdnrzk8iwX
  • VucNdnrzk8iwX
  • 2018-02-22 00:00:00
  • 174

对团队中“这是某某某的问题”引起的思考

在团队中,我有时会听到这样的话:这是某某某的问题,不是我的问题。 说这句话的时候,他至少忘记了他是团队中的一员,另外,也让我感觉得,这个团队肯定出了问题。 我刚入行的时候从一件事开始就对这样的话感到很...
  • I2Cbus
  • I2Cbus
  • 2014-04-17 22:15:19
  • 1018

关于区块链的一些思考

与区块链在传统行业火热的程度相比,互联网公司异常冷静,区块链到底能解决什么问题?我们该如何参与?我们一起探讨...
  • wangbaoxing
  • wangbaoxing
  • 2016-01-20 08:47:24
  • 2411
收藏助手
不良信息举报
您举报文章:关于PWA落地问题的思考
举报原因:
原因补充:

(最多只允许输入30个字)