BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

百度搜索对PWA的探索和初步实践

| 作者 沈洲 关注 0 他的粉丝 发布于 2017年4月28日. 估计阅读时间: 15 分钟 | AICon 关注机器学习、计算机视觉、NLP、自动驾驶等20+AI热点技术和最新落地成功案例。

本文是百度搜索资深Web前端工程师沈洲在前端之巅微信群中的分享整理总结而成。

一、什么是PWA

1.PWA的概念

PWA的全称为:Progressive Web Apps(渐进式Web Apps),是Google提出的,可以带来突破性体验的Web应用。

2.PWA的特征

Google所阐述的PWA主要特性为:Reliable(可依赖)、Fast(快)和Engaging(有粘性的)。

就我个人理解,PWA与传统的Web比,主要是多了下面几个关键特性:

(1)离线可用;

(2)主屏图标;

(3)启动动画;

(4)通知。

同时,这里要强调一下渐进增强(Progressive),这也是我们最容易忽略的地方。也就是说,PWA不是0或者1,而是渐进增强——我们可以用PWA涉及到的技术,逐步改善移动Web的体验,而不是说做了什么,才是真正的PWA。

3.PWA的关键技术

PWA涉及到的关键技术是:

(1)    Service Workers

(2)    Add to home screen:manifest

(3)    Web push notificatikons

接下来会在我们的专栏里讲到Service Workers和add to home screen,由于受限网络环境,现在没有办法来做和演示Web push notifications。为了让大家直观体验一个入门的PWA应用的感受,首先请看一段我们做的一个PWA的视频:

也可以扫码访问(设备要求:Chrome for Android 56+):

二、PWA开发背景

1.背景

手机移动互联网的兴起,使得App占据了大家在互联上的部分时间。大家会通过移动App来满足自己日常的需求,所以移动互联网的入口不再是单一的浏览器,而是从手机桌面可以直达的App。

但是,移动原生的App是把双刃剑,它也有着其缺点:

(1)打开率低:90%的用户打开的App不会超过10个;

(2)安装麻烦:移动App引导安装非常麻烦;

(3)信息孤立:App之间很难信息打通。

而大部分用户的80%时间,都给了不超过3个的超级App

2.PWA和原生App的差异

我们来从一些特性上,对PWA和原生App进行对比,如下表所示。

3.PWA对Web App的影响

总结一下,PWA的对于Web App带来的影响:

(1)体验层面向原生App靠拢:离线可用,主屏图标入口,启动动画,基本上可以和原生 App的体验一致;

(2)开发模式的变革:Web开发同时考虑离线模式和体验;

(3)App的安装更新机制带来运营方式的变化:url可达,应用间可链接,不仅仅依赖商场分发应用。

三、PWA开发步骤

这里以我们开发的百度天气为例,来阐述PWA开发过程中的关键步骤。

1.基本功能介绍

“百度天气”既是一个 PWA 的应用,也是一个普通的 Web 页面。在利用PWA提供的特性之前,首先需要在普通的 Web 页面上实现天气相关功能。主要包括:定位当前城市、获取城市天气、切换城市,这部分的具体业务实现不再赘述,我们下文主要介绍 PWA 相关特性的开发过程。

2.页面代理:Service Worker

百度天气的 Service Worker 位于 /sw.bundle.js,使用这一路径即可在navigator.serviceWorker上加以注册,此时 Service Worker 的install 事件会被立即触发。注册代码如下:

下次用户访问百度天气时,上述注册的 Service Worker 会被激活,Service Worker的activate 事件被触发。此后Service Worker就可以截获页面请求来应用缓存策略了。在 Service Worker 被激活时,会更新缓存以移除旧版本的百度天气资源:

Service Worker 通过 fetch 事件可以截获来自天气页面的网络请求,这些请求包括页面脚本、图片、字体,以及获取天气数据的 AJAX。我们对这些请求应用不同的缓存策略:

上述代码片段遵循的标准:https://www.w3.org/TR/service-workers/ (Working Draft)

这些功能的浏览器兼容性:Android Browser 53+,Opera Mobile 37,Chrome for Android 56,Samsung Internet 4+,QQ Browser 1.2文件:sw-register.png,sw-activate.png,sw-fetch.png

3.缓存策略:fetch

在 Service Worker 实现的缓存策略中,Fetch API 用来发送真正的网络请求。因为可以使用 JavaScript API 管理缓存,所以可以实现很灵活的缓存策略。比如缓存优先——首先查看缓存,当缓存失效时再去访问网络。这一策略适用于资源文件,如字体、样式、图片等。百度天气的背景图片(根据天气不同而不同)、样式表、页面脚本都采用这一策略。其流程图如下:

Service Worker 的 API 都采用 Promise风格的异步接口,因此上述流程并不复杂:

网络优先:首先查看网络,当网络失败时应用本地缓存。这一策略适合实时数据,比如获取天气信息的 AJAX 请求。这样每次页面刷新都可以获得最新的天气信息,当离线时会降级到使用本地缓存。并给出离线的提示。

先缓存后网络:对于实时性要求不高的数据,还可以先使用缓存更新页面,再去触发网络请求。这需要页面脚本中使用 Caches API 和 Fetch API,存在兼容性问题。(百度天气中没有使用该策略)。

上述代码片段遵循的标准:https://fetch.spec.whatwg.org/(Living Standard)

这些功能的浏览器兼容性:Android Browser 53+,Opera Mobile 37+,Chrome for Android 56+,QQ Browser 1.2+

上述图片参考:https://jakearchibald.com/2014/offline-cookbook/

4.应用清单:Manifest

Web App Manifest只需作为一个普通的 link 标签引入到HTML页面中。可实现的PWA特性包括: App Install Banner,桌面图标和文字,以及启动页面的 UI 元素。

