PWA 啟動

要怎麼知道 Web App 是在 PWA 已經被安裝情況下被開啟的，靠 CSS 中有個 display-mode，不管透過 tab 或是安裝的情況下，去測試都可以看得出來。

• display-mode 搭配 matchMedia()
• navigator.standalone: 不支援 matchMedia() 就透過屬性直接判斷

function getPWADisplayMode() {
  const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
  if (document.referrer.startsWith("android-app://")) {
    return "twa";
  } else if (navigator.standalone || isStandalone) {
    return "standalone";
  }
  return "browser";
}

偵測 display mode 改變

也是透過 matchMedia() 搭配 change 的事件，但還想不到什麼情境底下會發生。

window
  .matchMedia("(display-mode: standalone)")
  .addEventListener("change", (evt) => {
    let displayMode = "browser";
    if (evt.matches) {
      displayMode = "standalone";
    }
    // Log display mode change to analytics
    console.log("DISPLAY_MODE_CHANGED", displayMode);
  });

針對 display mode 改變 UI

最簡單就是透過 CSS 的 media query 條件設定:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

更新 PWA

當想要更新 App 的名稱或是 Icon 的時候，其實也是透過修改 manifest 配置檔。

Chrome 桌面版

以下屬性改變的時候，Chrome 會自動抓取新的 manifest 配置檔, Chrome 會把新的配置暫存，等到所有視窗關閉時會進行更新安裝。當安裝完成時，除了 name, short_name, start_url, icons 以外的欄位都會更新。

哪幾個欄位會觸發更新?

• display: manifest 的配置、使用者 window/browser tab setting 同時存在會以使用者為主
• scope
• shortcuts
• theme_color

測試 manifest 更新

• about://internals/web-app

Chrome Android 版

哪幾個欄位會觸發更新?

• background_color
• display
• orientation
• scope
• shortcuts
• start_url
• theme_color
• web_share_target

如果 Chrome 無法從伺服器取得更新版的 manifest，會延長到 30 才進行更新確認。

測試 manifest 更新

• about://webapks:　點選 "Update" 按鈕