WordPress节日
1月22日,2021年

选择一种语言

This is an archive of the January 2021 event

为什么要为WordPress提供渐进式网络应用?

进步型网络应用是现在网络上的一个热门话题。

根据最近的研究(Comscore ),与移动网络相比,用户在原生应用上花费更多的时间(87%),因为原生应用更可预测,它们可以离线工作,显示通知,并可以访问移动传感器。

然而,78%的时间都花在了用户的前3个应用上,其余的应用就这么放在那里吞噬着内存。

另一方面,移动网络有更好的覆盖率(对于普通用户来说,100次/月的访问量),但并不具备类似原生的体验。

在本讲座中,您将了解我们如何结合本地应用程序的功能和网络的覆盖范围,使用WordPress的渐进式网络应用来获得两个世界的最佳效果。

演讲者:Imran SayedImran Sayed

时间:世界协调时凌晨5:00
区域:亚洲
阶段。全球阶段

你好,欢迎大家。我叫Imran,我在rtCamp工作,rtCamp为企业提供WordPress解决方案。而今天我们要谈的是为什么要为WordPress提供进步的Web应用。让我问你这个问题。什么能比技术发展得更快?可以是我们的期望。我们希望一切都变得更好、更简单。而现在。

然而下载应用程序有时可能需要很长时间。而且世界上很多地方的。数据很贵,很多地区的连接也很差。所以我们真的需要一个下一代的移动web来解决这些问题。我们来谈谈移动web与移动app的使用趋势。那么,使用原生应用的好处是什么?

嗯,它们很容易从主屏幕上访问。它们可以离线工作,你可以发送推送通知让用户回来,你还可以访问移动功能和普查。现在移动应用已经有了更好的功能。然而,移动网络已经得到了更好的覆盖率约百访问每月为一个普通用户。

现在我们能不能两者兼得?所以,如果我们能把移动应用的功能和移动网络的覆盖面结合起来,我们就能得到一些黄金。PWA。现在什么是PWA或PW,是渐进式网络应用。这是网络应用程序的外观和行为与原生应用一样。他们逐步增强Web应用程序,外观和感觉像原生应用程序。

我们来看一下这个。所以,你可以看到,如果你去学院,如果你打开移动网络浏览器,它给你一个选项,添加到主屏幕。当你点击添加到主屏幕,它会继续添加该应用程序到你的主屏幕,然后你将能够访问,像任何其他移动应用程序,你可以看到,如果你点击这个。

它打开了。没有地址栏。感觉就像一个原生的应用程序,这很聪明。那么PWA的需求是什么。嗯,据观察,用户讨厌手机上的延迟和不可靠。移动端延迟造成的压力程度就像看一部恐怖电影一样兼容,当你的移动应用速度很慢的时候,你可以得到这样的压力程度。

其还观察到,50%的智能手机用户在浏览或购物时更倾向于使用公司的移动网站,因为他们不想下载应用,而应用占用手机内存太多。而这也是导致卸载这些移动应用的首要问题。你又可以看到,说,嗯,满了,对不起。

我不能再多了。

现在凡是安装一个安卓应用至少需要三个步骤。比如重定向到play store下载,在漏斗顶部重启安卓应用,PWA安装一键无缝完成,而且不会把用户从当前的转化漏斗中带走,这对企业来说是好事。

所以PWA是让用户更容易回到网站。现在谷歌遵循一个简单的规则,那就是关注用户,其他的都会跟着来。谷歌说,先考虑用户,我的客户的需求是什么?PWA如何提供给他们?而根据观察发现,用户更喜欢火的体验。

不是这个火,当然不是这个火,但火其实会导致快速,可安装,可靠。而且很吸引人。我们来看看原生应用与PWA的区别。所以对于原生应用来说,你需要开发和维护三个独立的代码库。然而对于PWA来说只是一个单一的代码库,这是很聪明的。

