渐进式 Web 应用：提示和衡量安装情况

1. 欢迎

在本实验中，您将使用现有的可安装 PWA，并添加自定义应用内安装按钮。这是渐进式 Web 应用工作坊的一系列配套 Codelab 中的第五个。上一个 Codelab 是从标签页到任务栏。本系列还有 3 个 Codelab。

学习内容

  • 创建自定义应用内 PWA 安装按钮

注意事项

  • JavaScript

所需条件

2. 进行设置

首先，克隆或下载完成此 Codelab 所需的起始代码：

如果您克隆了代码库，请确保您位于 pwa04--prompt-measure-install 分支中。该 ZIP 文件还包含相应分支的代码。

此代码库需要 Node.js 14 或更高版本。获得代码后，在代码的文件夹中通过命令行运行 npm ci，以安装所需的所有依赖项。然后，运行 npm start 以启动 Codelab 的开发服务器。

源代码的 README.md 文件提供了对所有分发文件的说明。此外，以下是您将在整个 Codelab 中使用的关键现有文件：

密钥文件

  • js/main.js - 主要应用 JavaScript 文件

3. 设置“安装”按钮

在添加安装提示和捕获安装事件之前，需要进行一些设置。首先，创建一个文件 js/lib/install.js 并添加以下代码：

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

然后，在 js/main.js 中 DOMContentLoaded 事件的底部，添加以下代码：

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

说明

此代码设置了一个将在下一步中使用的 Install 类，并将其附加到正在运行的应用。

4. 添加安装提示监听器

为了使用安装按钮触发器实际触发 PWA 安装，您需要捕获安装提示。安装完成后，您需要重置捕获的安装提示。为此，请在 js/lib/install.js 的 Install 类中的 constructor 中写入代码，以执行以下操作：

捕获安装提示

  • 监听 window 上的 beforeinstallprompt 事件。
  • 防止事件触发
  • 获取提示
  • 显示安装按钮触发器

重置安装时的提示

  • 监听 window 上的 appinstalled 事件。
  • 重置捕获的提示
  • 隐藏安装按钮触发器

5. 通过应用内按钮触发安装

捕获提示后，PWA 的安装按钮需要能够触发该提示。为此，请将以下代码添加到 js/lib/install.js 中的 Install 类：

  • 一种用于触发安装的 async 方法，该方法
    • 使用捕获的提示来提示安装
    • await 用户选择的提示
    • 重置提示
    • 如果用户接受了安装提示，则隐藏“安装”按钮
  • 向类的 constructor 中的安装按钮添加 click 事件监听器，以调用安装触发器。

6. 恭喜！

您刚刚学习了如何通过自己的应用内安装按钮触发 PWA 安装。

本系列中的下一个 Codelab 是增强 PWA 的功能