河西公司网站设计:渐进的Web应用程序

2019.06.03 河西公司网站设计

156

Google开发的进步网络应用(PWA)技术已经向公众开放了将近一年,但在核心开发者之外,很少有人知道他们到底是什么,以及他们如何利用它们来造福他们。

重要的是要认识到,河西公司网站设计有几个不同的概念捆绑在这个术语中。“渐进Web应用程序他说:“这些个别零件在被捆绑在一个包裹内之前,已以不同的形式提供。这些部分是:服务工作者、AppShell和JSONManifest。

服务工作者

最有趣的一个组件是服务工作者脚本..这个脚本作为一个额外的层之间的网站请求和互联网服务器在世界各地。

河西公司网站设计
图片来源于谷歌并由作者修改。

当访问者浏览启用PWA的页面并将这些数据本地存储在访问者的设备上时,无论是移动电话、平板电脑还是桌面计算机,它还负责缓存内容。

这意味着,每次我们单击一个带有进步Web应用程序的网站上的链接时,请求将通过服务工作者脚本传递,然后根据规定的规则在线并请求一个新的网页。

或者,如果用户离线,则可以让服务人员从本地存储区提供缓存的页面,这意味着我们现在可以设计在脱机浏览时100%工作的网站,只要该用户以前至少访问过该站点一次。

虽然缓存内容并向没有互联网接入的用户提供服务的想法绝不是一个新的想法,但与应用程序外壳的结合是强大的,并提供了全新的Web开发思路。

AppShell

这类似于移动应用程序的开发方式,其中所有的设计规则、样式表、图像、字体和脚本都包含在一个称为APP外壳.

 Progressive Web Applications

对于渐进Web应用程序来说,这是一个非常有用的概念,可以利用它,因为这些数据可以被认为是静态的,因此可以缓存一次,并在任何给定的点上检索以获得最佳性能。

大多数网站是认真对待他们的用户,或只是优化的搜索引擎优化,将缓存他们的内容已经。但总的趋势是,在逐页的基础上这样做,有自动脚本缓存内容,因此质量和压缩将有所不同,甚至在同一网站不同的页面。

有了应用程序外壳后,开发人员将对所有内容和页面使用相同的基本功能,并与服务工作者一起进行路由和缓存,从而正确地设置了一个先进的Web应用程序,它的性能优于传统网站和移动应用程序。

JSON宣言

JSON清单可能是迄今为止列出的三个最常用的特性。这基本上是保存在Web服务器上的信息的结构化数据集。

河西公司网站设计为了使用渐进Web应用程序,我们使用这个清单文件声明关于用户如何查看应用程序的某些参数,并且在这个文件中我们指示图标所在的位置、进步Web应用程序的名称以及诸如此类的东西。

由于用户可以选择将PWA下载到其设备上的主屏幕上,因此设备将知道如何调用应用程序,以及使用什么图像作为快捷图标。

与其他两点相比,JSON清单很容易开发,一旦完成,只需要更改Web应用程序的标题或更新图标图形等等。

总结至今

我们有服务工作者,它负责缓存内容和管理脱机功能,以及将所有浏览器请求路由到正确的源。

然后是APP外壳它是一个包装器,包含所有样式表和其他相关静态内容,如图像、脚本等。

然后是JSON清单,这是一组简单的结构化数据,让设备和浏览器知道如何称呼渐进Web应用程序,以及使用什么图像作为图标。

利益

使用这些概念有很多优点,下面的要点和解释有望说明使用进步Web应用程序的可能性和原因。

添加到主屏幕

一旦用户访问了两次进步网络应用程序增强的网站,谷歌Chrome和其他支持这项技术的浏览器将提示用户在他们的设备上安装pwa。

河西公司网站设计

研究表明,超过11.5%的网站访问者实际上会安装该应用程序,因此,仅仅使用现有的分析数据,甚至可以粗略估计PWA将达到多少用户。

 Progressive Web Applications
一个进步的Web应用程序促使访问者将该应用程序添加到他们的主屏幕上。

与移动应用程序和网站相比,性能有所提高

根据谷歌(Google)的一项研究,他们对许多网站进行了基准测试和分析,结果显示,使用进步网络应用程序会显著提高性能。平均而言,桌面用户的页面加载时间减少了30%,移动用户减少了22%。

河西公司网站设计

这也导致了其他指标也受到了积极的影响,但为了保持主题,这对2G和3G网络的用户来说是最有利的,尽管每个用户都会欣赏一个更快的加载网站。