原生应用的传播摩擦力大,然而PWA在Android iOS和web,以及各种浏览器上都可以访问。原生应用的可发现性较低。但是,在PWA中,内容是可以被搜索引擎发现和索引的。在原生应用程序中,只有应用程序的下载链接可以被分享,而在PWA中,任何页面或屏幕的直接链接都可以被分享。

原生应用程序是不能做书签的。然而,PWS是。原生应用程序通过play store更新应用程序,而PWA总是新鲜的。原生应用程序有很高的数据使用量,然而,PWA有大量的数据节省。所以根据我们讨论的内容,这些是PWA的一些特点。

他们是进步的,他们是响应的。所以可以在多种设备上工作。它们可以离线工作,无论是在网络上,还是在移动设备上,它们总是新鲜的。数据永远是新鲜的,而且它们被保存下来。所以PWA的一个关键要求。就是它需要在S3PS上他们是可以被谷歌发现索引的。

他们是响当当的双打。你可以向用户发送推送通知,并将其带回。它们是耐用的,它们是可链接的。所以你可以分享这些链接。现在,这对商业意味着什么。PWA具有良好的商业意义。现在,进步的网络应用在很多公司,路线图上,以使他们的网站现代化,适应新的用户,新的期望。

经常问自己的问题。是否能回答客户的实际需求?它是否能发展我们的业务?是否可行和强大,等等。所以进步网站应用利用现代网络功能。那么,快速网站对业务的影响有哪些呢?你可以做的是,当你在进行速度优化时,开始经常测量你的网站速度,用适当的工具和指标来监测你的进展。

例如,用Lighthouse衡量你的指标,固定明确的目标,比如拥有良好的核心网站生命体征评分,并将性能预算纳入你的构建过程中。你可以隔离增量速度变化的影响,并计算你的工作带来了多少额外的收入。

对你来说,知道E-bay将速度作为公司2019年的目标会很有趣。他们使用了性能预算、临界鸨母优化和预测性预取等技术,令人激动的是,他们得出的结论是,搜索页面的加载时间每提高一百毫秒,添加到购物车的数量就增加0.5%,这对企业来说是件好事。

还有Paul Armstrong,Twitter的PWA的技术负责人。他们在他的案例研究中做了非常详尽的文档,这个案例叫Twitter轻量级和高性能的反应递进式Web应用规模。所以我把这个链接跟大家分享一下。但是,这基本上描述了收集数据的重要性,同时调整你的PWA,以最大限度地优化性能。

你会感兴趣的是,谷歌最近宣布,在2021年5月,任何符合谷歌新闻内容政策的非AMP内容页面,如核心网页生命体征、付费体验信号等,都将有资格出现在搜索的移动顶级故事功能中。而且还应该知道的是,谷歌在对搜索结果进行排名时,会优先考虑页面体验好的页面,也就是说核心网页生命体征和页面体验较好的网站很可能会出现在更高的搜索结果中。

所以我们说到什么是公共事业单位,它有什么好处。对的,那为什么它现在很重要呢?那为什么现在很重要呢?如果我们要建BWL呢?我们怎么做呢?所以我们可以通过简单的几步来构建PWA。首先我们可以创建web app manifests。那么什么是web app manifest呢?嗯,它只是一个包含元数据的设计文件。

它基本上是告诉浏览器你的网络应用,它应该如何在用户的移动设备或桌面上安装。所以Chrome浏览器的有效清单是manifest dot json。Opera和Mozilla也是如此。它的manifest点webmainfest,微软的manifest点webmanifest。等等。这就是它的样子。

因此,由于这是一个json文件,它将出现在一个键值对中。所以你有一个简短的名字,比如说"Codeytek"。这将用于你的应用程序的主屏幕和启动,等等。然后你有名字。我就叫它"学院",这将是,呃,在应用安装提示中使用。呃,你可以把信息的图标,这将是用于主屏幕应用程序启动器,任务切换器和闪屏。

另外,呃,你可以通过你的网站的开始到URL,团队颜色,你的应用程序的背景颜色,呃,显示信息,范围,比如哪个目录,呃,用于PWA,等等。还有。然后,你要做的就是告诉你的浏览器你的manifest文件只需要使用LinkedIn标签,然后链接它。现在我们来谈谈浏览器的支持。

