Machine Translated by Google

请参阅本出版物的讨论、
统计数据和作者简介：  https: //www.researchgate.net/publication/330834334

渐进式  Web  应用程序对  Web  应用程序开发的影响

研究·2018  年  9  月
DOI：
10.15680/IJIRSET.2018.0709021

引文 阅读

29 26,102

2  位作者：

萨亚莉·坦德尔 阿布舍克·贾玛达尔

佩斯大学 smt。
英迪拉·甘地工程学院
3  篇出版物  63次引用 2  篇出版物  63次引用

查看资料 查看资料

本出版物的一些作者也在从事这些相关项目：

使用  Ionic  Framework  View  项目的农业援助应用程序

此页面后的所有内容均由Sayali  Tandel上传2019  年  2  月  2  日。

用户请求增强下载的文件。
Machine Translated by Google

ISSN（在线）：
2319‑8753
ISSN（印刷版）：
2347‑6710

国际科学创新研究杂志，
工程技术
（高影响因子、
同行评审月刊）

访问：  www.ijirset.com
卷。  7、
2018年9月第9期

渐进式  Web  应用程序对  Web  应用程序的影响
发展
1 2
萨亚利·苏尼尔·坦德尔 , 阿布舍克·贾玛达尔

印度马哈拉施特拉邦新孟买  (Ghansoli)  Smt.Indira  Gandhi  学院计算机工程系学生1,2

摘要：
技术创新总是会影响产品和服务的设计方式。
特别是智能手机的发明以及免费的  Android  操作系统推出后，
智能手机的使用量大幅增加。
大多数用户使用
本机移动应用程序来浏览特定行业的内容。

另一种方式是通过网络浏览器浏览内容。
但这两种方式都有局限性。
第一种方式是本机应用程序，
用户需要先下载应用程序，
然后必须根据自己的要求使用它。

这有两个主要缺点，
一是它占用智能手机设备的本地存储空间，
并且网络连接必须足够强大才能顺利运行。
在  2G  或更少带宽或  3G  网络可用的地区，
访问此本
机应用程序的过程会变得很慢。
第二种方式是通过网络浏览器，
但它也有缺点，
因为用户体验不如本机应用程序。
为了克服上述限制，
谷歌提供了渐进式网络应用
程序（PWA）
的解决方案，
它结合了网络和移动应用程序的优点，
为我们提供了像本机应用程序一样丰富的体验。
它是一个使用网络技术构建的网站，
其作用类似
于应用程序。

PWA  是一个使用网络技术构建的网站，
其行为类似于应用程序，
并且不需要像本机应用程序那样安装。

关键词：
渐进式、
离线、
Service  Worker、
AppShell、
应用清单。

一、
简介

2015  年，
设计师  Frances  Berriman  和  Google  Chrome  工程师  Alex  Russell  创造了“渐进式  Web  应用程序”
一词来描述利用现代浏览器支持的新功能的
应用程序，
包括  Service  Worker  和  Web  应用程序清单，
让用户将  Web  应用程序升级到渐进式  Web本地操作系统  (OS)  中的应用程序。

本机移动应用程序可以发送推送通知、
离线工作、
在主屏幕上加载。
相比之下，
在移动浏览器中访问的移动网络应用程序历史上没有做过这些事情。
渐进式  Web  
应用程序通过新的  Web  API、
新的设计概念和新的流行语解决了这个问题。
渐进式  Web  应用程序将我们期望从本机应用程序中获得的功能带到移动浏览器中。
它使用基于标准的技术并在网络上任何人都可以访问的安全容器中运行。
即使有完全开发的移动网络应用程序，
它仍然难以为用户提供令人赏心悦目的和满意
的体验，
主要是因为各个领域缺乏强大的网络连接。
因此，
PWA（Progressive  Web  Apps）
是Google为了克服移动浏览和原生应用的限制而设计和开发的一项
新技术。  PWA  是通过单击设备主屏幕上的图标来启动的，
就像使用本机应用程序一样。
无论网络连接是否可用，
PWA  都会立即加载到您的屏幕上。
他们通过推
送通知支持启动屏幕。
在后台，
服务工作线程（API  集）
允许开发人员以编程方式缓存和预加载资产，
并通过称为推送通知的概念管理数据。  Service  Worker  
是一个运行自己线程的模块，
负责提供  PWA  处理后台任务的通用入口点。  PWA  可与完全响应且安全的  URL  链接。
渐进式  Web  应用程序最初是  Chrome  中
的选项卡，
并逐渐变得更像“应用程序”；
使用它们的人越多，
就可以将它们固定在手机的主屏幕或应用程序抽屉中，
并可以访问类似应用程序的属性，
例如通知
和离线使用。

