Facebook PWA：你需要知道的

全球发展最快的社交媒体平台正式加入 PWA 转型。 我们的最新文章将向您介绍一个非常受欢迎的 Facebook PWA 案例研究。

我们将分解为什么 Facebook 需要切换到 PWA，以及 PWA 为这家大型科技公司带来了什么结果。 让我们直接进去吧。

Facebook概述

2004 年，哈佛大学辍学生马克·扎克伯格创立了 Facebook，其使命是建立一个社区，让来自世界各地的人们可以在帖子下联系、分享意见和互动。 剩下的就是历史。

直到今天，Facebook 仍在帮助人们保持联系，从他们的朋友和家人那里获取日常生活更新，并了解世界上正在发生的事情。

它是目前这个星球上最大的社交媒体平台，每月有大约 29.3 亿活跃用户，数据取自 2022 年第一季度。

与具有特定目标群体的 LinkedIn 或 Twitter 不同，Facebook 之所以发展壮大，是因为它不局限于任何群体，而是接触到各种各样的人，满足多种类型的需求和内容，并融合了许多不同的媒体方面。

PWA 在未来的作用

当我们听到 Facebook 推出 PWA 版本的故事时，我们应该对 PWA 了解多少？ 首先，它是关于 PWA 在未来的存在。

这不是是否会的问题，而是网站所有者何时开始集成或构建 PWA 的问题。 因为简单地说，如果 Facebook、Twitter、Uber、Tinder、星巴克、速卖通和阿里巴巴都将 PWA 纳入其数字战略，那一定是一件事。

其次，我们知道 PWA 还是比较新鲜的，所以它的性能相对于原生应用来说可能是落后的。 但 Facebook 95% 的原生功能可以为 PWA 重新创建，开发者对这种转变持乐观态度。

预计将是明天的事情。 几乎任何应用程序都可以内置到 PWA 中。 PWA 功能列表不断扩展到本机应用程序等。

为了让你远离 PWA 周围所有低效的噪音，用流行语和奇怪的说法，这就是它给世界带来的价值。

PWA 的诞生理念是让网络成为一个更好的闲逛场所，使其对重要的人群有意义。

最终用户的日常应用使用习惯有很大的趋势。 大多数人每天最多使用 6 个应用程序，并且每天只与 2-3 个应用程序认真互动。

因此，用户不需要更多的应用程序，因为数据显示他们对应用程序最大的不满是消耗了太多的存储空间。 这就是为什么让用户在一个单一的轻量级平台上闲逛并仍然对他们产生持久影响会使原生应用程序不足。

当用户更喜欢 PWA 时，它可以节省企业和开发人员的精力和资源，以产生有利可图的在线形象。

跨设备拥有一种无缝体验比必须支持 2 个独立的本机应用程序和一个网站更有意义。

此外，即使品牌已经拥有原生应用程序，构建 PWA 仍然有效，只是它更适合大牌。 这将有助于他们在 PWA 首次亮相时吸引所有可能的潜在客户。

Facebook 在 PWA 集成之前的挑战

出乎很多人的意料和欣喜的是，Facebook 在 2020 年停止了开发其移动 Web 应用程序。据说最初的应用程序不够人性化，Facebook 一直在寻找转用 PWA 的机会。

PWA 跨浏览器运行的类似应用程序的体验很快就结束了这两种分裂的情况。 它正在发展势头，近年来成为许多本地应用程序的可行替代方案。

Facebook 还可以看出，该技术正在主导数字领域，尤其是在电子商务领域。 然而，作为一个网络应用程序，PWA 仍然是新的，需要在其功能上做更多的工作。

Facebook PWA 的成果

关于设计

Facebook PWA 和非 PWA 出现在主屏幕上时的标志设计略有调整。 在桌面上，常规的在底部显示一个 Chrome 书签，而 PWA 看起来就像一个原生应用程序图标。

使用非 PWA，您可以获得带有菜单栏和顶部地址的旧的新标签视图。 当您在真实站点出现并开始加载之前看到初始屏幕时，PWA 的体验会有所不同，就像应用程序一样。 它仍然是您设备的浏览器来处理工作，但它的出现方式更像是一个没有顶栏的应用程序。

Facebook PWA 在概览切换器中独立运行，供您继续之前的业务。 除此之外，在内容或布局上没有太多差异。

关于用户体验

• 加载速度：快速流畅
• 页面和元素之间的过渡：响应式即时出现
• 整体体验：简单、直接、快速

构建像 Facebook 一样的 PWA 的 7 个技巧

KISS 原则（保持简单，愚蠢）