你认为所有的浏览器都会支持PWA功能吗?不,现在,你认为哪个浏览器会是最后一个支持PWA功能的?是的,你是对的。是IE浏览器总是最后一个,不是吗?所以你可以看到互联网浏览器不支持了嗯,ED有一个支持。Chrome浏览器有完整的支持。

iOS Safari有部分支持,等等等等。现在我们来说说服务人员。那么什么是服务工作者呢?好吧,服务工作者是一个脚本,你的浏览器在后台运行,与你的网页分开。那么它是做什么的呢?好吧,假设它是一个网页浏览器,而你有一个远程服务器的服务工,基本上是一个拦截http请求的中间件。

然后在这一点上,你可以缓存响应,然后从缓存本身服务响应。所以你可以做不同的事情。你可以有缓存策略,等等。我们将讨论这个问题。我们一会儿再谈这个。好吧,我们来看看生命周期。所以我们来看看服务人员的生命周期。

所以在生命周期中有不同的事件。首先是注册。所以注册事件的时候,我们注册了服务工,然后在安装的时候,我们把文件添加到缓存中。而当它被激活的时候,我们也会删除之前的缓存。这样一来,数据就不会过时了。好的,然后我们注册服务工作者。然后我们注册服务工作者。

所以这是原生JavaScript。我们有service worker。我们检查navigator中是否有service worker,然后我们通过传递service worker文件的URL来注册它。然后我们注册它,然后。在下一步,我们继续添加文件到缓存中。我们继续为要缓存的文件创建一个缓存版本和路径。

所以我们创建一个带有缓存键的常量,我们还创建了另一个常量,它将包含需要缓存的URL列表。然后在安装事件中,我们监听安装事件,然后我们继续。缓存文件,然后确保任何新版本的服务工作者都会接管页面并成为活跃的。

那么下一步在激活的时候我们就去删除之前的缓存。所以我们监听了叫做激活的事件,然后我们去检查是否有新的缓存版本,在这种情况下,我们就去删除之前的缓存。好了,就是这样。所以这就是它的样子。所以,如果你去控制台,如果你加载你的Web应用程序,你可以看到服务工作者的安装缓存文件,注册,激活,检查。

如果有新的缓存版本,而没有找到新的缓存版本。好的。如果你从检查元素进入应用程序,你会在这里找到信息。如果服务人员注册了,你就有了源状态。然后你可以去manifest,这是我们的manifest.json文件信息。

我们已经有了简短的名称,主题,颜色,背景,颜色图标信息,以及所有这些。好了,就在这里对接。这是它对接的地方。这是它告诉你关于缓存的地方。好的。所以一旦服务工作者被激活,它就可以完全控制页面。它现在可以处理 Fetch, push, 和 sync 等事件。

那么它是如何工作的呢,比方说,我们来举这个例子。假设这是你的网络浏览器。当一个网络请求来了,所以浏览器发出HTTP请求, 服务工作者将拦截该请求。它会说,嘿,等一下。在这个请求进入服务器之前,我需要做一些事情。

我需要检查。如果该请求的URL在缓存中。如果它在缓存中,那么我将从缓存本身提供响应。但如果不在,那么我就要向网络、向服务器发出请求,我要返回网络请求的响应。但是,这个时候我也要把响应缓存起来,这样下次请求进来的时候,我就可以从缓存本身服务。

好吧,下一步我们从缓存中提取数据。所以在下一步,我们从缓存中获取数据。所以我们监听了fetch事件,然后我们用,呃,通过检查来响应。如果请求的URL不是缓存,如果是,它将返回缓存的响应,在副,去我一个新的请求到服务器。棒极了。

好吧,这就是取物事件。这就是fetch事件。这就是Fetch事件的样子。所以你可以看到它正在从这些URL中获取响应。如果你去网络选项卡并检查元素,这是服务工作者的样子。最后一件事,如果你想有一个自定义的添加到主屏幕,你可以添加,我会分享GitHub的链接,所以你可以检查代码。

