零、前言

React 的渐进式 Web 应用旨在为您提供有关 Web 开发未来所需的一切信息。进步型网络应用（PWAs）对于希望充分利用网络所能提供的最佳功能的公司来说正变得越来越普遍，其动力来自于填补网络应用与本地应用之间差距的尖端技术。

在本书中，我们将利用流行的 JavaScript 库 React.js 的强大功能创建一个快速、功能强大的 UI。然后，我们将使用革命性的新 Web 技术添加渐进式 Web 应用功能，如推送通知和即时加载。最后，我们将简化应用的性能，并研究如何最好地衡量其速度。

在本书结束时，您将对 React 和 PWA 感到舒适，并为 web 的未来做好准备。

这本书涵盖的内容

第 1 章创建我们的应用结构，简要介绍您将要学习构建的内容——一个具有推送通知和离线支持的实时聊天应用。您将了解此类应用所面临的挑战，并简要概述本书将讨论的技术。在本章结束时，您将使用 HTML 和 CSS 设置聊天应用的应用结构。

第 2 章开始使用 Webpack时说，在编写任何 React 代码之前，您需要设置 Webpack 构建过程。在本章中，将向您介绍 webpack；您将学习安装软件包、设置一些基本配置以及运行开发服务器。本章将使您准备好跳入 React。

第三章、我们 App 的登录页面，介绍您的反应时间！在本章中，您将学习编写前两个组件：包含应用的应用包装器和 LoginContainer。了解如何使用 ReactDOM 和 JSX 进行渲染，并编写一个允许用户登录的基本表单。本章结束时，您将熟悉 React 语法。

第 4 章使用 Firebase轻松设置后端，告知登录表单看起来不错，但缺乏实际功能。要向前推进，您需要一个后端数据库和身份验证解决方案来与之通信。本章将通过谷歌向您介绍 Firebase。在 Firebase 控制台上设置应用，然后为表单编程登录和注册功能。

第 5 章、路由和 React让您知道，一旦用户登录，您希望将他们重定向到主聊天视图。因此，在本章中，您将学习构建主视图，然后设置 React 路由，允许用户在页面之间移动。最后，学习在单个用户视图中添加第三个视图，并探索 URL 中的参数匹配。

第 6 章完成我们的应用，将带您完成构建基本应用的最后一步，为聊天和用户视图添加功能。您将学习从 Firebase 写入和读取数据，并利用 React 生命周期方法来实现这一点。一旦完成，您的 web 应用将完成，但它还不是很进步！

第 7 章增加了一名服务工作器，涵盖了服务工作器及其工作方式。在这里，您将了解如何注册自定义服务工作器并了解其生命周期，然后连接到默认的 Firebase 消息传递服务工作器。

第 8 章使用服务工作器发送推送通知教导您在我们的服务工作器准备就绪的情况下配置应用，以便能够发送推送通知。您将使用 Firebase 云消息来管理这些通知的发送，并添加自定义项来控制它们在桌面和移动设备上的发送方式和时间。

第 9 章通过清单使我们的应用可安装，说明清单是一个 JSON 文件，允许用户将应用保存到主屏幕。您将学习创建清单，了解最佳实践以及特定于 iOS 的注意事项。您还将学习自定义启动屏幕和图标。

第 10 章应用外壳阐明了应用外壳模式是 PWAs 中一个关键概念的观点，但它带来了什么优势？将向您介绍渐进增强的 shell 和 RAIL 系统，然后将应用的一些布局移出 React 以获得最佳渲染效果。

第 11 章使用 Webpack对 JavaScript 进行分块以优化性能，探讨了 PRPL 模式、其目标和方法，以及如何在应用中实现它的概述。然后，您将深入研究，根据路由将 JavaScript 拆分为块，然后延迟加载辅助路由。

第 12 章准备缓存，通过了解新的缓存 API，以及如何与您的服务工作器一起使用它缓存 JavaScript 块，介绍如何利用服务工作器实现脱机功能。

第 13 章审计我们的应用，说现在是检查我们工作的时候了！在本章中，将向您介绍 Lighthouse，并了解如何使用 Lighthouse 审计 PWA。

第 14 章、结论及后续步骤，您的第一次 PWA 已完成！在开发过程中，您手动构建了大部分 PWA 基础设施。在本章中，您将学习帮助器库和节省时间的快捷方式，并且还将探索 PWA 开发的未来。此外，作为一项额外的挑战，您还会遇到关于未来项目想法的建议以及可以对聊天应用进行的改进。

