Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2)

2021 iThome 鐵人賽

DAY 2

Modern Web

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

13th鐵人賽 pwa progressive web app

linyencheng

2021-09-15 06:45:58

4045 瀏覽

分享至

加入主畫面 (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 對網頁開發者來說，幾乎可以說是只有優點沒有太多缺點。