我就不细说了。这是非常简单的。好了,现在我们进入codeytek.所以现在我们去codeytek.com。这是我们的渐进式网络应用,添加到主屏幕。由于我们得到了弹窗,你可以看到它正在添加到主屏幕,然后我们进入我们的主屏幕。这就是我们的应用,点击它。

很好这就是PWA我们现在要做的是进入离线模式 看看它是否能离线工作。这就对了恭喜你 这是在离线模式下工作这是在离线模式下工作我们刚刚建立了一个完美的PWA你可以期待一个类似于这样的灯塔分数。是不是很神奇?让我们为自己鼓掌吧我们刚刚建立了一个PWA

这是每一个开发者的梦想。不是吗?是的 真的吗?好了 到目前为止 我们已经了解了什么是PWA 他们提供了什么功能等等。如果我不是技术专家呢?就像我不是一个开发者 我相信这个问题会出现在你的脑海里 我不是一个开发者,对吗?

所以我可以建立一个PWA。我如何将我现有的WordPress网站转换为PWA?我可以这样做吗?我怎么做呢?好吧,那我们就来谈谈这个问题。所以,我们有某些插件在WordPress的免费插件,你可以使用,这将转换您现有的网站。WordPress网站变成PWA这些都是谷歌的PWA。

你有超级PWA,WordPress移动包,PWA for WP和amp,进步的WordPress,等等。所以,让我们在这个例子中,我们要,所以让我们说我们安装一个激活超级PWA插件。这是你的设置屏幕的样子。还记得我们讨论过的manifest Dot Json,其中你有应用程序名称,图标信息,背景颜色。

所以基本上这是用于该文件的信息。大部分的信息都是预先填好的,但是如果你想自定义它,例如,你想让你的应用程序的名字不同,嗯,你想为你的PWA选择不同的背景颜色。嗯,你想为你的PWA选择一个不同的背景颜色。你可以从这里做。好的 Okay.

好吧,那我们就说你已经激活了超级PWA插件。那么假设你已经激活了超级PWA插件,但是如果我想为我的WordPress网站向我的用户发送推送通知呢?我怎么做呢?好吧,在我们跳到这个问题之前,有一些有趣的事情。我想和大家分享一下。根据研究,观察到智能手机用户更有可能从提供相关产品推荐的移动网站上购买,85%的智能手机用户表示移动通知很有用,这样他们就可以得到他们正在寻找的正确推荐。

那么,我们来看看如何才能去,为我们的WordPress网站发送推送通知。好了,好消息是,有一个免费的插件,那就是叫做one signal。你要做的就是安装并激活这个插件。按照基本的步骤来操作就可以了。就像你看到的在one signal创建账户,然后只需填写app ID、Rest API key等基本信息,然后你也可以自定义设置。

一旦你做了这些而一旦你安装了你的超级PWA,然后激活了一个信号。好的地方是,超级PWA兼容一个信号,一旦设置好了,那么你的WordPress网站就要把它转换成PWA。所以比如说,我激活了这个。所以如果我现在进入我的WordPress网站,你可以看到我得到一个添加到主屏幕的选项。

而这次也得到了发送推送通知的选项。当我接受这些时,添加到主屏幕,并接受接收推送通知,说谢谢你的订阅。而且它是将这个应用程序添加到我的主屏幕上。

哦,让我们去一个主屏幕。那是我们的应用程序。让我们打开它。你可以看到没有地址栏。所以它看起来和感觉像一个本地应用程序。这是我们的博客页面。

现在让我们进入离线模式。所以我要点击离线模式。飞机模式。

让我们关闭。一切都结束了

让我们重开它。

就这样吧即使你离线了也能用。太棒了 Awesome.现在让我们试着看看推送通知是如何工作的。因此,理想情况下,我希望他们当我发布一个新的文章,然后推送通知发送到用户。好的,就这么办吧。让我们这样做。所以我要发布这篇文章。这是我的WordPress文章。