IJIRSET  版权所有 DOI:10.15680/IJIRSET.2018.0709021 9439

Machine Translated by Google

ISSN（在线）：
2319‑8753
ISSN（印刷版）：
2347‑6710

国际科学创新研究杂志，
工程技术
（高影响因子、
同行评审月刊）

访问：  www.ijirset.com
卷。  7、
2018年9月第9期

二.相关工作

2014  年，
全球通过移动设备访问网络的用户数量超过了通过桌面设备访问网络的用户数量。
这表明让您的  Web  应用程序适合移动设备现在比以往任何时候都更加重要。
公司经常认为需要开发本机应用程序或混合应用程序，
以克服网络作为平台对
移动设备施加的限制。
在许多情况下，
他们必须为  Web、
iOS  和  Android  开发应用程序。

本机应用程序通常使用特定于设备的编程语言和集成开发环境  (IDE)  进行编码。
而本机  Android  应用程序通常使用  IDE  Android  Studio  使用  Java  进行编
码。
这些应用程序通常通过手机上的应用程序商店安装，
并通过特定于平台的  API  对设备硬件进行丰富的访问。

这些应用程序可从相应的操作系统应用程序商店安装，
并在本机环境中运行，
具有本机应用程序可用的所有功能。
由于浏览器的限制，
这些应用程序脱离了本机
环境，
无法提供这种体验。
渐进式  Web  应用程序  (PWA)  可以解决这个问题。

混合应用程序表示使用基于  Web  的技术构建的应用程序，
但可以在混合开发框架（例如  Apache  Cordova）
的帮助下，
显示并充当本机应用程序。

因此， 在开发针对移动设备的应用程序时， 传统上三种常见的替代方案是构建本机、

混合或移动  Web  应用程序；
然而，
谷歌于  2015  年推出的渐进式网络应用
程序  (PWA)  可以被认为是这些应用程序的第四种替代方案。

PWA  是一种  Web  应用程序，
旨在在移动设备上提供类似本机的用户体验，
例如离线支持和推送通知。

三、
特点

‧渐进式  –  无论您使用什么浏览器，
甚至无论您位于世界何处，
渐进式  Web  应用程序都适用于每个用户。
因此，
如果用户使用  Chrome  或  Opera，
或者用户是
否居住在印度、
英国甚至朝鲜，
都没关系！
渐进式  Web  应用程序也能正常工作，
因为它们是以渐进增强为核心原则构建的。

‧响应式  –  渐进式  Web  应用程序可以适合任何类型的设备。
它可以适用于任何设备，
如台式机、
移动设备、
平板电脑或尚未出
现的设备。
‧应用程序感觉 由于渐进式  Web  应用程序中应用程序风格的交互和导航，
它们给人一种
向用户应用。
独立于连接性 服务工作者以离线工作的方式帮助渐进式  Web  应用程序，
甚至可以在低质量的网络上工作。

‧安装 用户可以将广泛使用的  PWA  保留在设备的主屏幕上，
而不受其他设备的干扰
应用商店。
‧可发现  ‑  渐进式  Web  应用程序可被识别为应用程序。  Service  Worker  和  W3C
清单注册范围允许搜索引擎轻松找到它们。
‧吸引人 推送通知等功能使渐进式  Web  应用程序更具吸引力。
这些应用程序可以安装并显示在用户的主屏幕上，
无需应用程序商店。
用户可以在应用程序加
载时指定主屏幕和启动屏幕的图标。
应用程序启动时要加载的页面和屏幕方向。

‧安全     渐进式  Web  应用程序通过  HTTPS  提供服务，
这确保了未经身份验证就无法访问
被任何人篡改。
‧得益于  Service  Worker  更新过程，
Fresh‑Progressive  Web  应用程序始终是最新的。

IJIRSET  版权所有 DOI:10.15680/IJIRSET.2018.0709021 9440

Machine Translated by Google

ISSN（在线）：
2319‑8753
ISSN（印刷版）：
2347‑6710

国际科学创新研究杂志，
工程技术
（高影响因子、
同行评审月刊）

访问：  www.ijirset.com

卷。  7、
2018年9月第9期

IV.原生应用VS  PWA  VS标准  WEB  应用

