首页 » 使在离线时也能访问网站的某

使在离线时也能访问网站的某

推送通知,让用户知道发生了某些事情,例如收到新消息,或者他们正在查看的页面已更新。
后台同步,当用户不使用页面/网站时更新数据。
离线缓存,让用户即些功能。
处理地理位置或查询与其他设备硬件相关的数据(例如设备陀螺仪数据)
用户很快就需要预取数据,例如页面底部的图像。
他们计划在未来做得比现在更多。不过现在,这些是您可以使用的功能。显然,一旦应用程序加载完毕,大部分数据就会通过 AJAX 加载。

这对 SEO 有何影响?

因此,您已对渐进式 Web 应用程序感兴趣。但是如果你创建一个,你如何确保它得到评级?与任何新的前端技术一样,它总是会对您的 SEO 可见性产生影响。但不要惊慌;您在使 越南电话号码数据 用 PWA 时可能遇到的问题已经被之前在 JavaScript 密集型网站上工作过的 SEO 解决了。要了解这方面的基础知识,请阅读有关 JS SEO 的这篇文章.

如果您的网站使用应用程序外壳架构

您可能会遇到一些问题。首先,强烈建议您使用某种形式的 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 部分非常重要——网站必须启用用户可以使用的功能,但对于使用不支持这些功能的浏览器的用户仍能正常运行。它是关于逐步扩展功能,而不是要求人们升级他们的浏览器。

所有这一切唯一稍微棘手的事情是,为了获得最佳体验,它要求您首先为离线体验设计您的 使在离线时也  应用程序。如何做到这一点已在上文 Jack 的演讲中提及。采用这种方式的唯一问题是:只有当有人访问你的网站并且等待足够长的时间让所有内容加载时,你才会提供内容。显然,对于谷歌来说,这种方法效果并不好。因此,我的建议是…

不要只发送应用程序 shell,然后使用 AJAX 请求加载时的内容,然后获取它,而是使用以下工作流程:

用户到达站点。

该网站发送回应用程序外壳(至少是 HTML、JS 和 CSS,以使一切立即正常工作),以及…
…内容 AJAX 响应,作为请求的预加载状态
应用程序立即加载它,然后选择前端。
包含所需的数据意味着在加载时,我们不需要进行 AJAX 调用来获取初始数据。相反,我们也可以将其捆绑在一起,这样我们就得到了可以立即提供内容的东西。

滚动至顶部