Twitter PWA：你需要知道的

顶级公司与小公司之间的技术差距从未如此紧密。 随着进步的网络应用程序，最大的贡献者之一是财务能力已大大降低。 通过应用 Web 应用程序技术的新的和先进的使用，深刻地提到服务工作者，各种规模的公司都可以根据自己的功能需求和预算调整 PWA。 如果你正在从世界上伟大的 PWA 采用中寻找灵感，那么Twitter PWA上的以下案例研究是你不能错过的。

PWA 集成之前 Twitter 的故事

2017 年 4 月，与 Google 合作推出了其网站在移动浏览器上的新改进 Twitter Lite。 这个名字来源于它被建造得更轻、更快捷、更实用的事实。

快进到今天，Twitter 是美国第三大最受欢迎的社交媒体网站，也是全球第 15 大最受欢迎的社交媒体网站。 尽管他们的大部分用户人口都在美国，但日本和印度是 Twitter 用户的两个最大代表，加起来超过了美国用户的数量。

Twitter Lite 的故事要追溯到 2010 年到 2017 年，Twitter 正在成为世界顶级社交媒体网站。

与早期他们最大的竞争对手 Facebook 相比，Twitter 的起步并不顺利。 然而，从 2010 年起，蓝鸟在图表上见证了一个美妙的景象，一个季度一个季度的持续增长。 2015年、2016年和2017年，增速放缓。

认识到美国以外的潜力后，Twitter 迅速进入国际市场。

Google 推出 PWA 后，Twitter 就知道如何扩展和获取新用户。 Twitter Lite 是他们的最终答案，专门针对网络连接不可靠的新兴国家。 新的 Twitter PWA 在使用优化的数据保护模式执行时占用不到一兆字节的存储空间。 模糊预览中的图像和视频，直到用户点击它们。

谷歌 Twitter Lite 工程主管 Nicolas Gallagher 表示：“Twitter Lite 现在是使用 Twitter 最快、最便宜、最可靠的方式。” Twitter Lite 的成功成为许多有关 PWA 的文章的头条新闻。

世界上最大的 PWA 的解决方案 – Twitter PWA

为了帮助您了解 PWA 开发的实践知识，以下将提供有关 Twitter PWA 或 Twitter Lite 框架的关键点，以及为按需请求定制的创新方法。

请注意，Twitter Lite 的整个目标是确保用户拥有出色的现场体验，无论互联网连接状况如何，从而导致后续访问并将访问者转化为常客。 由于 PWA 能够提高速度、可靠性和安全性，您可以在 mobile.twitter.com 上体验它。

建筑理念

Twitter Lite 的核心是一个简单、大小适中的 Node.js 服务器和客户端 JavaScript 应用程序。 PWA 将支持构建用于数据缓存和存储的 API。 服务器将首先处理身份验证过程，组装应用程序的最早状态，并通过应用程序外壳中的初始 HTML 呈现将 Web 代码转换为交互式页面。

在后台加载后，将直接从 Twitter API 请求数据。 这种架构的简单性有助于 Twitter PWA 在效率方面带来出色且可靠的服务，即使在规模上也是如此。

设计性能

易于使用是 Twitter Lite 的首要任务之一。 每个月都会有数百万甚至数亿用户访问这个社交网络。 因此，他们希望创建一个在任何连接情况下都高度可用的用户旅程。

开发人员利用一系列增量性能杠杆，PRPL 模式，结合现代浏览器的最新更新，构建 Service Worker、Web 推送通知、IndexedDB 和 Web 应用安装横幅。 它们都是令人印象深刻的加载速度和独立于连接的一部分。

数据的使用

依靠缓存资源预先提供较小的数据，再加上数据保存模式，Twitter Lite 天生就被设置为最大限度地减少数据的使用，导致时间轴页面减少 40%。 为了按需加载优化的图像，执行 HEAD 请求以通过单击按钮显示其大小。

渐进式加载

在将初始 HTML 响应注入浏览器后，发送指令以预加载关键资源，以供服务器组装交互状态。 使用 webpack 将脚本分解成细小块，以便仅在被要求时加载。

换句话说，来自 Twitter Lite 的初始加载非常快，因为只执行可见视图的必要性，而服务工作者将预缓存额外的资源，以实现几乎即时的外观和未来交互的平滑过渡。

离线可用性

就像它的本机应用程序一样，Service Worker 使临时离线使用成为可能。 通过 HTML 应用程序外壳中的缓存、静态资产和一些最常见的表情符号，所有以前加载的页面都会立即重新打开。

当数据或脚本加载失败时，会提供“重试”按钮，以确保问题得到解决。 只需启用离线浏览，启动和后续访问的加载速度都会大大提高。

渲染

忘记昂贵的渲染工作； Twitter Lite 针对组件渲染进行了优化。 然而，更大的问题在于推文的复杂性以及对额外性能的无限要求列表。

然后他们想到了一个虚拟化列表组件，它只呈现对上面显示的视图可见的内容，并保留用于跨屏幕滚动。 另一个更新是通过将非关键渲染推迟到非活动模式并通过 requestIdleCallback API 节省数据消耗。

系统和倍速

Twitter Lite 是一个基于组件详细信息构建的响应式设计系统，以使应用程序符合任何形状请求。 使用 UI 组件为快速迭代和重用已建立的构建块腾出了空间。 还值得一提的是，布局设计严重依赖 flexbox，在颜色、字体大小和长度上固定的数量有限。