我点击了发布。注意到发生了什么吗?你得到一个消息在上面。好了 There you go.右边写着成功发送至10个收件人。注意在手机上,你得到了一个通知。你点击那个通知,你就直接进入了这个博客。是不是很神奇?这绝对是辉煌的。我的意思是,我实际上可以通过向用户发送推送通知来吸引他们,并且当我继续发布文章时,会自动触发所有订阅者。

惊人的。完美的。好了,现在我们来谈谈浏览器的兼容性。所以,它是兼容谷歌Chrome浏览器Android Mozilla火狐Android Edge的Android,Brave的Android,三星互联网。那iOS呢?所以iOS从11.3版本才开始支持PWA。有些功能已经支持iOS,而不是全部。

比如后台同步,还有一个网页推送通知。所以目前不支持。呃,而且,而且你需要手动按分享图标,然后添加到iOS的主屏幕。右边的一些例子,我想分享PWA。所以你有qualitech.com,这是一个PWA。你要高兴Instagram,呃,Uber,M Uber Forbes。

FlipKart Lite,Smashing杂志,和Pinterest在那里,还有一个更多的aswell。在rtCamp,我们建立了一个叫做wp-decoupled的东西,这个也可以离线工作。所以这是一个PWA。所以前端是在React中使用next-es。而后端是在WordPress中。而这是一个WooCommerce应用。你可以看到,它也是离线工作的。

我还搭建了一个开源的Gatsby WooCommerce主题,它的前端用React与Gatsby,后端用WordPress。你可以看到,这些都是产品的分类,你有,这些产品是可以使用的,你有分页,你也可以离线,如果我做了关闭wifi。

而如果我刷新页面,你可以看到它仍然有效。我也可以搜索产品。它仍然有效。我也可以搜索产品,所以我可以做旆,你可以看到,它的搜索离线以及。是啊,然后你就有了,添加了一个产品。然后你已经得到了,添加到购物车选项。所以这些都是,你是添加到购物车。你有结账选项,你有支付网关可用,你有购物车可用,然后你也有。

呃,古腾堡支持,你可以写块。然后这个要显示在这边。而这些,你可以看到这些都是离线工作的,所以你可以。把这些产品添加到你的愿望清单上。而当网络恢复在线的时候,你就可以直接订购了,这真是太好了。好的。而且你不需要为移动应用建立一个额外的代码库,因为这是一个PWA,实际上你可以添加到手机的主屏幕上,把这个作为一个移动应用,甚至可以离线工作。

那我们就来看看怎么做吧。

[音乐]

好吧,所以我希望你喜欢这个演示。所以我希望你喜欢这个演示。而这将给你一个网站,一个更好的性能和更好的用户体验。所以对于参考资料,呃,你想要,你可以去,所以对于PWA,你可以去developers.google.com/web/fundamentals。你可以在GitHub上查看我们在imranhsayed/pwa-concepts上搭建的PWA的代码,对于WP解耦,你可以去GitHub上的rtCamp斜杠WP解耦。

而对于Gatsby WooCommerce团队在GitHub上的imranhsayed也是如此。如果你想我们将学习WordPress,你可以去学习点rtCamp.com,这是一个相当广泛的学习WordPress的来源。你可以去看看。如果你想学习不同技术栈的编程,你可以去Codeytek.com。

然后课程,你可以学习关于咿咿呀呀的Chrome,CSS,Gatsby,呃,渐进式网络应用,WordPress,还有很多免费课程。好了,就这样吧。那么就这样了,恭喜大家。我们了解了什么是渐进式网络应用,如何使用它们,如何开发PWA,如何将你现有的WordPress网站转换成PWA WordPress插件。

所以我希望你喜欢它。非常感谢你。你可以关注我在。Twitter上。我的Twitter账号是@imranhsayed。非常感谢你 Thank you very much.

分享本届会议

分享到Facebook
在微博上分享
在linkedin上分享
分享到pinterest
分享到电子邮件