英语原文共 8 页，剩余内容已隐藏，支付完成后下载完整资料

渐进式web应用: 或是web与原生移动开发的统一者

Andreas Bioslash;rn-Hansen¹, Tim A. Majchrzak² and Tor-Morten Groslash;nli¹

¹Faculty of Technology, Westerdals Oslo ACT, Christian Krohgs gate 32, 0186, Oslo, Norway

²ERCIS, University of Agder, Gimlemoen 25, 4630, Kristiansand, Norway

介绍

在传统的移动应用开发中，原生应用、web应用与移动平台的代码复用性天生就是不存在的。因为原生应用的代码库不可互通，也就导致在需要支持多移动平台或操作系统时，要有多个项目，建立多个开发环境(Heitko ̈tter et al., 2013; Perchat et al., 2013; Majchrzak and Heitko ̈tter, 2014)。

对于没有资源或精力雇佣各移动平台开发者的公司，跨平台开发已经成为了一种受欢迎的选择(Malavolta et al., 2015b)。它不仅能减少开发成本，还能让应用更快面向市场(Rahul and Tolety, 2012)。尽管在学术与工程领域，它的应用与声誉各不相同(Puvvala et al., 2016; Mercado et al., 2016)，将一份代码库应用在多平台上的想法，因为各种理由，看起来非常有吸引力。包括但不局限于：预算、人力资源与现有的知识领域(Corral et al., 2012)。

跨平台开发的手段有许多种(Heitkuml;otter et al., 2012; Rieger and Majchrzak, 2016)。此外，大量支持这种开发的技术框架要么在开源许可下免费提供，要么作为付费专有产品提供。以一些流行的框架为例：Ionic框架，PhoneGap，React Native，Xamarin(cf. Majchrzak et al. (2017))。巧合的是，这几种框架也正好代表了三种独特的方法(Majchrzak et al., 2017)。

Ionic框架和PhoneGap都属于将web与Cordova混合使用的技术，其用户交互界面的结构与样式都使用了HTML与CSS在内的web技术。React Native则属于利用解释器的技术，它并不依赖于web视窗，而是使用设备提供的Javascript解释器与原生桥梁，最终得到原生交互组件，而不是基于web的HTML组件。基于Xamarin的技术一般指利用cross-compilation，它会将C#编译为其对应支持平台的原生二进制文件，最终得到不依赖解释器或webview的原生应用(Latif et al., 2016)。这种手段也可被称为真正的原生(cf. also Heitkuml;otter et al. (2013))。

直到最近，就与本地或跨平台应用竞争的能力方面，web平台的创新仍落后于移动平台(Puderet al., 2014)。为此，Google Web Fundamentals组织倡导一套新标准，试图通过向web引入离线支持、后台同步和主屏幕安装等功能来弥补这一差距。这种方法目前被称作渐进式web应用(Progressive Web Apps，PWA)，这个术语于2015年由Russel与Berriman在一篇介绍其最初设计理念的博客中被提出。PWA由一系列的观念和关键词定义，包括渐进式、响应式、独立连通性、类app、全新的、安全的、可发现的、可返还的、可安装的、可链接的(Osmani, 2015)。这些都是PWA为统一移动体验所做的贡献，即在没有应用程序市场的情况下安装和分发Web应用程序，在离线的情况下工作，接收推送通知并看起来像常规应用程序。之所以能做到这点，要归功于Service Worker API，它让开发者可以使用后台执行脚本作为网络与设备代理。

虽然行业对渐进式应用展现出了投入的意愿与兴趣，但我们认为该领域学术研究的缺乏是需要理论研究的一部分。因此，在本文6.2节会进一步讨论其充足的研究潜力。本文旨在介绍渐进式Web应用背后的概念和技术。此外本文还试图展现其特性并提供与其他技术的比较。通过这些步骤，应该可以帮助各位解答并细细体会上文提到的一堆关于PWA的词汇。Hybried、解释与PWA这几种技术途径打造了目前三种形式的移动应用程序，而本文也会提供它们在启动速度，应用程序大小，渲染速度上的对比。

这篇论文的结构如下：第2节介绍我们的调研方法，第3节整理PWA的相关研究，第4节整理我们使用PWA的结果，第5节讨论我们的发现，最后在第6节做出总结并指出未来的工作方向。

调研方法

文献检索

在2017年1月，对渐进式web应用的学术参与进行初步搜索，返回的结果有限。谷歌学术上搜索Progressive Web Apps只返回了两个结果：一份为名为Mobile！的会议准备的演讲稿和一份关于web应用启动时间的IEEE论文。

使用相同的搜索关键词，Taylor amp; Francis在线文献数据库返回了零个结果，在ScienceDirect搜索也是如此。ACM数字图书馆返回了上文提到的演讲稿，IEEE Xplore返回了上文提到的与PWA关系不大的论文(Gudla et al., 2016)。

ResearchGate是一个搜索结果包含发布与提问的站点，但是也没有返回相关结果。因此，截至2017年1月，关于PWA的学术贡献几乎是不存在，不可见，通过搜索引擎无法发现的。

同样未知的研究基础还有Service Workers。在上述提到的数据库中搜索Service Workers，返回的结果不局限于计算机科学，也包含儿童护理与公共部门的词条。使用其他的组合词汇搜索，比如｛Service Workers, web, API｝，可以一定程度上筛选结果，但还是被无关结果污染。

设计与实施

为了对PWA的可能性有更好地理解，我们分别使用了三种技术开发了应用程序用于比较。hybrid应用使用了Ionic框架开发。解释型应用使用了React Native开发。最后，渐进式web应用使用了React.js开发。考虑到我们的主要目的是介绍PWA的概念与技术，并进行高阶的比较，这次的研究排除了跨平台的技术方案。

该应用程序采用主视图-详情导航模式，主视图显示从API获取的可点击项目列表。单击列表项后，将导航到详细视图，显示该列表项的图像、作者和标题。数据源从www.reddit.con/r/Art/.json获取。

为了方便验证结果，三个应用程序都已开源。图1图2图3（见第3节）展示了三个应用程序。

图 1 基于Ionic框架的hybrid应用

图 2 基于React Native的混合应用

图 3 PWA应用

性能测试

性能测试包含了三个指标。测试是在一台运行安卓7.0的Nexus 5x手机上进行的。目的是收集初始数据，以反映第2.2小节讨论的各程序实现方式之间性能差异。

应用程序安装体积，在安卓设备按照如下路径可以获得程序的体积：设置-应用程序-[程序名称]。

启动时间，可以通过Android Debug Bridge的am_activity_launch_time命令衡量。它将记录应用第一个活动启动所花的时间。考虑到每次渲染所花时间不同，每个应用将进行十次测试，结果将是其平均值。

从点击应用图标到工具栏渲染所花时间，由于没有合适的方法测量这个时间，我们使用了在线秒表。这个标题为“Art by Reddit”的工具栏，如图1-3，在我们的应用中是第一个渲染的元素，因此我们将其作为渲染时间的标准。由于衡量依赖于人的反应速度，不可避免的容易出错，每个应用都会进行十次测试，结果将取其平均值。

相关的研究

从文献检索中可以明显看出，对于PWA的研究学术参与不足，但是一个以行业为导向的知识体系已经确立。而Google Web Fundamentals小组正在努力推动创建、发布教程与博客文章。在坚实的学术知识库建立起来之前，专注于web基础领域的站点应当为接来下的研究垒实地基。除了谷歌创建的内容，两本早期的书(Ater, 2017; Hume, 2017)和一大堆行业领域的文章被挖了出来。所涵盖的主题包括基本概念(Edwards，2016)、挑战和关注(Mahemoff，2016)以及对网络创新影响的思考(Rinaldi等人，2016)。在其他应用开发途径的讨论中，更大的学术基础开始显现。我们已经找到了许多讨论跨平台应用开发与底层方法的论文。有些论文在相关研究中经常出现，包括Heitkuml;otter等人(2012)，Xanthopoulos和Xinogalos(2013)，Dalmasso等人(2013)与Palmieri等人(2012)的论文。它们填补了理论基础与早期研究的空缺，新的论文将以其为参考。它们主题广泛，从技术框架的比较到实现途径，从技术分类到性能表现。

最近确定的研究包括但不限于跨平台工具需求(Gaouar等人，2016)、开发方法评估框架(Rieger和Majchrzak，2016)、性能占用比较(Ciman和Gaggi，2016)和跨平台应用的终端用户体验(Mercado等人，2016；Malavolta等人, 2015)。他们的贡献应当被认可为将来PWA研究的重要基础。

由于学术贡献较为缺乏，敏锐的行业兴趣应当作为未来进一步研究与学术参与的催化剂。在第6节我们提出了研究建议，旨在激发相关研究团体的兴趣。

结果

特性比较

本节旨在通过比较一系列的特性与概念，来深入了解解释型应用、渐进式web应用、hybrid应用与原生应用之间的区别，并为终端用户提供技术框架、体验一致性等方面的见解。

表1提供了截至2017年1月，在PWA中可用的功能及其兼容性的非详尽列表。随后是相关备注。

表格1: 各技术途径的特性比较

1. Chrome Canary浏览器可以为安卓启用Enable improved add to Homescreen开发者选项，使得PWA应用可以像普通应用一样

   剩余内容已隐藏，支付完成后下载完整资料

   ---

   资料编号：[19704]，资料为PDF文档或Word文档，PDF文档可免费转换为Word