更有效率的網頁應用程式更新方式

Dan Murphy
Dan Murphy
Dibyajyoti Pal
Dibyajyoti Pal

發布日期:2026 年 1 月 21 日

從 Chrome 144 開始,可安裝網頁應用程式的更新程序已簡化,只要有網頁應用程式資訊清單,更新就會更具決定性、可預測且有效率。這篇文章說明目前的做法,以及我們為改善做法所做的變更。

先前的做法 (Chrome 144 之前的版本)

在 Chrome 144 之前,網頁應用程式缺少可主動觸發更新的特定事件。開發人員修改應用程式資訊清單或相關聯的圖示時,系統才會更新。當使用者代理程式使用資訊清單連結擷取資訊清單時,更新程序就會開始。這通常發生在使用者造訪網站或啟動應用程式 (已連結該資訊清單) 時。為判斷是否需要更新,系統會比較目前的資訊清單和圖示與先前記錄的狀態。這項程序需要大量資源,因為一律要從網路下載圖示,才能執行點陣圖比較。

為減輕圖示下載對伺服器造成的負擔,Chrome 實作了節流機制,將這些檢查限制為每個應用程式每天一次,但總頻寬耗用量仍居高不下。此外,如果限制每天檢查一次,開發和測試期間就會發生不一致的情況,開發人員也無法為尚未收到更新的使用者提供可靠的解決方案。

採用這種做法時,開發人員在實作安全性相關變更 (例如更新應用程式名稱或圖示,通常稱為「應用程式 ID 變更」) 時,必須克服複雜的程序。由於網頁應用程式不像 Google Play 有中央機構審查更新,因此必須清楚向使用者呈現這些修改內容,請他們確認。不過,要判斷何時提示使用者進行這些變更,仍是一項挑戰。

此外,更新對話方塊的舊版也經常造成混淆,因為對使用者而言,圖示外觀並未改變,但對話方塊卻聲稱圖示已變更。這個問題源自於直接比較像素,這類比較通常會標示出微不足道的差異。部分差異是開發人員刻意調整所致,但許多差異都是 CDN 動態重新編碼圖片所造成。確認對話方塊頻繁觸發,最終導致 Chrome 91 停用圖示更新。

為解決 Android 版 Chrome 的這個問題,我們在幾年前導入了視覺差異門檻。確保只有在圖示有重大變更時,才會要求使用者確認。這項修正措施讓 Android 重新支援圖示更新,但這項功能在 Chrome 電腦版仍處於停用狀態。

系統會顯示快訊,說明圖示的變更內容,並顯示警告訊息,提醒使用者可按下按鈕確認變更或解除安裝應用程式。
電腦 (Chrome 91 以上版本)
行動裝置警示,顯示圖示變更,以及警告使用者並提供按鈕的訊息,讓使用者確認變更或解除安裝應用程式。
Android (目前)

網頁應用程式更新的限制和目標

我們在開發新更新程序時,以以下目標為指引:

  • 維持使用者期望:應用程式的名稱和圖示與來源息息相關,因此未經使用者明確核准,不得變更。
  • 確保功能一致性:應用程式應盡可能維持最新狀態,確保所有使用者都能享有一致的功能。
  • 提供可預測的使用者體驗和對話方塊:開發人員應能輕鬆預測使用者何時會遇到有關應用程式名稱或圖示更新的介面提示。
  • 最佳化網路用量:更新機制應盡量減少不必要的資料流量。

Chrome 144 版有哪些異動?

名稱和圖示更新現在為選用功能

過去,使用者會看到中斷性對話方塊,要求他們解除安裝應用程式,或立即接受圖示和名稱變更。現在已改用更方便使用的建議,只要展開三點選單即可存取。選取後,使用者現在可以選擇完全忽略這些身分變更。

雖然大部分的資訊清單更新都會立即套用,但應用程式圖示和名稱 (視為安全性敏感成員) 會分開儲存。使用者可隨時查看及套用這些特定變更。

顯示「查看應用程式更新」選項的選單。

按一下「查看應用程式更新」,即可查看修訂後的對話方塊。標題會根據更新的元素而變更。

要求使用者檢查圖示和名稱更新的電腦版對話方塊。

如果圖示欄位沒有變更,系統就不會下載圖示

如果資訊清單中的 icons 欄位與上次套用的版本相同,系統現在會將圖示視為未變更。根據這項新邏輯,Chrome 會避免下載圖示以進行視覺比較,有效將圖示網址視為 Cache-Control:immutable。如要觸發圖示更新,開發人員現在必須修改中繼資料或圖示網址

移除更新節流

由於 Chrome 不再於每次遇到已安裝應用程式的資訊清單時下載圖示,因此先前的限制 (每天只能檢查一次更新) 已取消。開發人員現在可以放心,所有非安全相關成員都會立即收到更新。

處理各平台間的微小圖示差異

為提升使用者體驗,Chrome 現在會自動套用圖示更新,這些更新在逐一像素比較時,差異不到 10%。這樣可確保使用者不會看到令人困惑的更新對話方塊,因為 CDN 重新編碼等次要變異不會觸發更新。

為防範濫用行為,這項配額每天只會更新一次。如果在該時間範圍內發生進一步變更,系統會將圖示視為標準更新,並提示使用者確認變更。

圖示和名稱更新範例

{
  "name": "Example App",
  "short_name": "App",
  "id": "https://www.example-app.com/",
  "start_url": "https://www.example-app.com/index.html",
  "scope": "https://www.example-app.com/",
  "icons": [
    {
      "src": "https://www.example-app.com/img/app.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],

  ... other attributes omitted ...
}

變更圖示網址可確保使用者會看到更新對話方塊,以便變更圖示。

{
  "name": "Example App",
  "short_name": "App",
  "id": "https://www.example-app.com/",
  "start_url": "https://www.example-app.com/index.html",
  "scope": "https://www.example-app.com/",
  "icons": [
    {
      "src": "https://www.example-app.com/img/app-NEW-URL.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],

  ... other attributes omitted ...
}