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

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

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

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

在大多數情況下，資訊清單更新後，變更內容會在 PWA 推出後一兩天內反映。

Chrome 電腦版更新

啟動 PWA 或在瀏覽器分頁中開啟 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 後，應使用新的資訊清單屬性更新 PWA。

參考資料

Android 版 Chrome 的更新

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

如果清單中列出的資訊清單屬性有所變更，Chrome 會將新資訊清單加入佇列，並在關閉 PWA 的所有視窗、插上裝置並連上 Wi-Fi 後，從伺服器要求更新的 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 的「更新」按鈕。「Update Status」應變更為「Pending」。
  4. 啟動 PWA，並確認是否已正確載入。
  5. 使用 Android 工作管理員關閉 PWA，然後使用 Android 設定中的「應用程式」面板強制停止 PWA。

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

參考資料