Progressive Web App 自主管理推荐安装提示 (3)

Promoting installation 推荐安装提示

当我们的 Progressive Web App 满足了安装前的审核标准，浏览器就会触发 beforeinstallprompt 这个事件，当事件被触发後，才能够进行後续的安装过程。

所以在实作安装流程上会分成下面三个步骤:

监听 beforeinstallprompt 这个事件
触发後记得把事件存起来，後续在安装的流程上会需要
告知使用者，这个 App 可以被安装，并提供按钮让使用者继续後续的相关流程

beforeinstallprompt 程序解析

透过程序的流程来触发相关安装流程，不管按钮打算放在哪都要先隐藏，因为 PWA 在还没达到 A2HS 的安装前的审核标准前并无法被安装。

安装流程主要会有两种

透过自订按钮安装流程
透过网址列或是浏览器协助安装

前置准备

<button class="add-button">Add to home screen</button>

let deferredPrompt;
const addBtn = document.querySelector(".add-button");
addBtn.style.display = "none";

自订安装按钮

宣告 deferredPrompt 变数储存事件
收到 beforeinstallprompt 触发後要 e.preventDefault();，因为 Chrome 67 以前的版本会自动触发内建提示视窗
要记得把事件存起来，後续在安装的流程上会需要
让 "安装按钮" 显示
点选後 "安装按钮" 隐藏 (也可以停用)
点选按钮後才触发提示视窗
等待使用者确认或拒绝
从 userChoice 的结果判断是否安装成功
deferredPrompt 用过就不能再用了

// https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js

// 1. 宣告变数储存事件
let deferredPrompt;

window.addEventListener("beforeinstallprompt", (e) => {
  // 2. 停用 Chrome 67 前的公版提示视窗
  e.preventDefault();
  // 3. 记得把事件存起来，後续在安装的流程上会需要
  deferredPrompt = e;
  // 4. 让 "安装按钮" 显示
  addBtn.style.display = "block";

  addBtn.addEventListener("click", (e) => {
    // 5. 点选後 "安装按钮" 隐藏 (也可以停用)
    addBtn.style.display = "none";
    // 6. 点选按钮後才触发提示视窗
    deferredPrompt.prompt();
    // 7. 等待使用者确认或拒绝
    deferredPrompt.userChoice.then((choiceResult) => {
      // 8. 从 userChoice 的结果判断是否安装成功
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the A2HS prompt");
      } else {
        console.log("User dismissed the A2HS prompt");
      }
      // 9. 用过就不能再用了
      deferredPrompt = null;
    });
  });
});

透过网址列或浏览器安装

透过网址列、浏览器元件自动的提示、浏览器中的选单进行安装的话，开发者无法知道是否 App 已经被安装，所以需要透过 appinstalled 这个事件。

window.addEventListener("appinstalled", () => {
  // "安装按钮" 隐藏 (也可以停用)
  addBtn.style.display = "none";
  // 用过就不能再用了
  deferredPrompt = null;
  // 安装成功
  console.log("PWA was installed");
});