渐进式网络应用程序对网站SEO的影响

渐进式网络应用程序？啊，是的，Google希望您相信的这些东西是Gandhi和Dumbledore的结合，来拯救世界免遭痛苦的缓慢网站的折磨，它简称为PWA。但是，什么才是真正的PWA？你应该有一个吗？如果创建一个，如何确定其排名？好吧，继续阅读以了解…

什么是PWA？

鉴于Google想出了这个词，我想我们应该从他们的定义开始：“渐进式网络应用程序使用现代网络功能来提供类似应用程序的用户体验。”

渐进式Web应用

PWA真正令人兴奋的事情是：它们可以减少应用程序开发的必要性。您的移动网站成为您的应用程序。与Builtvisible的一些同事交谈时，这似乎是一个有趣的讨论点：品牌是否需要应用程序，网站或PWA？

稍微充实一下，这意味着我们期望诸如推送通知，后台同步，站点或应用程序脱机工作，外观或设计看起来像本地应用程序之类的东西，并能够在设备主页上进行屏幕设置。

这些都是我们传统上无法在网络上获得的东西。但是，由于新的浏览器支持越来越多的HTML5规范以及JauaScript的进步，我们可以开始创建其中一些功能。总体而言，渐进式网络应用程序包括：

进步

无论用户选择哪种浏览器，它都可以为每个用户工作，因为它们以渐进增强为核心宗旨。

反应灵敏

适合任何尺寸：台式机，移动设备，平板电脑或其他新产品。

连通性

服务人员可以脱机工作或在低质量的网络上进行增强。

类似于应用

通过应用程序风格的交互和菜单，用户感觉就像一个应用程序，因为它们是基于应用程序外壳模型构建的。

新鲜

由于服务人员的更新过程，始终保持最新状态。

安全

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

可被发现

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

可重新接合

通过推送通知等功能使重新参与变得容易。

可安装

允许用户在主屏幕上“保留”他们认为最有用的应用程序，而无需麻烦应用程序商店。

可链接的

通过URL轻松共享，不需要复杂的安装。

值得花一些时间来解压缩其中类似“应用程序”的部分。从根本上讲，PWA有两个部分：服务工作者（我们将在稍后讨论）和应用程序外壳体系结构。Google将其定义为：…支持用户界面的最小HTML，CSS和JauaScript。应用程序外壳程序应：

• 快速加载
• 被缓存
• 动态显示内容

应用程序外壳是可靠良好性能的秘诀。如果您要构建本机应用程序，则可以将您的应用程序外壳视为发布到应用程序商店的代码束。这是起步所需的负载，但可能并非全部。它使您的UI保持本地状态，并通过API动态提取内容。
– 使用应用程序外壳架构即时加载Web应用程序

这种加载内容的方法可实现令人难以置信的快速感知速度。我们能够几乎在没有任何内容的情况下立即在用户面前获得类似于我们网站的内容。然后页面将转到并获取内容，一切顺利。显然，如果我们实际上是在现实世界中以这种方式进行操作，那么我们会很快遇到SEO问题，但我们稍后也会解决。

如果这样，渐进式网络应用程序的核心只是一个以巧妙的方式提供服务的网站，它具有用于加载内容的额外功能，为什么我们要一个？

用例

让我先说清楚，对于大多数人来说，PWA是您不需要的。这很重要，几乎不会重复，因此我将重复一下：

您可能不需要PWA。这样做的原因是，大多数网站都不需要表现得像应用程序。这并不是说拥有PWA功能可以带来的好处没有任何好处，但是对于许多站点而言，好处并没有超过目前实现该功能所花费的时间。那你什么时候应该看好PWA？好吧，让我们看一下可能表明您确实需要一个东西的清单。

签署PWA可能是适当的

你有：

• 定期更新的内容，例如股票行情，快速变化的价格或库存水平或其他实时数据
• 聊天或通讯平台，需要实时更新并推送有关新项目的通知
• 受众可能会拉取数据，然后脱机浏览数据，例如新闻应用程序或每天发布许多文章的博客
• 一个具有定期更新内容的网站，用户每天可以登录几次
• 主要使用受支持的浏览器的用户

简而言之，您拥有的内容超出了普通网站，它具有交互式或对时间敏感的组件，或者快速发布或更新的内容。Google Weather PWA是一个很好的例子：

如果您运行的是普通网站，而博客可能每天或每两天更新一次，甚至更新频率较低，那么虽然可以将网站用作PWA 可能会很好，但是您可以做些更有用的事情在您的业务时间。

他们如何工作

因此，您可以从此类功能中受益，但是需要了解这些功能的工作原理。欢迎了解服务人员的奇迹。可以将服务人员视为位于您的网站和浏览器之间的代理。它要求拦截您要求浏览器执行的操作，并劫持返回的响应。这意味着我们可以做一些事情，例如持有请求的数据的副本，因此当再次请求它时，我们可以直接将其提供服务（这称为缓存）。这意味着我们可以一次获取数据，然后重播一千次，而不必再次获取。可以将它想像成是录制专辑的音乐家-这意味着他们不必在每次想听音乐的时候都去听音乐会。一样，但是必须带有网络数据。

