现代化Web开发实践之PWA

　　白癜风医院哈尔滨哪家好 http://news.39.net/bjzkhbzy/180306/6083950.html
背景

PWA即ProgressiveWebApp，是谷歌于年在GoogleI/O大会上提出的下一代WebApp概念，于年落地的web技术，旨在增强Web体验，缩小WebApp与NativeApp的差距并创建类似的用户体验。目前Chrome，Safari，Firefox，Edge浏览器都在不同程度上支持了PWA，国内外一些网站也已进行PWA实践，如Twitter，Starbucks，饿了么，新浪，其中不乏成功案例，在应用PWA后得到了一些可量化的收益：

WestElm应用PWA后数据显示用户使用时间增加了15%，收入增加了9%。印度最大的电子商务网站Flipkart的用户使用时间增加了三倍，互动率增加了40%。

理论上来说，对于所有WebApp，只要参考PWA的标准对其进行改造，就可实现PWA，而对App来说，用户的体验是判断一个应用好坏的重要标准，PWA的改造并不复杂，却可以很大程度上提升用户体验，是投入/产出比很高的一项技术，且PWA的相关功能和浏览器对PWA的支持程度也在不断地增加，未来还有很大的潜力。

但目前由于兼容性等问题尚未大面积地应用到实际中，且网上有关PWA实践的文章较为零散，我们在Sharee项目的移动端改造PWA，在本文中介绍了PWA的主要功能及实现，并记录了实现过程中遇到的一些问题。希望通过这篇文章能对大家了解这门技术和实践过程中遇到的问题有一定的帮助。

选型

我们都知道，WebApp在用户体验上远不如NativeApp，因为WebApp强烈依赖网络，存在弱网环境下加载速度慢，离线情况下无法访问的问题，而且WebApp无法脱离浏览器UI，用户可视区域被压缩，也无法安装在手机桌面。NativeApp虽然有诸多优点，也存在很多问题：开发成本高，需要维护多个版本的更新升级，且内容封闭，无法进行SEO检索，不利于App推广，用户使用前需要下载安装包。

作为WebApp的开发者，我们更加关心如何将NativeApp的特性添加到WebApp上，PWA应运而生。

App类型

市面上现存的App类型可以分为以下四种，我们比较了它们在不同指标上的表现，可以看到PWA本质上还是一个WebApp，但在表现上比WebApp更加接近NativeApp。虽然我们在此与NativeApp进行了比较，但是PWA的目的并不是为了取代NativeApp，也不是为了与NativeApp一较高下，而是对WebApp的升级，是为了带给用户更好的用户体验。

PWA(ProgressiveWebApp)

目前我们已经知道PWA用于提升用户体验，下面给出PWA的官方定义。

定义

ProgressiveWebAppsusemodernwebcapabilitiestodeliveranapp-likeuserexperience.Theyevolvefrompagesinbrowsertabstoimmersive,top-levelapps,maintainingthewebslowfrictionateverymoment.

从定义中我们可以得知，PWA不是特指某一项技术，而是应用了多项技术的WebApp，本质上还是WebApp。PWA借助一些新技术将WebApp和NativeApp各自的优势融合在一起，让用户在使用WebApp时感觉在使用NativeApp。

特点

PWA具有快速、可靠、粘性的特点。快速即快速响应，通过独立的线程进行资源缓存，提高页面的加载时间；可靠指在不稳当的网络环境下，App也能瞬间加载并展现内容，在离线环境下也提供用户有效反馈；粘性则是通过沉浸式的用户界面、桌面图标、消息推送等手段来增强用户的粘度。

标准支持度

根据CanIuse[1]的统计（包括PC和Mobile），实现PWA所涉及到的各项技术的兼容性如下，最重要的APPManifest和ServiceWorker支持情况良好，且在主流浏览器和操作系统中都得到了支持：

AppManifest的支持度达到57.43%ServiceWorker的支持度达到72.82%NotificationsAPI的支持度达到43.3%PushAPI的支持度达到72.39%BackgroundSync暂未统计到，Chrome49以上均支持目的

在Sharee移动端实现PWA，预期目标为优化用户体验和增加用户的留存率和访问量。

对于用户体验的优化主要包含以下两个方面：

离线环境下增加兜底页面：捕捉到用户请求失败时，返回兜底页面来避免浏览器的网络崩溃页面。提高冷启动时的资源加载速度：预缓存静态资源并保存在LocalStorage中，在冷启动时通过ServiceWorker响应，避免。

用户的留存率和访问量的增加通过以下两个方面实现：

对于网页端用户增加常驻入口，减小网站入口的深度。推送消息：推送消息也是吸引用户访问的一种方式，但推送消息需要运营维护，同时Sharee目前消息推送主体还是NativeApp，该功能并未落地。指标

技术落地都需要数据指标量化效果，我们统计以下数据用于长期观测：

PWAinstall（安装弹窗）的点击、安装、取消的渗透率PWA入口（桌面图标）的访问量占比静态资源加载时间方案

本节是对PWA实现细节的详细介绍。首先介绍了PWA依托的主要技术AppManifest、ServiceWorker和PushAPI所产生的收益及其具体实现，然后介绍了Google推荐的PWA最佳实践Workbox，最后简要介绍了如何测试PWA。整体结构如图所示。

AppManifest

AppManifest是一个JSON格式的文件，用于配置网站应用的相关信息。通过该文件，我们可以配置桌面留存图标、安装弹窗和启动动画的相关信息。

屏幕留存图标

我们可以在配置文件中配置桌面留存图标的icon和名称，当用户将网站保存在桌面后，会自动应用配置信息。

收益

添加到主屏幕的好处有很多，主要体现在用户粘性和用户体验上。桌面图标减少了网站的入口深度，用户可以从主屏幕直达站点，而无需从浏览器首页一层一层进入。添加到主屏幕的图标具有接近NativeApp的体验，如下图所示，左二为NativeApp，左三为PWA其他均为NativeApp：

从桌面图标进入网站时具有启动页面和脱离浏览器UI的全屏体验，添加到主屏幕的网站会被纳入应用抽屉中。添加屏幕图标无需下载，类似桌面快捷键，减少了用户安装App的成本。

但PWA的屏幕留存图标与快捷方式不同。

与快捷方式的区别：

屏幕留存图标拥有独立的图标和名称。点击图标打开网站，资源加载的过程并不会像普通网页那样出现白屏，取而代之的是一个展示应用图标和名称的启动页面，资源加载结束时加载页消失。当网页最终展现时，地址栏、工具栏等浏览器元素将不会展现出来，网页内容占满屏幕，看起来与NativeApp一样。实现

编写配置文件后在head中引入，linkrel="manifest"href="/manifest.json"。Mainfest文件通过一些文本描述，具体定义显示到桌面上的内容，并询问用户是否添加，添加之后可在Chrome浏览器的Application-Manifest来查看你的Mainfest文件是否生效。

配置项介绍：

转载请注明：http://www.lwblm.com/tjyy/12253.html