如何将添加到主屏幕集成到您的 PWA 中

已发表: 2021-05-13

添加到主屏幕（简称 A2HS）是渐进式 Web 应用体验的基础，因为它允许完整的原生应用体验，包括从用户的主屏幕启动应用。

 推荐阅读：PWA vs Native：哪个更适合你？

作为您的 PWA 如此重要的功能，您肯定不能不集成它，这就是为什么今天在 SimiCart PWA 教程中，我们将讨论为什么需要 A2HS 的原因，如何使用它以及如何制作 PWA A2HS 就绪，可在移动设备和桌面设备上使用。

支持浏览器

A2HS 非常接近于成为浏览器之间的通用功能。目前，Mobile Chrome/Android Webview（从版本 31 开始）、Opera for Android（从版本 32 开始）和 Firefox for Android（从版本 58 开始）目前都支持它。如需更详细的视图，请查看 CanIUse 网站。

PWA 添加到主屏幕正在运行

当遇到启用了 PWA 添加到主屏幕（启用 A2HS）的站点时，可以在用户界面的底部看到一个横幅，通知该站点可以添加到您的主屏幕：

Harlow Bros - 将 PWA 添加到主屏幕 — *Harlow Bros – SimiCart 引以为豪的作品*

这是默认的浏览器提供的安装促销，在满足某些可安装标准时发生。通知本身将在用户第一次访问您的网站时显示，然后在大约 90 天后再次显示。

如何使您的网络应用程序在移动设备上启用 A2HS

可安装标准

要使您的 Web 应用程序可安装，它必须：

尚未安装
满足用户参与启发式（用户必须与页面交互至少 30 秒）
通过安全 (HTTPS) 连接提供服务
注册服务人员
有一个正确配置的清单文件
而且最重要的是，使用的浏览器必须支持beforeinstallprompt事件。有关支持beforeinstallprompt事件的浏览器的完整列表，请参阅 CanIUse。

入门

出于演示目的，在本文中，我们将使用create-react-app项目作为基础来创建可安装的 PWA。 create-react-app 是一个简单的 React 命令，用于创建单页应用程序。

注意： create-react-app至少需要 node >= 10.16 和 npm >= 5.6

打开您的Node.js 命令提示符，运行以下命令：

 npx create-react-app pwa-a2hs
cd pwa-a2hs
纱线开始

创建清单文件

通常位于 Web 应用程序的根文件夹深处，您的 Web 清单是一个文件，其中包含您网站的所有必要信息，例如您的应用程序的标题、不同图标的路径、背景颜色等，采用 JSON 格式。 Web 清单文件对于功能性 Web 应用程序至关重要，因为它允许在用户体验的各个阶段正确呈现您的 Web 应用程序。

我们建议使用清单生成器来自动生成文件，以及为您的应用程序大小优化的图标。

使用清单生成器，您可以拥有一个manifest.zip文件，其内容如下：

你的manifest.webmanifest应该是这样的：

 {
    "theme_color": "#f69435",
    “背景颜色”：“#f69435”，
    “显示”：“独立”，
    “范围”： ”/”，
    "start_url": ".",
    “名称”：“PWA-A2HS”，
    “short_name”：“PWA”，
    "description": "用于 A2HS 功能的演示 PWA",
    “图标”：[
        {
            "src": "/icon-192x192.png",
            “尺寸”：“192x192”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-256x256.png",
            “尺寸”：“256x256”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-384x384.png",
            “尺寸”：“384x384”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-512x512.png",
            “尺寸”：“512x512”，
            “类型”：“图像/png”
        }
    ]
}

现在将生成的清单文件的内容复制到/public/文件夹，删除该文件夹中的默认manifest.json文件，然后继续下一步。

将 HTML 链接到清单

完成清单文件的配置后，将其保存在网站的根目录中，以便稍后使用相对路径调用它，即/manifest.webmanifest 。要完成清单文件的设置，请在 HTML 标头中引用它（ \pwa-a2hs\public\index.html ），像这样：

 <头部>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <元名称="主题颜色" 内容="#000000" />
    <元
      名称="描述"
      content="使用 create-react-app 创建的网站"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </head>

设置安装流程

Web 应用程序清单并不是使您的 Web 应用程序可安装所需的全部。您必须进行一些额外的配置才能使您的 Web 应用程序可安装，从而使其更接近 PWA。

创建服务工作者

Service Worker 拦截您的网络请求并启用 PWA 著名的各种类似应用程序的功能。在pwa-a2hs\public中创建一个service-worker.js文件，并填写以下内容：

 self.addEventListener('fetch', function(event) {
  event.respondWith(
      caches.match(event.request).then(function(response) {
          返回响应 || 获取（事件。请求）；
      })
  );
});

在这里，我们需要监听fetch事件，因为它对于您添加到主屏幕的体验至关重要，没有它，您的 React 应用程序将无法满足可安装性要求。

注册您的服务人员

为了让我们的service-worker.js工作，我们必须通过在index.html的<body>末尾插入以下代码来注册它：

 //index.html
<脚本>
    if ('serviceWorker' in navigator) {
      // 注册一个托管在根目录的服务工作者
      // 使用默认范围的站点。
      navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        console.log('Service Worker 注册成功：', 注册);
      }, /*catch*/ 函数（错误）{
        console.log('Service Worker 注册失败：', error);
      });
    } 别的 {
      console.log('不支持服务工作者。');
    }
  </脚本>

是时候测试它了！

您的 PWA 现在应该可以安装了。刷新您的前端，您应该会在任务栏（桌面）或小通知横幅（移动）上看到一个安装按钮。

单击安装将在您的桌面/主屏幕上生成一个 PWA 快捷方式：

A2HS 体验还有更多内容

以上只是使用浏览器提供的安装推广的基本添加到主屏幕体验。为了更上一层楼，您还可以保存beforeinstallprompt 事件以手动触发具有各种模式的安装流程，以促进 PWA 安装。

使用自定义安装按钮，您可以通过定位将受益于应用程序安装的特定用户来避免中断用户的旅程。通过仔细考虑推广 UI 的放置位置和位置，您的 PWA 可能会比您的竞争对手做得更好，从而获得更好的应用转化率。