应用清单遵循的标准:https://www.w3.org/TR/appmanifest/(Working Draft)

该特性的浏览器兼容性:Chrome for Android 56+,Samsung Internet 4+,Opera Mobile 37+,QQ Browser 1.2+

文件:manifest.png, 1.png, 2.png, 3.png

四、PWA开发总结1.Service Worker

开发过程中,主要技术点就是Service Worker,所以在此做一下Service Worker方面的总结,分为两方面:注册Service Worker、更新Service Worker。

注册 Service Worker

Service Worker 脚本与页面脚本的执行上下文不同,在百度天气的开发过程中,注册阶段遇到的一些关键点有:

  • 需要 HTTPS 或者安全的域(比如 localhost)。
  • Service Worker 所在文件本身的路径不得低于其注册的 scope(默认为当前路径)。
  • Fetch API 可能不太相同(比如缺少 match 方法),可以通过引入一些 polyfill 来解决。

更新 Service Worker

默认情况下 SW 更新周期为不多于24小时,由浏览器自行更新。因此调试时需要额外的工具来及时更新百度天气:

  • Chrome 调试:可在 Chrome 调试中勾选Update on Reload。
  • 移动端调试:可增加一些调试用功能,比如点10下天气更新日期,即可更新 Service Worker。

2.关于存储

HTML5 Application Cache 被 W3C 废弃以后,客户端 JavaScript 存储大概有三种选择:IndexDB、LocalStorage、Caches API。其中, LocalStorage 大多实现都是同步接口,只适合存少量数据;IndexDB 适合存储需要检索的大量;百度天气选用 Caches API,其接口较为简单易用,况且它是 Service Worker 标准中特意给出的离线缓存 API。

关于 cache 大小:最大存储配额并未标准化,但实现上通常以 Origin 来管理(而非 API),大多浏览器都不小于 50MB,这一配额远大于百度天气的缓存资源大小(<1M)。

关于缓存配额更详细的讨论请点击。

五、PWA的未来

对任何新技术未来的判定,都不可能一概而论。但PWA的出现,的确为现有的Web增加了很多令人鼓舞的特性,同时也带来了很多挑战,比如:

(1)规范标准的确立:一些特新还都是草案,还会有变更;

(2)终端环境的支持:目前国内浏览器和操作系统厂商不支持;

(3)开发模式变革。

但是,在我们做的PWA的实例中,基于PWA的Web也拥有了接近原生App一样的体验,因此我们有理由认为PWA会为当前的Web体验带来一次用户体验上的革命。

同时,因为PWA对于支持上的问题,对于这些用户体验上的提升的落实,百度搜索也会极其的推动PWA在国内Web站点的真正落地,为Web体验的优化做应该做的事情。

例如,我们很快会在自己厂牌App使用的浏览器内核(安卓)中支持ServiceWorker,也会进行持续的探索iOS的实现可能性,为Web站点的开发者提供更多可用的真实案例和可复用的操作方法。

关于开发模式的方面的摸索,我们后续会把我们一些PWA相关的开发经验、工具集等逐步总结发布给大家,我们将会长期推动和跟进PWA。

QA环节

淀粉:如何添加到桌面?

沈洲:对于开发者来说,通过manifest来实现添加桌面,对于用户来说,需要浏览器原生支持。

淀粉:老师您好,PWA和微信小程序的本质区别该如何界定?

沈洲:PWA是Web,开发的,可链接的,可索引的;小程序是微信的。

淀粉:现在的浏览器环境,有多少比例支持?

沈洲:在国内目前很少,Android的Chrome支持,但是百度会尽快支持。

淀粉:PWA是除了谷歌在推动,在业界浏览器商中接受度如何?

沈洲:据我们所知,国内好多厂商包括百度都有相关计划。

淀粉:PWA 是不是只应用于安卓?iOS 上是怎样的情况呢?谢谢。

沈洲:iOS目前5年计划中提到,目前暂不明确具体计划。

淀粉:PWA技术能否用在PC端,并响应式适配移动端?

沈洲:PC的Chrome是支持的,这项技术是Web的,不分PC和Mobile,只看浏览器支持力度。

淀粉:请问沈老师,当用户清除系统缓存或浏览器缓存时,PWA应用会出现什么情况?谢谢。

沈洲:会被清除掉,缓存和域名相关,但是桌面图标还在。

淀粉:以后Web 站点都是这样的形式吗?原来的 Web 站点还存在吗?

沈洲:PWA不是0或1,PWA是渐进式的,在原有基础上增强。

淀粉:PWA的出现会不会引起搜索引擎算法大的变动?会不会增加爬虫抓取页面内容的难度?

沈洲:百度对于用户体验好的站点,一直都在更青睐,PWA是索引抓取更友好的。

淀粉:您好,请问PWA的标准,是有谁来制定的?

沈洲:PWA是W3C的一系列的标准,所有的厂商实现都会遵循W3C规范。

淀粉:如何在开发过程中预览调试?

沈洲:Chrome有原生很好的debug工具。

嘉宾简介

沈洲,百度网页搜索部资深Web前端工程师,负责PWA和百度搜索结合与落地。沈洲于2008年加入百度,先后担任图片搜索Web前端技术负责人,视频搜索Web前端技术负责人。自2011年起,加入网页搜索部Web前端团队,担任技术负责人。先后负责百度搜索Web前端渲染架构、百度搜索前端速度、百度搜索生态调研、百度搜索用户行为日志专题等工作。自2015年底起,负责百度搜索前端极速浏览框架和移动网页加速器工作,目前极速浏览框架覆盖的点出PV已经过亿,移动网页加速器覆盖的量已经过千万。


感谢王俊杰对本文的策划,韩婷对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT