Progressive Web App 啟動和更新機制 透過程式監控啟動和觸發更新

me
林彥成
2021-09-07 | 1 min.
文章目錄
  1. 1. PWA 啟動
    1. 1.1. 偵測 display mode 改變
    2. 1.2. 針對 display mode 改變 UI
  2. 2. 更新 PWA
    1. 2.1. Chrome 桌面版
    2. 2.2. Chrome Android 版

PWA 啟動

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

  • display-mode 搭配 matchMedia()
  • navigator.standalone: 不支援 matchMedia() 就透過屬性直接判斷
1
2
3
4
5
6
7
8
9
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 的事件,但還想不到什麼情境底下會發生。

1
2
3
4
5
6
7
8
9
10
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 條件設定:

1
2
3
4
5
@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” 按鈕

喜歡這篇文章,請幫忙拍拍手喔 🤣

share