但这种跨平台的优势，没有在原生应用（Applications）这一关键的领域充分发挥作用。如果你要开发一款应用，仍然需要考虑可能涉及到的平台，并为每个主要平台开发一个单独的版本。

由此我们产生一个疑问，为什么Web的跨平台能力只存在于网页中？为什么不能把这种能力应用到软件开发中呢？如果我们开发一次，就可以在所有平台上使用，将会大幅提升开发效率。

早期应用的实践都是为了同样的课题：如何用Web技术来开发原生应用，如Electron、Cordova、React Native。PWA则更进一步：直接用Web技术本身实现原生应用的体验。

·  在任何设备上都能运行；

·  能快速打开、使用且可安装；

·  能在浏览器中打开并支持桌面快捷方式启动；

·  拥有独立窗口；

·  支持离线工作；

·  与系统功能集成；

·  良好的性能

PWA技术用来解决以上问题，实现让Web“摆脱”浏览器，拥有原生应用的使用体验和性能，从而真正实现跨全平台的应用。

在移动端为主的时代，用户倾向使用原生应用，因为Web在以下几个关键点上与原生应用仍有差距：

·  高质量UI：原生应用有更高质量的UI界面，交互更符合移动设备的使用方式。

·  程序入口图标：这是原生应用最主要的优势，移动设备打字不便，用户都喜欢从桌面图标点击进入，通过web访问操作过于繁琐。

·  系统集成：原生应用和系统匹配，可以利用很多附属功能（通知、分享、设置等等）。

有了PWA技术后，Web应用可以安装到桌面，拥有自己的固定入口，并且可以调用很多系统功能，实现原生应用的体验。开发者可以通过一套代码的开发，实现全平台的适配（现已支持IOS系统）：

PWA 之所以能实现原生应用的体验，不是靠某一项特定的技术，而是通过一系列新技术的应用，使得Web开发在安全、性能和体验三个方面得到明显提升。PWA 本质上是 Web App，但兼具了 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点：

·  可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现，并且可以实现离线使用

·  快速 - 快速响应，用平滑的动画响应用户的操作

·  沉浸式体验 - 媲美设备上的原生应用，沉浸式的用户体验，还可以添加到桌面

PWA 强调渐进式：不要求一次性达到安全、性能和体验上的所有要求。用户即使不安装，也能在浏览器中顺畅访问该Web App的内容。因此，开发者也可以逐步改进自己的PWA项目，陆续添加更多功能。

·  可靠和快速，意味着在网络不稳定甚至没有网络时，依然可以给用户提供较为良好的使用体验，并且确保较好的性能。为了实现上述目标，PWA使用了一项新的技术：Service Worker，这项技术可以实现前端直接处理网络请求，起到类似于中转服务器的作用，同时由于Service Worker是独立线程，执行过程对于页面性能影响很小，可以同时保障主线程的流畅执行。

·  沉浸式体验，意味着要有固定的桌面图标、独立简洁的运行窗口、可扩展的系统功能（例如通知）等。PWA引入了manifest.json文件，配合Service Worker实现了Web App的可安装特性，可定制桌面图标、窗口模式等多方面配置，实现与原生应用一致的使用方式。

因此，我们接下来主要介绍两个内容：

·  Service Worker技术。

·  如何配置实现PWA的可安装。

▌1. Service Worker

丰富的离线体验、定期的后台同步、推送通知等——这些本来属于原生应用的功能，PWA在Web技术中进行了实现，而ServiceWorker 就是所有这些功能所依赖的技术基础。

什么是 Service Worker

Service Worker 是浏览器在后台独立于网页运行的脚本，可以实现对于网络请求的拦截处理，且支持推送通知和后台同步等功能。未来ServiceWorker 将会实现定期同步或地理围栏等功能，不断完善对于设备API的调用。本文主要讨论Service Worker的核心功能：拦截和处理网络请求，以及缓存管理。

编写Service Worker时，需要注意以下几点：

· Service Worker是一种JavaScriptWorker，不能直接访问 DOM。因此ServiceWorker需要通过postMessage与页面主线程进行通信，而页面则可以对 DOM 执行操作；

·  Service Worker 是一个可编程的网络代理，我们可以通过Service Worker来决定页面所发送网络请求的处理方式，相当于前端有了自己可以编写的中转服务器；

Service Worker 的生命周期

·  浏览器支持：适用浏览器范围日益广泛。目前，Service Worker 受 Chrome、Firefox、Opera、MicrosoftEdge的支持，safari或将支持此功能；

