漸進式網頁應用程式：提示及評估安裝次數

1. 歡迎

在本實驗室中，您將使用現有的可安裝 PWA，並新增自訂應用程式內安裝按鈕。這是漸進式網頁應用程式研討會的一系列配套程式碼研究室中的第五個。先前的程式碼研究室是「從分頁到工作列」。本系列還有三項程式碼研究室。

課程內容

  • 建立自訂的應用程式內 PWA 安裝按鈕

注意事項

  • JavaScript

軟硬體需求

2. 開始設定

首先，請複製或下載完成本程式碼研究室所需的範例程式碼：

如果複製存放區，請確認您位於 pwa04--prompt-measure-install 分支版本中。ZIP 檔案也包含該分支版本的程式碼。

這個程式碼集需要 Node.js 14 以上版本。取得程式碼後，請在程式碼資料夾中從指令列執行 npm ci，安裝所有需要的依附元件。接著執行 npm start，啟動本程式碼研究室的開發伺服器。

原始碼的 README.md 檔案會說明所有發布的檔案。此外，您在本程式碼研究室中會使用下列主要現有檔案：

金鑰檔案

  • 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';
    }
  }
}

接著，在 DOMContentLoaded 事件底部的 js/main.js 中，新增下列程式碼：

// 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 的 constructor 動作：

擷取安裝提示

  • 在 window 上監聽 beforeinstallprompt 事件。
  • 防止觸發事件
  • 擷取提示
  • 顯示安裝按鈕觸發條件

在安裝時重設提示

  • 在 window 上監聽 appinstalled 事件。
  • 重設擷取的提示
  • 隱藏安裝按鈕觸發條件

5. 透過應用程式內按鈕觸發安裝

擷取提示後，PWA 的安裝按鈕必須能夠觸發提示。如要這麼做，請在 js/lib/install.js 的 Install 類別中加入下列內容：

  • 觸發安裝的 async 方法，
    • 使用擷取的提示來提示安裝
    • await 使用者選擇的提示
    • 重設提示
    • 如果使用者接受安裝提示，則隱藏安裝按鈕
  • 在類別的 constructor 中，將 click 事件監聽器新增至安裝按鈕，以呼叫安裝觸發程序。

6. 恭喜！

您已學會如何透過應用程式內的安裝按鈕觸發 PWA 安裝程序。

本系列下一個程式碼研究室是「強化 PWA」