现有网站的完全功能离线版本的可能性

一些网站将不需要这个功能,而其他网站可能希望实现一个完全离线版本的他们的网页。到目前为止,我们看到大多数网站只是创建一个自定义离线消息屏幕,如Opera。

 Progressive Web Applications
用户可以像普通应用程序一样安装PWA,但不需要AppStore提交。

虽然我们在下一节中谈到了为什么会认为这是一个不利因素,但这可能是一件积极的事情,因为与不得不等待AppStore和Google播放审查时间的移动应用相比,开发人员可以部署更新,而且网站管理员可以立即推送新内容。

选项,供用户启用推送通知和接收更新。

另一个令人兴奋的特性是,我们现在可以使用推送通知的所有用户已经安装了进步Web应用。事实上,前面提到的谷歌的研究发现,超过58%的用户已经在自己的主屏幕上安装了PWA,他们也授权PWA显示推送通知。

 Progressive Web Applications

内容可以链接到,搜索引擎也可以爬行和显示内容

不像移动应用程序,这意味着我们可以优化SEO在每个页面,并吸引流量像正常的网站。

取决于具体的网站和项目,这可能只是一个游戏的改变。

采用者在转换率、页面加载时间和用户体验方面报告了很好的结果。

通过查看个别的展示谷歌的开发者我们看到,像支付宝这样的企业在采用PWA后,其转化率提高了70%以上。

自实现服务工作人员和缓存以来,Kong的页面大小已经减少了90%,FlipKart在他们的站点上的时间比他们的本地移动应用程序增加了两倍多。

WordPress用户可以使用Mozilla的免费插件进行快速安装

对于所有喜欢WordPress的人来说,Mozilla已经发布了一个非常有用的插件包。总之,他们已经发布了四个插件,可以找到这里.

这些插件将有助于创建一个逐步增强的WordPress网站,并且除了主题外壳之外,几乎已经准备好了,这将需要一些定制,因为明显的原因。

缺点

哪里有好,哪里就有坏。就像这个世界上几乎所有其他的东西一样,现在网站上实现一个进步的Web应用程序也有一些缺点。

并非所有浏览器都支持服务工作人员

谷歌Chrome、Opera和Firefox都支持服务工作者和进步网络应用程序,但微软的Edge和苹果的Safari浏览器尚未实现这些功能,这意味着这些浏览器上的用户不会看到这些功能的好处。

另一方面,也不会显示错误消息,不像有Flash扩展的可怕网站。

没有AppStore/GooglePlay条目

河西公司网站设计由于这些进步网络应用程序没有提交到应用商店,一些人担心的是,他们错过了每天浏览应用程序列表的数百万用户,发现了新的、令人兴奋的应用程序。

虽然有很小比例的应用程序是这样发现的,但大多数应用程序是通过营销活动下载的,或者是通过附属于该应用程序的网站上的链接,或者是通过其他方式下载的。另外,通过查看下面的图表,您会注意到,除非应用程序位于商店图表的最顶端,否则在曝光率方面是微乎其微的。

 Progressive Web Applications
形象礼貌查尔斯·佩里

有限硬件API访问

由于渐进Web应用程序运行在标准Web服务器语言(如HTML 5)上,因此在设备的API硬件访问方面存在固有的限制。虽然我们可以使用某些功能,如相机、加速度计和麦克风等等,但还有其他功能我们还没有访问,如指纹扫描等。

视具体需要而定,开发本地移动应用程序可能更好,但对于现有的大多数网站来说,目前支持的硬件功能应该是足够的。

很难找到拥有大量pwa组合的开发人员。

虽然拥有内部开发人员的大公司可能并不认为这是一个不利因素,但寻求外包开发的小型企业可能很难找到一个拥有适当规模的进步网络应用程序组合的河西开发人员,因为这个概念太新了。

结语

对于大多数网站来说,进步的Web应用程序既有缺点也有缺点,尤其是不受支持的浏览器仍然会显示常规内容,因此不会产生明显的错误或其他不兼容问题。

然而,如果大多数访问者使用Safari作为浏览器,而Firefox、Chrome和Opera的用户相对较少,那么在实现这项技术之前,等待苹果在浏览器中增加对服务人员的支持是有意义的。

还值得一提的是,与渐进Web应用程序相比,本地移动应用程序仍有其用途,部分是为了利用硬件功能,为企业级应用程序提供通用支持和安全性,甚至可能用于那些希望增加货币化的应用程序,特别是基于订阅的应用程序。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP