Reddit PWA：领先的社交媒体如何利用 Web 应用程序

采用新技术是在线业务创新和增长的必然部分。 一般来说，大公司可以轻松体验最新的小工具，提高客户满意度并在竞争中脱颖而出。 PWA 将是下一件大事，被 Reddit PWA、Facebook PWA 和阿里巴巴 PWA 等众多大品牌采用。

话虽如此，PWA 被视为现代网站的新标准，也是取代原生应用程序的有希望的参与者。 然而，对于小型和新兴企业来说，它是令人难以置信的负担得起的。 在今天的案例研究中，我们将首先深入了解 Reddit PWA，看看这个流行的社交媒体网站如何利用 PWA。

Reddit 概览

Reddit 由弗吉尼亚大学的 Steve Huffman 和 Alexis Ohanian 于 2005 年创立。 当其他人想分享一个故事时，它的名字是对“我读过它”的回应的一种调整。

这是一个庞大的平台，用户可以在其中提交各种内容类型的帖子，即社交新闻、论坛讨论、网络内容或聚集网络。 这是 Reddit 受欢迎的部分原因，它是几乎所有学习领域的知识讨论的累积来源。

此外，Reddit 允许人们在提出任何问题时保持匿名，从而为开放和令人兴奋的体验腾出空间来浏览他们大脑渴望的任何信息。

Reddit 帖子由社区决定。 只有当用户根据他们认为有用的方式对其进行投票时，才能将帖子或 subreddit 上移。 通过这种方式，可以减少垃圾邮件或有害、误导性信息。

他们的主要目标受众是 18-29 岁的大学本科生、精通互联网的研究员和社交媒体倡导者。 他们在美国排名第 10 位最受欢迎的社交网络，每月活跃用户近 4800 万，全球每月活跃用户超过 4.3 亿。

整合 PWA 如何帮助品牌提升成就

加速用户体验

许多品牌使用 PWA 来提高其应用的加载速度。 以 Uber PWA 为例。 知道他们的客户（大部分时间）都在匆忙使用 Uber，他们创建了一个小巧但功能强大的 Uber PWA，即使在低至 2G 的连接下也可以在 3 秒内加载。

加快用户旅程将降低跳出率，从而提高潜在转化率。 现在的人们经常将加载缓慢的页面视为观看一部他们随时会退出的令人讨厌的电影。

沃尔玛还发现，加载时间仅提高 1 秒，转化率已经提高了 2%。

增加客户价值

PWA 不仅可以帮助您改善首页加载，还可以在页面和元素之间创建平滑、无缝的过渡。 换句话说，现场用户体验也将是愉快的。

对于电子商务商店和市场，客户在页面上停留的时间越长，就意味着他们对所提供的商品感兴趣。 与此同时，那些倾向于批量购物的人发现购物之旅既轻松又快捷。

PWA 可以在关键时刻启用推送通知，从而重新与频繁用户联系以进行互动，从而为在线业务带来更多价值。

模糊在线 - 离线距离

凭借离线工作的能力，PWA 允许用户通过浏览加载的页面来继续他们未完成的在线旅程。

他们还可以对内容进行更改，并且所有内容都将保存在后台，以便在重新应用连接时进行最接近的同步。

所有设备行为相同

小型企业可以为其他基本投资分配预算，同时节省 PWA 集成成本。

只需为任何设备构建一个快速应用程序，就可以在所有在线状态上保持一致的性能，并最大限度地利用时间和资源来吸引和获取客户。

这就是成长中的企业可以有效地增加收入的方式。

PWA 集成之前 Reddit 的挑战

Reddit 一直想要一个解决方案来鼓励其用户使用该应用程序，尤其是通过桌面。 他们一直在寻找一种方法，让用户几乎可以毫不费力地切换到应用程序。

数据显示，使用应用程序的最大缺点之一是消耗过多的存储空间。 相比之下，PWA 安装需要不到 1MB。

此外，Reddit 的下载过程因其庞大的数量而被视为时间杀手。 一些 Reddit 线程表示，没有看到 Reddit 更早地在 PWA 上工作并优化功能令人惊讶。

Reddit PWA 的成果

关于设计

尽管 PWA 跨平台保持相同的外观和感觉，但每个浏览器支持它的方式不同。 三点菜单使使用 Chrome 而不是 Microsoft Edge 从 Web 安装或卸载 PWA 变得更简单。

