Progressive Web App 自主管理推薦安裝提示 (3)

2021 iThome 鐵人賽

DAY 3

Modern Web

前端三分鐘 X Progressive Web App 30 天製造解密系列第 3 篇

13th鐵人賽 pwa progressive web app

linyencheng

2021-09-16 07:34:56

3240 瀏覽

分享至

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");
});