使用React制作渐进式Web应用程序(PWA)

渐进式 Web 应用程序或 PWA，允许 Web 开发人员创建行为更像本机应用程序的 Web 应用程序。

PWA 的一个巨大卖点是它们可以在网络连接较差甚至完全没有连接的情况下工作！他们通过缓存 Web 应用程序的资产并在可能的情况下在后台下载任何更新来实现这一点。 PWA 的另一个好处是它们允许 Web 应用程序访问本机功能，例如推送通知。它们也可以添加到用户的主屏幕以便于访问。

在这个简短的教程中，我们将讨论如何使用 React 和 create-react-app 创建 PWA。

入门

首先，我们将使用 Create React App 开始一个新项目。

$ yarn create react-app my-app-name

请注意，这里我们使用来自 Yarn 的 create 命令。

接下来我们要打开src/index.js。我们所要做的就是将 service worker 的 unregister 更改为 register，因为 service worker 现在默认选择加入而不是退出：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// Changed from 'unregister' to 'register'
serviceWorker.register();

就是这样！我们已经启用了我们的服务工作者，我们的 React 应用程序现在将离线工作。然而，它只能在生产环境中工作，所以如果你想尝试一下，你首先必须创建一个构建：

$ yarn build

# If you'd like to serve it locally:
$ yarn global add serve
$ serve -s build

还要记住，该应用程序将离线工作，并且它的外壳将始终可访问，但这也不是魔术，并且需要通过 Ajax 作为应用程序功能的一部分获取的新数据在离线时不会被获取。因此，您需要围绕它构建故障保护和应用程序通知/祝酒词以通知您的用户。

如果您想自定义 PWA 对用户的显示方式，您可以编辑位于 public/manifest.json 的 Web 应用清单。在这里，您可以设置应用程序的名称、图标和主题。

注意事项

将 Create React App 应用程序转换为 PWA 非常简单，但选择加入是有充分理由的。在部署 PWA 之前，您必须了解一些非常重要的事情。

首先是您需要通过 HTTPS 为您的 Web 应用程序提供服务。 Service Worker 仅在通过 HTTPS 提供服务的 Web 应用程序上工作，唯一的例外是在 localhost 上进行测试时。

其次，在关闭所有打开的选项卡之前，无法更新缓存的资产。这是因为如果不同的选项卡运行不同版本的服务工作者，可能会出现问题。这是用户可能无法立即理解的内容，这将我们带到了下一点。

最后，用户可能不熟悉渐进式 Web 应用程序。因此，重要的是为用户创建一条消息，通知他们应用程序离线工作，或者应用程序在所有其他选项卡关闭之前无法更新。为此，您可以修改位于 src/serviceWorker.js 的文件。默认情况下，此文件仅使用 console.log 打印此信息，但您需要添加一些自定义功能来实际向您的用户显示这些消息。

学到更多

这只是一个简短的介绍，以激发您的胃口，这里还有一些关于渐进式 Web 应用程序及其与 Create React App 一起使用的资源：

制作一个渐进式 Web 应用程序来自 Create React App 文档。
Google 对 PWA 的概述。