Return to site

介绍渐进式Web应用程序:它们可能对您的网站和SEO意味着什么

渐进式Web应用程序。啊,是的,谷歌让你相信的那些东西是甘地和邓布利多的组合,来拯救世界免受恐怖的痛苦慢网站TM

但实际上是什么使PWA?你应该有吗?如果你创建一个,你将如何确保它排名?那么,请继续阅读以找出...

什么是PWA?

鉴于Google提出了这个术语,我认为我们已经开始了他们的定义:

“Progressive Web App使用现代Web功能提供类似应用的用户体验。”
- 渐进式Web应用程序

PWA真正令人兴奋的事情是:它们可以减少应用开发的必要性。您的移动网站成为您的应用。在Builtvisible的一些同事面前,这似乎是一个有趣的讨论点:品牌需要应用程序和网站,还是PWA?

充实这一点,这意味着我们希望推送通知,后台同步,网站/应用程序脱机工作,具有某种外观/设计感觉像本机应用程序,并能够在设备上设置屏幕。

这些是我们传统上在网上没有的东西。但是由于新的浏览器支持越来越多的HTML5规范和JavaScript的进步,我们可以开始创建一些这样的功能。总的来说,Progressive Web Apps是:

进步

适用于每个用户,无论浏览器选择如何,因为它们都是以渐进增强为核心原则构建的。

响应

适合任何形状因素:台式机,移动设备,平板电脑或下一步。

连接独立

增强了服务人员脱机或低质量网络的工作。

APP样

通过app风格的交互和导航感觉像用户的应用程序,因为它们是基于app shell模型构建的。

新鲜

由于服务工作者更新过程,始终保持最新状态。

安全

通过HTTPS提供服务以防止窥探并确保内容未被篡改。

发现的

由于W3C清单和服务工作者注册范围允许搜索引擎找到它们,因此可以识别为“应用程序”。

再接合

通过推送通知等功能轻松重新参与。

安装

允许用户在他们的主屏幕上“保留”他们认为最有用的应用,而不会有应用商店的麻烦。

可链接

通过URL轻松共享,无需复杂的安装。