·  设置HTTPS协议：在开发过程中，开发人员可以通过 localhost 使用Service Worker，但如果要在网站上部署 Service Worker，则需要在服务器上设置 HTTPS。

▌2. 实现PWA的可安装

清单文件

为了实现PWA的可安装，首先我们需要在页面里加载一个清单文件（manifest.json），在这个JSON文件中提供有关应用程序的信息（例如名称，启动地址，图标和描述）。manifest文件的作用是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

下面是一个清单内容的示例：

Web应用程序清单部署在HTML页面中，使用于文件头部的一个链接标记：

实现安装的必备条件

为了能够实现安装功能的弹出，需要满足以下条件：

· Web App还没有被安装。且 prefer_related_applications不是true。

·  用户是常用用户（Chrome浏览器会对用户是否多次访问目标网站进行判断）

·  页面内需要有清单manifest.json文件，且文件内必须有以下字段：

short_name or name；

icons官方推荐包括 192px 和 512px 尺寸的图标；

start_url；

display值必须属于以下范围：fullscreen, standalone,or minimal-ui

·  需要在 HTTPS 协议下（service worker运行的前提）

· 注册了一个serviceworker，且service worker内有fetch事件监听

当以上条件都满足后，Chrome会触发beforeinstallprompt事件，我们便可以通过监听该事件来实现安装提示的弹出。

监听beforeinstallprompt事件后，存储事件对象e，待用户点击安装按钮时再执行e.prompt()方法弹出系统安装弹窗：

当用户在系统安装弹层处点击了安装按钮后，Web应用会被添加到桌面，实现PWA的安装。此后，用户便可以通过桌面图标来访问这个Web 应用。

▌Service Worker 在爱奇艺登录的应用

在爱奇艺主站的登录页面，我们最先使用Service Worker技术来进行网络处理的优化，对常用的CSS、JS以及图片资源进行缓存，令登录窗口的展现速度明显提升，详见下图：

从图中我们可以看出：从response start开始的网络响应时间明显降低。更为重要的是，从右侧的“页面加载时间分布”图可以看出，使用Service Worker后页面加载时间非常稳定，网络波动对于页面加载造成的影响很小，这对于用户的实际体验会有明显的加分。

▌爱奇艺主站PWA应用

爱奇艺主站已支持PWA的快捷安装。

在访问爱奇艺主站首页时，页面右下角会有一个加号图标，鼠标放在该处会显示一个安装弹层，如下图：

当点击“立即添加”后，页面会出现系统选框，询问是否安装此PWA应用：

选择安装后，桌面上会出现一个新的App图标，即为打开PWA应用的入口。点击图标，打开爱奇艺快捷版，可以看到一个界面更加简洁的爱奇艺首页，没有浏览器的Tab标签、地址栏以及工具栏等：

▌遇到的问题及优化方案

登录应用Service Worker做缓存处理遇到的主要问题是：如何兼顾快速显示和缓存更新，以及跨域的资源要如何保证缓存完整？

·  为了快速显示，用户请求资源时，用Service Worker拦截并直接返回缓存，免去了向远端请求的耗时；

·  为了避免缓存更新不及时，页面加载完成后再去远端请求一遍相应资源更新缓存，确保及时更新缓存内容，也同时避免跨域资源缓存不完整的问题。

在将网页转为PWA的过程中，针对PWA与网页的机制区别，现已进行了一些优化处理：

·  点击跳转优化：爱奇艺主站的页面跳转为新开标签页，但PWA只有一个单页面，因此当用户在PWA中访问爱奇艺时，对页面内的点击事件会转为当前页面跳转，避免打开浏览器新页面，保证用户的沉浸式体验。

代码示例：

·  记录上次打开地址：PWA启动时只支持打开首页，通过记录用户最后一次打开的地址，为用户恢复上次关闭的页面，便于继续观看。

▌数据效果及未来规划

PWA上线后用户留存率与爱奇艺主站相比，提高了9%。目前爱奇艺主站为了保持站点的统一性，实践了桌面快捷启动。未来我们会继续尝试实践离线工作，消息推送，换肤，基于用户行为分析智能调整常用频道和展示界面等功能，为给用户带来更高的体验，力争打造一款极速极简版爱奇艺。

也许你还想看

爱奇艺网络控制和抓包测试技术实践

在线学习在爱奇艺信息流推荐业务中的探索与实践

扫一扫下方二维码，更多精彩内容陪伴你！