“将应用程序安装到主屏幕”等弹出标志被认为是用户友好的，并且是鼓励访问者使用应用程序的必备条件。

关于功能

• 加载速度：高效快速流畅
• 页面和元素之间的过渡：无缝且响应迅速，即时出现的元素
• 易于导航：典型的下拉式内容布局，带有后展开悬停效果，熟悉、直观、轻松
• 每次互动的参与度：总体令人满意。 Reddit 徽标显示以供加载内容稍后立即出现的方式使网站看起来运行得更快

如何构建像 Reddit 一样的 PWA？

Reddit PWA 的提示

确保满足 PWA 核心要求。 它应该快速启动，但在整个用户旅程中保持快速。 Reddit PWA 从第一次加载就显示出惊人的速度，所有内容在您滚动时立即显示，确保响应式用户体验。

仅在 iOS 上，Apple 不支持重新参与功能，例如弹出消息和 PWA 安装通知。

如果您想练习高级开发以获得最佳功能，请知道 PWA 是基于最佳实践和现代 Web API 构建的。 根据您的业务优先级和特定需求，这些可以独立或组合应用。

Reddit PWA 专注于首先提高速度，其他一切紧随其后。 这就像说，“嘿，看看我们的移动应用程序的性能有多好，想象一下，如果你下载该应用程序会得到什么。” 请注意，在访问者滚动浏览后，Reddit 会启用俯卧撑来鼓励用户切换到应用程序。

为了使您的网站具有现代边缘外观并充分发挥 PWA 的潜力，Google 鼓励优先考虑敏捷策略，即逐个启动功能并查看组合是否适合您。

这种观点可以让你一步一步地坚持市场反应。 分析跟踪数据可以了解用户最喜欢使用哪些功能以及哪些功能没有为他们带来价值。

这些输入对于网页设计师和开发人员进行相应的调整至关重要。 保持试错过程，直到您执行正确的过程，以帮助您扩大 PWA 产生的额外资金。

PWA 开发的简单介绍

配置

创建 app 目录并在此处填写 js、CSS 和 images 子目录。

为应用程序界面编写标记

在这一步，无论是否禁用 JavaScript，PWA 都应该能够显示内容。 这样，无论何时连接中断或滞后，用户都不会面临令人不安的空白页面。

相反，所有交互都应该是响应式的并在各种屏幕上正确显示。 这需要考虑移动友好的方向。

测试应用程序

一旦您在浏览器中进行了操作，您就可以使用 Google 的 Lighthouse 对其进行测试，看看它对 PWA 标准的执行情况如何。

按 F12 在您的公共站点上打开 Chrome 的开发人员面板，找到审核选项卡，然后单击 Lighthouse。

服务工作者

作为一个相对独立的 Web 脚本，除了用户交互之外在后台运行，这种强大的能力使 PWA 能够拦截网络请求、启用本地缓存等。

应用清单

Service Worker 需要应用清单来确定 PWA 在主屏幕上的外观和行为。 您可以设置名称、图标、主题颜色和应用程序的方向。

包起来

在此阶段之前，代码已完成，但您需要将应用程序上传到 Web 服务器。 这将使您的 PWA 能够在 HTTPS 的安全性下运行。

Tigren 的电子商务高级 PWA 开发

我们的专长

作为拥有十年历史的专业 Magento 服务提供商，Tigren 现在是全球顶级外包机构之一。

这一切都始于一个由训练有素、技术娴熟、敬业的开发人员组成的小团队，他们努力实现客户的目标。 时至今日，我们已经为全球 800 多家中小企业执行了 1000 多个项目。

总部设在越南，我们希望以合理且实惠的价格为尽可能多的有抱负的企业主提供他们应得的世界级 Magento 电子商务项目。

我们的服务

我们是 Magento 的专业机构，旨在为中小企业带来可持续增长的解决方案。 通过 PWA，我们提供以下 2 项优质服务：

• 自定义渐进式 Web 应用程序开发
• 高级 Tigren PWA 模板

关键要点

PWA 是本机应用程序和常规网站的正确组合，可为最终用户带来真正的价值。

专家预测它将成为数字世界的下一件大事，尤其是电子商务。 希望通过学习这个 Reddit PWA 案例研究，您将了解如何创新网站以帮助您的客户，并可能成为 PWA 的早期采用者之一。