这本书你需要什么

您只需要一台可以运行 Node.js（的计算机 https://nodejs.org/en/download/ ），用于编写代码的文本编辑器，最新版本的 Chrome 浏览器。如果你想在手机上测试你的应用，你还需要安卓或 iOS 手机。

这本书是给谁的

本书面向希望开发高性能 Web 用户界面的 JavaScript 开发人员。本书要求具备 HTML、CSS 和 JavaScript 的基本知识。

习俗

在本书中，您将发现许多文本样式可以区分不同类型的信息。下面是这些风格的一些例子，并解释了它们的含义。文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示：在App.js中，我们首先导入LoginContainer。

代码块设置如下：

import React, { Component } from 'react';
import LoginContainer from './LoginContainer';
import './app.css';

class App extends Component {
  render() {
    return <LoginContainer />
  }
}

export default App;

当我们希望提请您注意代码块的特定部分时，相关行或项目以粗体显示：

if (module.hot) {
  module.hot.accept('./components/App', () => {
 const NextApp = require('./components/App').default;
    ReactDOM.render(
      <App/>,
      document.getElementById('root')
    );
  });
}

任何命令行输入或输出的编写方式如下：

 yarn add css-loader style-loader

新术语和重要词语以粗体显示。您在屏幕上看到的单词（例如，在菜单或对话框中）会出现在文本中，如下所示：返回到应用，您应该会看到新组件的 Hello from LoginContainer。

Warnings or important notes appear like this. Tips and tricks appear like this.

读者反馈

我们欢迎读者的反馈。让我们知道你对这本书的看法你喜欢还是不喜欢。读者反馈对我们来说很重要，因为它可以帮助我们开发出您将真正从中获得最大收益的标题。要向我们发送一般反馈，只需发送电子邮件feedback@packtpub.com，并在邮件主题中提及该书的标题。如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

既然您是一本 Packt 图书的骄傲拥有者，我们有很多东西可以帮助您从购买中获得最大收益。

下载示例代码

您可以从您的帐户下载本书的示例代码文件 http://www.packtpub.com 。如果您在其他地方购买了本书，您可以访问http://www.packtpub.com/support 并注册，将文件直接通过电子邮件发送给您。您可以通过以下步骤下载代码文件：

  1. 使用您的电子邮件地址和密码登录或注册我们的网站。
  2. 将鼠标指针悬停在顶部的“支持”选项卡上。
  3. 点击代码下载和勘误表。
  4. 在搜索框中输入图书的名称。
  5. 选择要下载代码文件的书籍。
  6. 从您购买本书的下拉菜单中选择。
  7. 点击代码下载。

下载文件后，请确保使用以下最新版本解压或解压缩文件夹：

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Progressive-Web-Apps-with-React 。我们在上还提供了丰富的书籍和视频目录中的其他代码包 https://github.com/PacktPublishing/ 。看看他们！

勘误表

虽然我们已尽一切努力确保内容的准确性，但错误确实会发生。如果您在我们的一本书中发现错误，可能是文本或代码中的错误，如果您能向我们报告，我们将不胜感激。通过这样做，您可以使其他读者免于沮丧，并帮助我们改进本书的后续版本。如果您发现任何错误，请访问进行报告 http://www.packtpub.com/submit-errata ，选择您的书籍，点击勘误表提交表单链接，然后输入勘误表的详细信息。一旦您的勘误表得到验证，您的提交将被接受，勘误表将上载到我们的网站或添加到该标题勘误表部分下的任何现有勘误表列表中。要查看之前提交的勘误表，请转至https://www.packtpub.com/books/content/support 并在搜索字段中输入图书名称。所需信息将出现在勘误表部分下。

盗版行为

在互联网上盗版版权材料是所有媒体都面临的一个持续问题。在 Packt，我们非常重视版权和许可证的保护。如果您在互联网上发现任何形式的非法复制品，请立即向我们提供地址或网站名称，以便我们采取补救措施。请致电copyright@packtpub.com与我们联系，并提供可疑盗版材料的链接。我们感谢您在保护我们的作者方面提供的帮助以及我们为您带来有价值内容的能力。

问题

如果您对本书的任何方面有任何问题，可以通过questions@packtpub.com与我们联系，我们将尽力解决该问题。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/10226.html