移动屏幕比台式机小得多，消耗的数据和电量也少得多。 这意味着开发人员可以使用的内容更少。

因此，请保持简单、必要和有用。 为某些空间留出空间，而不是让它们对你的设计感到不知所措。 进行 A/B 测试以删除不必要的元素，从而降低参与度。

使用复杂的字体会消耗您的网站大量的加载能力，从而减慢进程。 经验法则是尽可能优先考虑默认字体。

Facebook 用老式的 Helvetica 字体解决了这个问题，这样就可以在不丢失品牌标识元素的情况下吸引人们的注意力。

确保顺畅导航

一个好的优先事项是同时避免所有基于 Web 的交互因素，例如页眉或页脚。 在应用程序或移动浏览器上使用 Facebook，您会发现一切都与您期望的一样。

与其使用浏览器功能，不如让它以无边缘模式溢出，并将您的 PWA 与构建原生应用程序一样对待。

尽管触摸手势应该与备用手势一起使用，但它们不一定是需要的，因为它们难以执行。

跨浏览器功能

值得考虑每个浏览器具有 PWA 功能的能力，以在设计阶段评估它们的兼容性。

Chrome 和 Firefox 是最支持 PWA 功能的两个浏览器，而 Safari 仍然拒绝完全支持 PWA 中的 service worker。

这种 PWA 核心技术的缺失导致了推送通知和离线浏览等原始功能的缺失。 你仍然可以在所有 Apple 产品上看到 Facebook PWA，但它不像其他浏览器那样经过优化。

保持离线模式窥探

我们都记得臭名昭著的 Google Dinosaur，它让我们忙得不可开交，并为互联网连接关闭的原因感到高兴。 当内容需要更多时间来加载时，同样的技巧可以在这里应用。

用其他不那么令人沮丧的东西替换加载微调器，让他们忘记负载的东西会让他们认为网站比它更快。

另一个使加载时间看起来更短的重要用途是骨架屏幕，它可以让用户偷看什么和不期待什么，同时引导他们走向页面上的每个兴趣点。 但是，不要忽略 Service Workers，它使您的站点能够存储用户生成的数据并在没有 Internet 连接的情况下正确缓存它们。

优化 SEO

当谷歌更新算法时，搜索引擎要遵循一套新的规则来进行排名。 因此，设计您的页面既要支持机器爬行，又要支持屏幕后面的真实访问者。 每个都应该通过 URL 获得。

没有 PWA 的帮助，Facebook 帖子很难出现在所有搜索引擎上的相关关键字。 他们往往在最高职位上被高度展示。

以下是对 SEO 友好的网站需要注意的几点：

• 初始索引波需要服务器端呈现的内容，并尽可能使用它。 如果不是，您可以依赖第三方提供的动态渲染服务。
• 通过每个页面上的规范标签指定规范 URL。
• 避免被搜索机器人掩盖或提供相同的内容。
• 确保您的网站在 5 秒内快速加载，增加页面停留时间，并且高度安全。

适用于不同类型的输入

如果您打算将触发器设计为具有悬停效果的交互，请确保用户单击或触摸以激活它。 不要忘记使用准确的语义元素和非语义 HTML，你会得到它。

另一件事是让键盘区域远离消息空间，这在 PWA 处于横向视图时很常见。 Facebook PWA 在确保其用户在不同设备上获得准确的交互方面做得非常出色。

使用 Google 的 Lighthouse 工具验证您的 PWA

当您需要在制作过程中或发布后评估 PWA 的性能时，您可以依赖 Google 的开源工具审计网站 Lighthouse。 Lighthouse 根据 1 到 100 的 5 个参数对网站进行排名。

大牌总是在开发过程中进行测试，以确保涵盖所有内容。 PWA 也是一个用来分类网站是否是 PWA 的因素。

当确定时，PWA 将在速度、安全性、响应式设计、缓存、离线性能、索引、推送通知和用户体验等各个方面进行衡量。

关键要点

为了发挥两全其美，在网站上采用最好的原生应用程序，从而使 PWA 在不久的将来具有巨大的优势。 在线环境的未来会影响 PWA 的影响。

Facebook PWA 的开创性作用无疑加速了 PWA 革命，同时为他们带来了轻量级的体验和强大的平台，供全球用户加入对话，尽管互联网连接能力存在差异。

如果您正在寻找一个能够让您充分感受到可靠性以帮助您完成 PWA 转换的专家名称，那么 Tigren 就是您所需要的。

立即与我们联系，以合理的价格为您提供优质优质的电子商务 PWA 服务。 立即开始赚钱并提高您的投资回报率。