Progressive Web App A2HS: 安裝推薦程式與設計模式全解析 | 前端三分鐘

文章目錄

加入主畫面 (Add to Home screen)

加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS，可以看成是讓使用者將 Web App 進行 “安裝” 的動作，雖然實際上只是加入一個捷徑到桌面上，類似桌面版的我的最愛。

由於不是 PWA 的網站也可以做到加入主畫面，那 PWA 任務就是要將現有的 A2HS 做漸進式增強，安裝過後除了支援實作快取資源到本機也能夠在 App 管理介面中看到。

Chrome 的使用說明

為什麼需要加入主畫面 (A2HS)?

A2HS 是 Progressive Web App 設計理念的其中一部份，經過 “安裝” 這個動作讓 web apps 也能像 native app 有類似的使用者體驗。

在加入主畫面後，使用者就可以透過點擊主畫面上的 icon 直接去使用 Web App，PWA 的相關支援目前在各大平台的支援程度都在逐漸提高中，不過漸進式增強功能在各平台都有各自需要注意的地方。

怎麼使用加入主畫面 (Add to Home screen)?

透過瀏覽器打開後，可以注意網址欄會多了一個可以按的按鈕，依各家瀏覽器不同會有不同的樣貌，這個按鈕就是加入主畫面的功能按鈕。

網址列的加入至主畫面 (圖片來源: https://developer.mozilla.org)

在按下加入至主畫面後或第一次載入網頁時 (Android 8 以上) 依照各家瀏覽器實作不同，大多會有一個確認的視窗，按下後就完成了這個 “安裝” 的動作。

確認要加入至主畫面 (圖片來源: https://developer.mozilla.org)

MDN 提供了一個簡單輪播圖片的範例，可以直接用手機打開來看，連結如下:

https://mdn.github.io/pwa-examples/a2hs/

雖然網站很簡單，但其中也實作了 service worker 來快取資源讓網站在安裝後能夠離線瀏覽。

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches
      .open("fox-store")
      .then((cache) =>
        cache.addAll([
          "/pwa-examples/a2hs/",
          "/pwa-examples/a2hs/index.html",
          "/pwa-examples/a2hs/index.js",
          "/pwa-examples/a2hs/style.css",
          "/pwa-examples/a2hs/images/fox1.jpg",
          "/pwa-examples/a2hs/images/fox2.jpg",
          "/pwa-examples/a2hs/images/fox3.jpg",
          "/pwa-examples/a2hs/images/fox4.jpg",
        ])
      )
  );
});

目前哪些瀏覽器支援 A2HS?

加入主畫面這個功能幾乎是全面支援，除了:

iOS webview 不支援
Chromium desktop 部分支援
Firefox Mobile v58 後支援

想要了解更多詳細狀況，可以參考 caniuse.com，連結如下:

https://caniuse.com/web-app-manifest

加入主畫面 (A2HS) 不存在哪些增強功能?

加入主畫面的過程只是讓 Web App 更方便存取，並沒有將 App 的資源下載或快取，所以並無法讓 Web App 做到離線使用。

離線使用的功能必須額外搭配 Service Worker API 來處理、儲存資料和資源，像是透過 Web storage 或 IndexedDB 都是不錯的解決方案。

在實作完相關快取機制後，記得要註冊後才可以使用:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/pwa-examples/a2hs/sw.js").then(() => {
    console.log("Service Worker Registered");
  });
}

怎麼讓 Web App 有 PWA 的增強功能 (A2HS-ready)?

各家的瀏覽器其實都有相關的 “安裝前的審核標準”，只有在滿足相關條件後，才會讓瀏覽器支援 “漸進式增強的安裝”，而非單純的加入捷徑到主畫面，底下列出 Firefox 和 Chrome 的標準，也附上各平台的相關標準參考連結:

Firefox Install criteria

HTTPS
manifest 配置檔必填欄位都有填，且有在 HTML head 引入
有 icon 的圖片，提供在主畫面中顯示用

Chrome Install criteria

HTTPS
web App 沒有被安裝過
Meets a user engagement heuristic (使用者在這個網域有互動超過 30 秒)
有註冊 service worker 且搭配 fetch handler
manifest 配置檔須包含
- short_name 或 name
- icons 包含 192px 跟 512px
- start_url
- display 要填 fullscreen、standalone、minimal-ui
- prefer_related_applications 不需要，或是給 false

Manifest

這其中有一個關鍵就是 manifest 這個配置檔，會是讓瀏覽器辨識是否為 PWA 的一個關鍵，推薦的命名規則有兩種

somefilename.webmanifest
manifest.json

在加入這個檔案後記得在 <head> 中引入 <link rel="manifest" href="manifest.webmanifest">

那要支援 A2HS 有幾個必填欄位如下:

background_color: 在加入主畫面後，啟動時 splash screen 的背景主視覺，在還沒安裝前的網址列也會改變顏色
display: 定義 App 開啟後的顯示方式目前有三種，各有細微差異 fullscreen、standalone、minimal-ui
icons: 主畫面或是任務切換時顯示
name/short_name: 安裝後的 App 名稱 short_name 會用在顯示上有限制的地方
start_url: App 開啟預設頁，須注意為相對路徑跟 manifest 位置相關，有填 Chrome 才會跳提示

MDN 提供的完整範例如下:

{
  "background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

恭喜!!! 看到這裡就可以發現，其實很快就可以很快地做出一個初階版的 PWA 了，所以其實 PWA 對網頁開發者來說，幾乎可以說是只有優點沒有太多缺點。

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