来源:您的第一个渐进式网络应用程序(谷歌

值得花一点时间解开“应用程序”部分。从根本上说,PWA有两个部分:服务工作者(我们将在一分钟内完成)和应用程序shell体系结构。Google将此定义为:

...为用户界面提供支持的最小HTML,CSS和JavaScript。应用程序shell应该:

  1. 加载速度快
  2. 被缓存
  3. 动态显示内容

应用程序shell是可靠性能良好的秘诀。如果您正在构建本机应用程序,请将您的应用程序外壳想象为您要发布到应用程序商店的代码包。这是起步所需的负担,但可能不是全部。它使您的UI保持本地状态,并通过API动态提取内容。
- 使用应用程序外壳架构即时加载Web应用程序

这种加载内容的方法允许令人难以置信的快速感知速度。我们几乎可以立即在用户面前获得看起来像我们网站的内容,而且没有任何内容。然后该页面将获取内容并且一切都很好。显然,如果我们在现实世界中以这种方式实际做事,我们会很快陷入搜索引擎优化问题,但我们稍后也会解决这个问题。

如果那时,进步网络应用程序的核心是一个巧妙的网站,其中包含用于加载内容的额外功能,为什么我们需要一个?

用例

让我清楚之前,我到这一点:对于大多数人来说,PWA是你没有需要。这很重要,它重复,所以我会重复它:

您可能不需要PWA。

原因是大多数网站不需要像应用程序那样行事。这并不是说拥有PWA功能可以带来的东西没有任何好处,但对于许多站点而言,其好处并不会超过目前实现功能所需的时间。

你应该什么时候看看PWA呢?那么,让我们看一下可能表明你确实需要一个东西的清单......

签署PWA可能是合适的

你有:

  1. 定期更新的内容,例如股票行情,快速变化的价格或库存水平,或其他实时数据
  2. 聊天或通信平台,需要实时更新和推送新项目的通知
  3. 观众可能会提取数据然后离线浏览,例如新闻应用或每天发布许多文章的博客
  4. 具有定期更新内容的网站,用户可以每天多次登记
  5. 主要使用支持的浏览器的用户

简而言之,您拥有超越普通网站的东西,具有交互式或时间敏感的组件,或快速发布或更新的内容。一个很好的例子是Google Weather PWA:

如果你正在运行一个普通网站,博客可能每天或每两天更新一次,甚至更少,那么虽然拥有一个充当PWA的网站可能会很好,但你可能会做更多有用的事情与您的业务时间。

他们如何工作

所以,你有一些东西可以从这种功能中受益,但需要知道这些东西是如何工作的。欢迎来到服务工作者的奇迹。

可以将服务工作者视为位于您的网站和浏览器之间的代理。它要求拦截您要求浏览器执行的操作,并劫持返回的响应。这意味着我们可以做一些事情,例如,保存所请求数据的副本,因此当再次询问时,我们可以直接服务它(这称为缓存)。这意味着我们可以获取一次数据,然后重放一千次,而无需再次获取它。可以把它想象成一个录制专辑的音乐家 - 这意味着他们每次想要听音乐时都不必播放音乐会。同样的事情,但网络数据。

如果您想要对服务工作者进行更全面的解释,请查看Jake Archibald从Google 提供的这种中等技术性的演讲。

服务人员可以做什么

服务工作者基本上存在以提供额外的功能,这些功能直到现在才被浏览器使用。这包括以下内容:

  1. 推送通知,用于告知用户发生了某些事情,例如接收新消息,或者他们正在查看的页面已更新
  2. 后台同步,用于在用户未使用页面/站点时更新数据
  3. 离线缓存,允许用户在离线时仍可以访问网站的某些功能的体验
  4. 处理地理定位或其他设备硬件查询数据(例如设备gyrpscope数据)
  5. 用户将很快需要的预取数据,例如页面下方的图像

计划在未来,他们将能够做到比现在更多的事情。但就目前而言,这些是您可以使用的各种功能。显然,一旦应用程序已加载,这些主要通过AJAX加载数据。

SEO的含义是什么?

所以你在Progressive Web Apps上出售。但如果你创建一个,你将如何确保它排名?与任何新的前端技术一样,总会对您的SEO可见性产生影响。但不要惊慌; 您之前遇到的PWA潜在问题已经解决了那些曾经在JavaScript网站上工作过的SEO。有关这方面的入门读物,请参阅JS SEO上的这篇文章。

如果您要拥有一个使用应用程序shell体系结构的站点,则可能会遇到一些问题。首先,非常需要您使用某种形式的JS框架或视图库,如Angular或React。如果是这种情况,你会想看看一些Angular.JS或React SEO咨询。如果你正在使用别的东西,那么简短的版本是你需要在服务器上预渲染页面,然后在你的应用程序加载时拿起它。这使您可以获得这些工具为您提供的所有好东西,同时还可以提供Google等人可以理解的内容。尽管他们最近建议他们擅长渲染这种类型的应用程序,但我们仍然看到大量的例子,当他们抓住沉重的JS东西时,他们肆无忌惮地挥舞着。

假设您处于智能JS前端技术的世界中,为了确保以PWA方式执行操作,您还需要提供使页面与HTML一起工作所需的CSS和JS 。不仅包含script带有<code> src属性的标签,还包括整个文件内联。

显然,这意味着你将增加你发送的网页的大小,但它具有页面将立即加载的意义的好处。不仅如此,随着所有JS(拾取所需)和CSS(需要理解设计)立即交付,浏览器将能够呈现您的内容并提供看起来正确且直接工作的内容。

同样,由于我们将在服务工作人员到达时使用服务工作人员来缓存内容,因此这不会产生太大的影响。我们还可以单独缓存所需的所有CSS和JS外部文件,并从缓存存储中加载它们,而不是每次都获取它们。这确实使得PWA在用户第一次尝试请求您的站点时失败的可能性稍微大一些,但您仍然可以使用错误消息或默认内容优雅地处理此案例,并重新尝试下一页视图。

人们也可能遇到其他潜在问题。例如,华盛顿邮报建立了他们网站的PWA版本,但它只适用于移动设备。显然,这意味着谷歌的移动机器人可以很好地抓取该网站,而不是桌面机器人。重要的是要尊重首字母缩略词的P部分 - 网站应该启用用户可以使用的功能,但仍然以正常方式为那些使用不支持它们的浏览器的人工作。它是关于逐步增强功能,而不是要求人们升级他们的浏览器。

所有这一切中唯一有点棘手的问题是,为了获得最佳体验,您需要为离线优先体验设计应用程序。如何做到这一点在上面的杰克的演讲中被引用。沿着这条路线走的唯一问题是:只有当某人到达您的网站并等待足够长的时间才能加载所有内容时,您才会提供内容。显然,就Google而言,这不会很好。所以这就是我的建议......

而不是仅发送应用程序shell,然后使用AJAX在加载时请求内容,然后选择,而是使用此工作流程:

  1. 用户到达现场
  2. 站点发送回应用程序shell(最小的HTML,JS和CSS,以使一切工作立即),以及...
  3. ...内容AJAX响应,预加载为应用程序的状态
  4. 应用程序立即加载,然后拾取前端。

添加所需的数据意味着,在加载时,我们不必进行AJAX调用来获取所需的初始数据。相反,我们也可以捆绑它,所以我们得到的东西也可以立即呈现内容。

作为一个例子,让我们想一个天气应用程序。现在,基本模型是我们向用户发送所有内容以显示我们应用的基本版本,但不会显示天气是什么的数据。在这个修改过的版本中,我们还发送了今天的天气,但是对于任何后续的数据请求,我们都会通过AJAX调用进入服务器。

这意味着我们仍然提供Google等人可以索引的内容,而我们的AJAX调用失败可能没有问题。从谷歌和用户的角度来看,我们只是提供非常高性能的初始加载,然后注册服务工作者,为每个后续页面提供更快的体验,并可能提供额外的功能。在天气应用的情况下,这可能意味着每天在午夜预取明天的天气,或者通知用户是否会下雨。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly