如何使用 React 创建渐进式 Web 应用程序

渐进式 Web 应用程序是什么意思？

PWA 开发基础

React 非常适合 PWA 开发的 5 个优势

如何使用 React 创建 PWA？

结论

本文最初发表于Codica Blog。

史蒂夫·乔布斯早在 2007 年就提出了渐进式 Web 应用的概念。他将其视为 iPhone 应用的典范。然而，当时科技界对 Web 应用并没有表现出太大的兴趣。

2015年，渐进式Web应用程序（简称PWA）再次被提起。谷歌、微软等科技巨头开始推广这项创新技术。很快，Twitter、AliExpress、星巴克和Flipkart也纷纷效仿。借助PWA，知名品牌得以提升其在线影响力。

在 Codica，我们从事 PWA 开发已有数年。我们在该领域的丰富经验使我们能够创建一份详尽的指南，您将在下面找到这份指南。它将向您展示如何使用 React 创建渐进式 Web 应用程序。

渐进式 Web 应用程序是什么意思？

简而言之，PWA 是一种吸收了原生应用程序和 Web 应用程序优点的 Web 应用程序。

一方面，它提供了离线模式、地理位置访问、推送通知以及添加到主屏幕的功能。以前，我们只能在原生应用中看到这些功能。另一方面，PWA 的功能与任何常规网站一样。

PWA 技术的一大优势在于其拥有庞大的 Web 开发工具和框架生态系统。此外，现在您只需一个跨平台应用程序即可。因此，其部署和维护将变得更加轻松快捷。

下面您可以看到 Pinterest 构建的适用于移动和桌面设备的 PWA：

要了解有关 PWAs 与移动应用程序有何不同的更多信息，请阅读我们的文章PWAs 与原生应用程序。

您可能想知道如何安装渐进式 Web 应用。步骤如下：

如果您是智能手机用户，您需要找到“添加到主屏幕”按钮（检查网站或浏览器设置提供的通知）。

如果您使用桌面，请转到地址栏并单击右侧的安装按钮。

PWA 开发基础

那么，是什么让渐进式 Web 应用程序如此强大呢？为了回答这个问题，让我们仔细看看其核心技术。这些技术如下：

服务人员

Service Worker 是浏​​览器在后台处理的代码，用于确保 Web 应用程序在离线模式下正常工作。该组件负责缓存和使用缓存文件，从而提供无缝的用户体验。

Web 清单

Web 应用清单本质上是一个 JSON 文件，它定义了你的渐进式 Web 应用的外观。你可以借助它指定应用描述、图标版本、主题颜色和启动样式。

应用程序外壳

这是 PWA 的关键要素，它使快速的性能成为可能。此外，它对于具有动态内容和固定导航的渐进式 Web 应用至关重要。

React 非常适合 PWA 开发的 5 个优势

React 是一个著名的 JavaScript 开源库。它由 Facebook 的 Jordan Walke 于 2013 年创建，旨在以简单、快速且可扩展的方式构建用户界面。

借助 React，可以构建支持热重载的大型 Web 应用程序。当你需要调整UI 功能时，此功能至关重要。

目前该库由 Facebook 团队维护并在其产品中实现，例如 Instagram。

让我们讨论一下 React 的主要优势，这些优势使其成为构建 PWA 的正确技术。

高性能

React 非常适合构建健壮且可扩展的 Web 应用。它还能避免性能问题。该库使用虚拟文档对象模型 (DOM) 来更改 UI，而无需重新绘制整个页面。因此，渲染问题得以消除。此外，使用 React，开发人员可以在虚拟内存中更改页面。他们不再需要使用代码繁重的引导库（例如 JQuery）。

易于学习

与 Angular 或 Ember 等 JS 框架相比，React 更容易学习。该库支持 JSX。这种语法扩展使程序员能够在 JavaScript 代码中编写类似 HTML 的语法。然而，这并非强制性的。开发人员可以使用纯 JavaScript、HTML 和 CSS 来代替。

设备齐全

React 附带多个开发者工具和库。这些工具旨在简化调试、测试和设计流程。开发者不再局限于单一选项，他们可以选择更适合特定任务的解决方案。最著名的工具包括 Semantic UI React、Ant Design 和 React Developer Tools。

SEO友好

说到 SEO，我们首先想到的问题是 Web 渲染服务在处理大型 Web 应用时出现故障。简而言之，你的网站某些部分无法显示在 Google 搜索结果中。然而，使用虚拟 DOM 后，这不再是问题。它确保你的内容在基于 React 的网页上被正确索引。

社区支持

目前，React 是 Github 上第五个经常被 Star 的开源项目。该库以其强大且负责任的社区而闻名。他们的口号是“帮助我们推动 Web 发展，参与其中”，这并非偶然。

如何使用 React 创建 PWA？

我们已经讨论了 React JavaScript 库的主要优点。现在是时候进入本文最有价值的部分了。

下面您将看到一份关于 PWA 开发的详尽指南。通过本手册，您将能够构建您的第一个 React 渐进式 Web 应用程序。

步骤 1：构建一个简单的 React 应用

我们将使用前面提到的Create React App （简称 CRA）工具。它是一个便捷的环境，尤其适用于从未使用 React 创建过 PWA 的用户。借助它，您可以使用内置Babel和webpack 的最新 JavaScript 功能。正因如此，您无需再为将应用程序发布到浏览器所需的打包和转译工作操心。

使用 CRA，您可以使用需要在终端上运行的以下命令来安装和引导您的应用程序：

npx create-react-app cra-pwa --template cra-template-pwa

这里，npx 是一个用于运行包的命令行工具npm。命令create-react-appcra-pwa 会创建一个名为“cra-pwa”的应用。只需几秒钟，你就会在 cra-pwa 目录中得到一个基本的 React 应用。

--template cra-template-pwa需要添加此参数，因为自 CRA 4 版本以来，该工具不再提供内置的 Service Worker。而上述参数会创建一个带有 Service Worker 的应用程序。

以下命令将导航到该目录：

cd cra-pwa

初始文件夹结构如下：

如果您需要在开发模式下运行应用程序，请输入以下命令：

npm start

您也可以在浏览器中打开http://localhost:3000进行查看。

步骤 2：安装 Service Worker

因此，CRA 为您提供了使用 React 构建渐进式 Web 应用的所有工具。您的主要任务之一是使 React PWA 可离线运行。为此，您需要配置自动生成的 Service Worker 文件，或者换句话说，注册它。

在index.js你新建的项目目录中，你需要打开它并找到以下代码片段：

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

如您所见，serviceWorker尚未注册。您的下一个任务是将调用更改unregister()为register()。

步骤 3：配置 Web 应用清单

让我们继续为你的 PWA 设置 Web 应用清单。它位于目录manifest.json中的文件中public。现在你需要编辑负责应用外观的元数据。

创建后，您的清单文件将如下所示：

{
 "short_name": "cra-pwa",
 "name": "cra-pwa",
 "icons": [
   {
       "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
   },
   {
       "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
   }
 ],
 "start_url": "/",
 "theme_color": "#F4BD42",
 "background_color": "#2B2929",
 "display": "standalone",
 "scope": "/"
}

现在我们来讨论一下主要清单属性的含义：

short_name：它定义了您的应用程序的名称，该名称在图标中使用，类似于用户的主屏幕或启动器。

name：这是在应用商店或浏览器的启动画面和提示中显示的名称。如果省略 name 属性，则显示 short_name。

icons：这是一组图标（或仅一个图标），显示在用户的主屏幕、启动器、任务切换器、启动画面等上。

start_url：您的应用程序启动时用户可以查看的页面的URL。

display：此属性用于浏览器视图。应用可以隐藏地址栏、在新窗口运行、全屏显示等。以下是可用于此属性的列表：

fullscreen：使用此选项，您的应用程序无需任何浏览器 UI 即可打开，并占据用户设备的全部显示屏。

standalone：此选项允许用户在新窗口中运行应用，就像原生应用一样。它还会隐藏浏览器 UI 组件，例如地址栏。

minimal-ui：此选项与上一个选项类似。但是，它只带有极简的浏览器用户界面，包括返回和重新加载按钮。

browser：此选项可提供常规浏览器体验。

theme_color：此属性定义应用程序中工具栏的颜色。

background_color：当用户点击主屏幕上的应用程序图标时显示的启动画面的颜色。​

启动画面是应用启动时显示的图形元素。它是一个包含应用名称和徽标的窗口。它还会使用您之前选择的背景颜色。启动画面由 Chrome 浏览器根据 Web 清单中的特定属性生成：

• name；
• background_color；
• icons。Chrome 会自动设置当前屏幕分辨率对应的图标。通常情况下，192px 和 512px 的图标比较合适。

但是，如果您的徽标需要适应尽可能多的设备，则可以使用额外的图标。

最后，为了让你的 Web 清单文件正常工作，请将其添加到你的 Web 应用的页面中。请参考以下示例，了解如何正确执行此操作：

<link rel="manifest" href="/manifest.webmanifest">

为了确保一切正常，请检查 Manifest 面板上的配置。你可以在 Chrome DevTools 的“应用程序”菜单下找到它。它看起来如下：

这就是您需要了解的有关使用 React 构建渐进式 Web 应用程序的全部内容。

有关调整 PWA 的更多信息，您可以在万维网联盟编写的Web App Manifest 指南中找到。

步骤 4：测试你的应用

我们已经讨论了创建 React PWA 的流程。现在是时候讨论如何测试你的渐进式 Web 应用了。

如果您需要在生产模式下运行您的应用程序，请输入以下命令：

npm run build

npx server build

您的应用已构建完毕，现在可以进行测试了。您可以使用Google 提供的PWA 清单进行测试。此外，您还可以使用 Lighthouse 访问您的 PWA。您可以在 Chrome DevTools 的“Named”标签页中找到此工具。

按照以下步骤检查应用的性能、可访问性和 PWA 合规性。

步骤 1.在需要检查的页面上，右键菜单中选择“检查”选项，打开 Chrome DevTools。或者，您也可以使用以下键盘快捷键：Command + Option + C（适用于 macOS）或 Control + Shift + C（适用于 Windows、Linux 和 Chrome OS）。

步骤 2.进入 Lighthouse 选项卡。点击“生成报告”按钮。生成 Lighthouse 报告时，请确保已勾选“Progressive Web App”复选框。

审核完成后，您将收到分数以及一系列标准。这些标准将在不同情况下影响您应用的性能。

结论

在本文中，我们讨论了许多与PWA 开发相关的精彩主题。我们讨论了“渐进式 Web 应用”一词的含义，并定义了其主要组件。

现在，您已经了解了使用 React 构建 PWA 项目的主要优势，并详细讨论了如何使用 React 创建渐进式 Web 应用。希望这份详细的指南能够对您有所帮助。

有关如何创建 PWA 的更多信息，请参阅我们关于构建 PWA 的文章

如果您想查看实现渐进式 Web 应用程序的示例，请查看我们的文章“电子商务市场 PWA 的 5 个最佳示例”。