Twitter PWA 的结果

移动和桌面网站

Twitter PWA 据称可以在 5 秒及以下的时间内在大多数具有 3G 网络的设备上进行交互。 Lite 版本的加载速度提高了 30%，并节省了高达 70% 的数据使用量，同时将交互延迟时间减少了 25% 以上。

与旧的原生应用程序相比，Twitter PWA 最多只占用 3% 的大小，只是设备存储空间的一小部分。 然而，它的作用深远而强大。 时间线是最复杂的功能之一，可以从有限的 30 行代码配置行构建，同时将 Redux 模块附加到 React 组件，混合内容。

PWA 的工作方式与本机应用程序非常相似，具有常规提要、推送通知弹出窗口、直接消息传递和搜索选项卡等标准功能。 过渡是跨页面和元素的响应，尽管触摸响应明显比其本机应用程序慢。 开发人员仍在努力提高未来版本的可用性和责任感。

与 Mac 和 Windows 中旧的被忽视的 Twitter 官方应用程序相比，桌面版本的一切都非常有利，在狭窄的窗口中运行良好。 整个体验感觉相对轻巧且使用起来轻松。

Twitter Lite 目前支持多达 42 种语言，并创建了 Globalize 功能以显示适合当地人的数字、日期和消息。

数字结果

• 每个会话的页面增加 65%
• 发送的推文数量增加 75%
• 跳出率降低 20%

Twitter PWA 如何成为最快的 PWA 之一？

随着服务工作者现有知识的功能调整，以及减少数据消耗的优化，PWA 被硬连线以处理更快的加载速度，并且在后续访问中几乎立即出现，无论是开始还是在旅程中。

优化速度不会在一两天内完成，而是一个重复的测试、跟踪、测量、试图了解它发生的原因以及应用可能的解决方案的过程。 绩效工作是一个不断观察、衡量和改进的恶性循环。

话虽如此，Twitter Lite 是对首页加载、React 组件渲染、防止重新渲染等方面的小改进和更新的积累。 每个都迎合了整体性能的提升，以及我们现在看到的所有微小的努力，这是世界上最大和最快的 PWA 采用之一。

当然，为了保持这个头衔，开发人员必须不断努力确保一切都在控制之中，并在有机会的情况下将流程改进为更好的东西。

关于 Twitter PWA 和 PWA 的常见问题

Twitter 是 PWA 吗？

绝对地。 Twitter 于 2017 年与 Google 开发人员合作发布了新的渐进式网络应用程序版本。Twitter PWA 被命名为 Twitter Lite，其构建的重点是为与美国相比可能经常遇到不稳定连接的国际用户提供服务。

构建一个像 Twitter PWA 这样的 PWA 成本高吗？

Twitter PWA 据说是所有 Twitter 官方中最便宜的版本，但在不同的浏览器中表现出色，甚至类似于本机应用程序的一些最强大的功能。

Twitter PWA 结合了卓越的性能优化和 PWA 的现代技术的世界级应用。 话虽如此，构建像 Twitter Lite 这样出色的 PWA 在很大程度上取决于您雇用或外包给的开发团队。

PWA 是原生应用程序的最佳替代方案，并普遍预测了网站的未来。 因此，如果在线企业正在寻找一种通过改善现场客户旅程来利用其转化率的方法，请放弃重量级且价格昂贵的原生应用程序，转而寻找 PWA。

从哪里开始您的业务的 PWA 开发？

嗯，这一切都应该从您的业务所在、它需要什么以及您希望它在哪里开始。 说得通？ 因为您不想在无关紧要的事情上浪费金钱和宝贵的时间，对吧？

下一个关键步骤是确定 PWA 是否适合您的业务战略。 几乎每个人都在寻找增加网站流量、提高转化率或利用其单位价值的方法。 PWA 开发机构可以帮助您解决所有这些问题。

他们可以帮助您在站点上可能存在的任何低性能区域中检测问题。 如果您无法找到最佳解决方案，请联系咨询或检查服务。

这就是我们到达以下步骤的时候：选择一个可靠的 PWA 开发服务提供商。 您需要一个拥有多年专业知识的名字，吸引一个充满活力的开发人员团队，为他们的客户争取最好的服务，当然，还需要创建功能强大且功能丰富的 PWA 所需的出色知识和技能。

Tigren 是世界领先的外包机构，在过去十年中受到全球数千家中小企业的信赖。 我们是一支由年轻、有抱负和敬业的个人组成的团队，他们从各自行业的顶尖成就者中挑选出来。

我们专注于电子商务开发，尤其是 Magento 和 PWA 开发服务。 我们希望为您带来您在其他地方找不到的最优惠的价格，帮助您直到最后，实现您来找我们的目标。

如果您需要有效且具有成本效益的解决方案，您可以信赖我们：

• 从头开始完全电子商务 PWA 开发
• 部分电子商务 PWA 开发
• 现有电子商务 PWA 的内置解决方案和改进
• 高级即用型电子商务 PWA 主题/插件/扩展

关键要点

新的 Twitter PWA 为沉闷且反应迟钝的移动网络世界带来了新鲜空气。 Twitter 和谷歌之间强大的合作伙伴关系以变革性的采用而声名鹊起，打破了对 PWA 潜力的所有担忧和怀疑。 成为成功的 PWA 早期采用者，开始呵护您的在线用户，并在为时已晚之前通过 Tigren 推动您的投资回报率的提高。