PWA技术解析及爱奇艺PC端的实践

写在前面

文章开始之前，我们先来讲讲PWA，Progressive Web App的缩写，全称直译过来就是渐进式网页应用，也就是一种网页应用，它可以离线使用，可以变成独立应用安装到系统中。它非常的轻量化，在多平台上面拥有一致的界面。

PWA的概念是由Chrome项目组在2015年的时候提出，很明显，它是一种基于网页的应用，但它又与传统的Web App又有一些不同，下文具体与大家分享PWA技术解析及在爱奇艺App的实践。

概述

渐进式网页应用（下文简称PWA），是提升 Web App 体验的一种新方法，能给用户原生应用的体验。自Web技术诞生至今，前端开发一直拥有一个最为独特的优势：跨平台。只要是符合W3C规范的网页，就可以在任何设备及任何浏览器上进行访问。由于终端设备呈爆发性增长态势，当下跨平台优势尤为重要，并且在可预见的未来，智能终端的种类和数量还会进一步扩大。

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

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

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

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技术原理解析

我们提到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的onfetch和onmessage处理程序中的全局状态。如果有需要持续保存并在重启后加以重用的信息，建议使用IndexedDB API存储状态。

Service Worker 的生命周期

Service Worker 的生命周期独立于网页。要安装一个Service Worker，我们需要经历：注册——安装——激活三大步骤。

想要为指定网页安装Service Worker，我们需要先在页面中注册Service Worker，注册执行后，浏览器在后台会启动Service Worker的安装步骤。

在安装过程中，通常我们会缓存一些静态资源。如果所有文件都成功缓存，那么ServiceWorker就会成功安装。若任何文件下载失败或缓存失败，那么安装也会随之失败。如果发生安装失败的情况，下次访问页面时，Service Worker会再次尝试安装。

安装完成后进入激活步骤，在这一阶段旧缓存会被处理。

激活后，Service Worker的代码就可以对其作用域内的所有页面实施控制，首次注册的Service Worker需要页面再次加载后才会生效。

以下是 Service Worker 初始安装时的简化生命周期：

四个基本环节：注册 - 安装 - 启动 - 更新

下图则是一个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 应用。

爱奇艺PC端PWA实践

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

end

也许你还想看

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