Progressive Web App 教程：创建您的第一个 PWA

已发表: 2020-06-23

PWA 由 Google 自己制造，目前正被推送到 Windows 10 等流行平台上，它可以完成许多以前原生应用程序独有的功能，包括推送通知、引人入胜的应用程序界面、离线功能、应用程序安装等功能...... .

这就是为什么 PWA 的出现不再是暂时的，因为它现在是一场全面的大规模运动，可能从根本上改变我们所知道的 Web。对于新手来说，现在了解这项新兴技术还为时不晚，因为现在构建 PWA 的过程比以前简化了很多，适合像您这样感兴趣的外行。

为了您的最佳学习目的，今天我们将使用 React、Node.js 和 Firebase 创建一个功能齐全的 PWA。

先决条件

Node.js版本 >= 8.10
npm版本 >= 5.6

注意： npm版本应该不是问题，因为您安装的Node.js总是带有最新版本的npm包管理器。

1. 使用`create-react-app`创建一个 SPA

首先，我们需要一些扎实的工作，而create-react-app是实现此目的的完美工具。

 npx create-react-app my-PWA
cd my-pwa
npm 开始

上述命令将帮助您创建一个学习的、基于 React 的环境供您使用。

通过 HTTPS 提供服务

HTTPS 是 Web 的新标准，随着 PWA 的到来，它只会变得更加主流。通常，PWA必须通过 HTTPS 提供服务，因为没有它，服务工作者本身就无法工作；但由于我们在 localhost 环境中工作，因此没有必要。

2.使其离线工作

默认情况下，应预先配置create-react-app中的服务工作者，以在用户没有连接或后续访问时处理离线缓存和内容加载。

简单来说，Service Worker 是一个 JavaScript 脚本，它运行在与页面不同的线程上，因此，它无法访问 DOM 结构。这种新方法产生了更先进、性能增强的特性，因为服务工作者现在不仅处理 PWA 的所有典型特性（离线功能、推送通知等），而且在减轻繁重计算方面也发挥了重要作用您的网站在一个单独的线程上。

要在 PWA 上安装服务工作者，您需要查看/src/index.js 。

在index.js中，寻找这一行

 serviceWorker.unregister()

将unregister()更改为register() ，当您在生产模式下运行my-pwa时，您的服务人员将自动注册。不建议在开发模式下启用 Service Worker，因为它可能导致 PWA 仅加载缓存资产而不包括最新的本地更改的情况。

在生产模式下运行你的my-pwa ：

 npm 运行构建
npx 服务构建

之后，打开 Chrome 并转到localhost:5000 ，检查它，您现在将看到 Service Worker 在Application选项卡中正常运行。

在“缓存存储”类别下，您要检查您网站的离线内容是否被正确缓存。

注意：有一种解决方法可以在非生产模式下注册您的服务人员。这是通过从src/serviceWorker.js中删除行process.env.NODE_ENV === 'production'来实现的。

如果您想深入研究并从头开始创建自己的服务工作者，而不依赖于 React 的预配置配置，我们可以满足您的需求。在本教程中，我们将向您展示如何从一个简单的 Web 应用程序创建一个离线优先的渐进式 Web 应用程序。

3.设置添加到主屏幕

如果到目前为止一切都已正确完成，那么在启动my-pwa的生产版本时应该会看到一个小的安装图标 (+)。

由于一切都是为您自动完成的，您可能想知道这一切是如何实现的。别担心，这就是我们在这里的原因。

为了准备好 PWA A2HS（添加到主屏幕），我们需要manifest.json 。 create-react-app附带的manifest.json是一个非常基本的 JSON 文件，它决定了应用程序的图标如何呈现给用户并定义其启动屏幕外观。要自定义这些，请更改/public/manifest.json中的现有文件。

 {
  "short_name": "我的第一个 PWA",
  "name": "创建一个简单的 PWA",
  “图标”：[
    {
      "src": "favicon.ico",
      “尺寸”：“64x64 32x32 24x24 16x16”，
      “类型”：“图像/x-icon”
    },
    {
      "src": "logo192.png",
      “类型”：“图像/png”，
      “尺寸”：“192x192”
    },
    {
      "src": "logo512.png",
      “类型”：“图像/png”，
      “尺寸”：“512x512”
    }
  ],
  "start_url": ".",
  “显示”：“独立”，
  "theme_color": "#000000",
  “背景颜色”：“#ffffff”
}

这里的大部分内容都是不言自明的，但是如果您发现自己想要深入了解manifest.json和导致 PWA 安装的事件，我们已经写了一篇关于此的文章。别忘了检查一下。

注意：要使manifest.json工作，您需要将它包含在index.html中。默认情况下， create-react-app应该已经为您完成了这项工作。

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

当您将 PWA 注册到 service worker 和适当的manifest.json时，一旦用户启动您的应用程序，将触发beforeinstallpromt ，请求他们允许将您的 PWA 安装到用户的主屏幕。

但是您应该注意，我们只是触及了 A2HS（添加到主屏幕）过程的表面，还有很多东西需要学习。我们认为，学习任何东西的最佳方法是从头开始构建它，这就是为什么我们为您准备了有关 PWA 的这一特定功能的简短指南。该指南将引导您了解 PWA 安装活动中的几个重要部分。

或者，如果您感到懒惰和没有动力，我们也在这里为您提供支持。我们的清单生成器旨在为您自动化整个过程。

4.设置推送通知

浏览器在支持推送通知方面取得了长足的进步。最近，Chrome 甚至引入了通知触发器，以便在飞行模式下显示通知。这是推送通知向前迈出的一大步。

Chrome 通知触发器 — *Chrome 80 中的新功能，**通知触发器**即使在飞行模式下也能启用通知*

现在，您一定想知道本教程中使用 Firebase 的那部分在哪里。嗯，就是这样。在这一部分中，您将了解使用 Firebase 将推送通知集成到 PWA 中的过程，特别是其中的云消息传递功能，它允许使用 HTTPS 请求发送消息。

但是由于整个过程有点长，而且为了帮助您更好地跟踪整个事情，我们为您准备了我们自己的推送通知集成教程。通过本教程，您在尝试向用户令牌或一组用户发送推送通知时不会遇到任何问题。

结论

这就是完整的 PWA。如果您对教程的任何部分感到困惑，请随时向我们提出任何问题，我们将尽力回答！

阅读更多：
如何在 Magento 2 中集成 PWA