服务人员可以做什么

根本上，服务人员存在于提供额外功能的地方，这些功能直到现在为止还不为浏览器所用。这些包括：

• 推送通知，用于告诉用户发生了什么事情，例如收到新消息，或者他们正在查看的页面已更新
• 后台同步，用于在用户不使用页面/站点时更新数据
• 脱机缓存，以提供一种体验，使用户在脱机时仍可以访问网站的某些功能
• 处理地理位置或其他设备硬件查询数据（例如设备陀螺仪数据）
• 用户即将需要的预取数据，例如页面下的图像

计划在将来，他们将能够做的比现在更多。目前，这些都是您可以使用的功能。显然，一旦应用程序已经加载，这些大多数都是通过AJAX加载数据的。

网站SEO的含义是什么？

因此，您在Progressive Web Apps上被出售。但是，如果您创建一个，您将如何确保其排名？与任何新的前端技术一样，您的SEO可见性始终会受到影响。但是不要惊慌。在使用大量JauaScript的网站上工作的SEO之前已经解决了PWA可能遇到的潜在问题。

如果您要拥有一个使用应用程序外壳体系结构的网站，可能会遇到一些问题。首先，非常需要使用某种形式的JS框架或视图库，例如Angular或React。如果是这样，您将要看一些Angular.JS或React SEO建议。如果您使用的是其他版本，则简短的版本是您需要在服务器上预渲染页面，然后在应用程序加载时进行拾取。这样一来，您就可以拥有这些工具所提供的所有好处，同时还可以提供Google等人可以理解的功能。尽管他们最近提出建议，他们擅长于呈现此类应用程序，但当他们抓取大量JS内容时，我们仍然看到大量示例，其中无处不在。

假设您身处聪明的JS前端技术领域，要确保以PWA方式进行操作，还需要提供使页面与HTML一起工作所需的CSS和JS 。不仅包括script带有<code> src属性的标签，还包括整个文件的内联。

显然，这意味着您将要增加通过有线发送的页面的大小，但这意味着页面将立即加载。但是，不仅如此，在立即交付所有JS（需要提取）和CSS（需要理解设计）的情况下，浏览器将能够呈现您的内容并交付看起来正确且可以直接使用的内容。

同样，由于一旦到达内容，我们将使用服务工作者来缓存内容，因此这不会产生太大影响。我们还可以分别缓存所有需要的CSS和JS外部文件，并从缓存存储区加载它们，而不是每次都提取它们。这确实使PWA在用户第一次尝试请求您的站点时失败的可能性要高得多，但是您仍然可以通过错误消息或默认内容来优雅地处理此情况，然后在下一页重试视图。

人们还可能遇到其他潜在问题。例如，《华盛顿邮报》为其网站构建了PWA版本，但仅在移动设备上有效。显然，这意味着该网站可以通过Google的移动机器人很好地进行爬网，而不能通过桌面机器人进行爬网。尊重首字母缩略词的P部分很重要-网站应启用用户可以使用的功能，但对于使用不支持它们的浏览器的用户而言，仍可以正常使用。这是关于逐步增强功能，而不是要求人们升级其浏览器。

所有这一切中唯一有点棘手的事情是，为了获得最佳体验，您需要为脱机优先体验设计应用程序。上面的Jake演讲中提到了如何做到这一点。沿着这条路线走的唯一问题是：只有当有人到达您的网站并等待足够长的时间来加载所有内容时，您才提供内容。显然，对于Google来说，效果不佳。所以这就是我的建议…

与其发送应用程序外壳，然后使用AJAX请求加载内容，然后进行提取，不如使用此工作流程：

• 用户到达现场
• 网站发送回应用程序外壳程序（使所有内容立即可用的最小HTML，JS和CSS），以及…
• …内容AJAX响应，已预先加载为应用程序的状态
• 应用程序立即加载该文件，然后拾取前端。

添加所需的数据意味着在加载时，我们不必进行AJAX调用即可获取所需的初始数据。相反，我们也可以将其捆绑在一起，这样我们就可以获得可以立即呈现内容的内容。

例如，让我们考虑一个天气应用程序。现在，基本模型将是我们向用户发送所有内容以显示应用程序的基本版本，而不是向用户发送表示天气情况的数据。在此修改后的版本中，我们还发送今天的天气情况，但是对于任何后续数据请求，我们随后通过AJAX调用转到服务器。

这意味着我们仍然可以提供Google等可以索引的内容，而不会因AJAX调用失败而引起问题。从Google和用户的角度来看，我们只是提供了非常高性能的初始负载，然后注册服务工作者以为每个后续页面和可能的附加功能提供更快的体验。在使用天气应用程序的情况下，例如，这可能意味着每天在午夜预先获取明天的天气，或者通知用户是否要下雨。