根据这项研究，
移动网络的覆盖范围远远高于本机应用程序的覆盖范围。
每月独立访客数量为  1,140  万，
而每月访客数量为  400  万。

而用户参与服务的统计数据表明，
与标准网络应用程序相比，
用户倾向于在本机移动应用程序上花费更多时间。
应用程序上的平均时长为  188.6  分钟，
而网络上的
平均时长为  9.3  分钟。
所以，这个想法很明确。他们希望为移动网络上的用户提供类似本机应用程序的引人入胜的体验。
通过这种方式，
渐进式  Web  
应用程序被开发出来，以在网络上提供令人惊叹的用户体验。

下面是  Native  App、
PWA  和  Standard  Web  App  在各个重要参数上的比较：

原生应用程序 渐进式网页应用
标准网络应用程序

安装 需要去App  store点击 只需单击一个按钮即可将 无需安装

Play  商店，
或下载 它们添加到手机主屏幕（仅
适用于  Android）

更新 需要提交到商店，
然后由用户下载 更新是即时的 更新是即时的

尺寸 大多尺寸较重。在用户设备上下载需要 小而快 小而快

能 时间

离线访问 可用的 需要在线使用该应用程序，

然后应 不需要
该能够离线访问缓存的内容

用户体验 当应用程序设计良好时效 由于双菜单（应用程序菜单和浏 与渐进式网络相同

果非常好 览器菜单）
而令人困惑 应用程序

推送通知 是的 是（仅限  Android） 是（仅适用于第三方服务）

可发现性 不好 需要在应用商店优化上下功夫 好  –  要出现在搜索结果中，

需要针 不需要
对  SEO  进行优化

IJIRSET  版权所有 DOI:10.15680/IJIRSET.2018.0709021 9441

Machine Translated by Google

ISSN（在线）：
2319‑8753
ISSN（印刷版）：
2347‑6710

国际科学创新研究杂志，
工程技术
（高影响因子、
同行评审月刊）

访问：  www.ijirset.com
卷。  7、
2018年9月第9期

五、
PWA核心原则

应用外壳 应用清单

‧  快速 ‧  离线 ‧  像应用程序一样的感觉

‧  流畅的用户体验 ‧  缓存 ‧  参与

经验

服务人员

图  1：
PWA  的核心原则

服务人员：

Service  Workers，
Progressive  Web  App  背后的一个极其强大的工具。  Service  Worker  提供的功能有：

‧  离线访问。

‧  推送通知

‧  后台内容更新

内容缓存

Service  Worker  执行以下功能：
1.  缓存App  Shell。
2.更新后台内容。
3.  获取用户的推送通知id以发送通知。
4.需要时使缓存失效

应用程序外壳：

应用程序外壳架构由  Service  Worker  提供服务，
然后交付内容。
这些往往是
Service  Worker  通过  API  请求从其源缓存。
人们更频繁访问的网站将能够保存人们最后访问的内容，
同时等待网络动态加载最新的刷新。
和

IJIRSET  版权所有 DOI:10.15680/IJIRSET.2018.0709021 9442

Machine Translated by Google

ISSN（在线）：
2319‑8753
ISSN（印刷版）：
2347‑6710

国际科学创新研究杂志，
工程技术
（高影响因子、
同行评审月刊）

访问：  www.ijirset.com
卷。  7、
2018年9月第9期

App  Shell  模型，
重点是保持应用程序  UI  的外壳和其中的内容分离，
并且它们单独缓存。
理想情况下，
App  Shell  会被缓存，
以便在用户访问和返回时尽快加载

之后。
理论上，
将  shell  和内容分开加载可以提高用户对应用程序性能和可用性的感知。

网络应用程序清单：

Web  应用程序清单的作用是在  JSON  文本文件中提供有关应用程序的信息（例如其名称、
作者、
图标和描述）。
清单必须告知设备主屏幕上安装的网站的详细信
息，
为用户提供更快的访问和更丰富的体验。
称为渐进式网络的网络技术的集合

应用程序包括  Web  应用程序清单作为其一部分，
通过该清单可以将网站安装到设备的主屏幕
无需应用程序商店，
以及离线工作和接收推送通知等其他功能。

五、
结果

Google  Lighthouse  可以作为  Chrome  扩展程序从命令行运行，
也可以作为  Node  模块以编程方式使用。  Lighthouse  专注于  PWA  的性能指标和质量。
标
准  Lighthouse  报告以易于理解的格式提供了有关多种因素的信息。
网站性能的一些值得注意的内容

