Chrome 如何處理網頁應用程式資訊清單的更新

變更 PWA 圖示、捷徑、顏色和其他中繼資料所需的步驟

Adriana Jara
François Beaufort
François Beaufort
GitHub
Pete LePage

安裝 PWA 時，瀏覽器會使用網頁應用程式資訊清單中的資訊，取得應用程式名稱、應用程式應使用的圖示，以及應用程式啟動時應開啟的網址。但如果您需要更新應用程式快捷方式或嘗試新的主題顏色，該怎麼辦？這些變更何時及如何反映在瀏覽器中？

在大多數情況下，變更應會在資訊清單更新後，在 PWA 啟動後的一或兩天內反映。

在 Chrome 桌面版上更新

當 PWA 在瀏覽器分頁中啟動或開啟時，Chrome 會判斷上次檢查本機資訊清單是否有變更。如果自瀏覽器上次啟動後，未檢查資訊清單，或是在過去 24 小時內未檢查資訊清單，Chrome 會針對資訊清單提出網路要求，然後將其與本機副本進行比較。

如果在資訊清單中選取屬性已變更 (請參閱下方清單)，Chrome 會將新的資訊清單排入佇列，並在所有視窗關閉後安裝新資訊清單。安裝完成後，新資訊清單中的所有欄位 (icons 除外) 都會更新。

哪些屬性會觸發更新？

  • name
  • short_name
  • display (請見下方)
  • scope
  • shortcuts
  • start_url
  • theme_color
  • file_handlers

更新「display」欄位後會有什麼影響？

如果您將應用程式的顯示模式從 browser 更新為 standalone，現有使用者更新後，應用程式並不會在視窗中開啟。網頁應用程式有兩個顯示設定，分別來自資訊清單 (由您控制)，另一種則由使用者控管的視窗/瀏覽器分頁設定。系統一律尊重使用者的偏好設定。

測試資訊清單更新

chrome://web-app-internals 頁面 (適用於 Chrome 85 以上版本) 包含裝置已安裝所有 PWA 的相關詳細資訊，有助您瞭解資訊清單的上次更新時間、更新頻率等等。

如要手動強制 Chrome 檢查更新的資訊清單，您可以使用命令列標記 --disable-manifest-update-throttle 啟動 Chrome，或是重新啟動 Chrome (使用 about://restart)，這樣就能重設計時器，讓 Chrome 在下次啟動 PWA 時檢查更新的資訊清單。然後啟動 PWA。關閉 PWA 後，應使用新的資訊清單屬性進行更新。

參考資料

Android 版 Chrome 的更新

啟動 PWA 時，Chrome 會判斷上次檢查本地資訊清單是否有變更的時間。如果資訊清單在過去 24 小時內未經過檢查，Chrome 就會為資訊清單排程網路要求，然後將要求與本機副本進行比對。

如果資訊清單中選取的屬性已變更 (請見下方清單)，Chrome 會將新的資訊清單加入佇列，而 PWA 的所有視窗都關閉後，裝置就會接上電源並連上 Wi-Fi，Chrome 就會向伺服器要求更新後的 WebAPK。更新完成後，系統會使用新資訊清單的所有欄位。

哪些屬性會觸發更新作業？

  • name
  • short_name
  • icons
  • background_color
  • display
  • orientation
  • scope
  • shortcuts
  • start_url
  • theme_color
  • web_share_target

如果 Chrome 無法從伺服器取得更新後的資訊清單，每次檢查之間的間隔時間可能會增加至 30 天。

測試資訊清單更新

about://webapks 頁面內含裝置上安裝的所有 PWA 詳細資訊，另外還會說明資訊清單的上次更新時間、更新頻率等等。

如要手動排定更新資訊清單的時程，覆寫計時器和本機資訊清單的步驟如下：

  1. 插上裝置並確認已連上 Wi-Fi。
  2. 使用 Android 工作管理員關閉 PWA，然後使用 Android 設定中的「應用程式」面板強制停止 PWA。
  3. 在 Chrome 中開啟 about://webapks，然後按一下 PWA 的「更新」按鈕。「更新狀態」會變更為「待處理」。
  4. 啟動 PWA，並確認 PWA 已正確載入。
  5. 請使用 Android 工作管理員關閉 PWA，然後使用 Android 設定中的「應用程式」面板強制停止 PWA。

PWA 通常會在幾分鐘內更新，更新完成後，「更新狀態」就會變更為「成功」

參考資料