是：

1.  HTTP/2  –  提供未通过  HTTP/2  提供服务的每个内部资源的列表。
2.  第一次有意义的绘制  –  在浏览器中开始渲染内容所需的时间。
3.  交互时间  –  页面加载到足以让用户与其交互的时间点的度量。

0 500 1000 1500 2000年

使用  PWA  不使用  PWA

样式表的首次绘制延迟时间（毫秒）

图  2：
首次绘制延迟时间

第一页是浏览器拥有呈现页面所需的所有信息的第一个点。
这是指浏览器第一次在屏幕上绘制渲染页面的图像。

IJIRSET  版权所有 DOI:10.15680/IJIRSET.2018.0709021 9443

Machine Translated by Google

ISSN（在线）：
2319‑8753
ISSN（印刷版）：
2347‑6710

国际科学创新研究杂志，
工程技术
（高影响因子、
同行评审月刊）

访问：  www.ijirset.com
卷。  7、
2018年9月第9期

样式表是一种模板文件，
由字体和布局设置组成，
为文档提供标准化外观。
与未启用  PWA  的网页  (1769  毫秒)  相比，
启用  PWA  的网页的样式表首次绘制所需的时间更短  (85  毫秒)。

0 50 100 150 200 250 300 350

使用  PWA  不使用  PWA

未使用的  CSS  规则可能节省的成本  (KB)

图  3：
未使用  CSS  规则的潜在节省

在浏览器开始呈现网页之前， 它必须下载并解析布局页面所需的任何样式表。 大多数网站都会为其所有页面重用相同的外部  CSS  文件，即

使其中定义的许多规则不适用于当前页面。 最好的方法是最大限度地减少样式表加载和渲染时间造成的延迟， 即减少  CSS  占用空间。
与未
启用  PWA  的网页  (283  KB)  相比，
启用  PWA  的网页的潜在节省空间较小  (187  KB)。

参考

[1]。  Parbat  Thakur，“渐进式  Web  应用程序的评估和实施”， 学士论文，赫尔辛基城市应用大学
科学， 2018。
[2]。  Mikael  Wahlström，“探索渐进式医疗保健  Web  应用程序” 硕士论文，于默奥大学，2017  年。
[3]。  Thomas  Steiner，“当  Web  访问方式不是  Web  浏览器时渐进式  Web  应用程序功能分析”， 2018  年。
[4]。  Pavel  B ou ek， “Google  Progressive  Web  Apps  技术的评估和使用”，马萨里克大学学士论文
信息学， 2017。
[5]。  Bob  Frankston，
“渐进式  Web  应用程序”，
IEEE  消费电子杂志，
第  7  卷，
第  2  期。
第  106  页，
2018  年。
[6]。  Rebecca  Fransson  和  Alexandre  Driaguine，“渐进式  Web  应用程序与本机  Android  应用程序的比较”， 学士论文，
林奈大学， 2017。
[7]。  Ivano  Malavolta、
Giuseppe  Procaccianti、 Paul  Noorland  和  Peter  Vukmirovic，
“评估  Service  Workers  对渐进式  Web  应用程序能源效率的影响”，
IEEE/ACM  第四届
移动软件工程和系统国际会议  (MOBILE  Soft)，
2017年。

[8]。  Andreas  Biørn‑Hansen、
Tim  A.  Majchrzak  和  Tor‑Morten  Grønli，
“渐进式  Web  应用程序：
移动开发可能的  Web  原生统一者”，
SCITEPRESS，
第  345  页，
2017  年。

[9]。  Farrugia  Kevin，“渐进式  Web  应用程序初学者指南”， Smash  杂志，
2016  年。
[10]。  Teplý  Jan  Bc.，
“项目的混合移动应用程序”， 捷克技术大学， 布拉格， 2016  年。
[11]。  P.  Kinlan，“Android  版  Chrome  中可使用  Web  应用程序清单安装的  Web  应用程序”，
Google  开发者，
2017  年。
[12]。  J.  Parsons，
“什么是渐进式  Web  应用程序？  “，
官方  Ionic  博客，
2016  年
[13]。  David  Fortunato  和  Jorge  Bernardino，
“渐进式  Web  应用程序：
本地移动应用程序的替代品”，
IEEE/第  13  届伊比利亚会议
信息系统和技术  (CISTI)， 2018。

IJIRSET  版权所有 DOI:10.15680/IJIRSET.2018.0709021 9444

查看出版统计