透過網頁應用程式資訊清單 ID 屬性明確識別 PWA

Pete LePage

使用者安裝 PWA 時，瀏覽器需要能夠唯一識別 PWA。不過，直到最近，網頁應用程式資訊清單規格才明確定義了一種用於識別 PWA 的專屬方法，讓瀏覽器自行決定，進而導致不同的實作方式。在某些瀏覽器中，系統會使用 start_url，在其他瀏覽器中則會使用資訊清單檔案的路徑，因此無法更新其中任何欄位。

為解決這個問題，我們在網頁應用程式資訊清單規格中提供了新的選用 id 屬性，可讓您明確定義 PWA 使用的 ID。將 id 屬性新增至資訊清單，即可移除對 start_url 或資訊清單位置的依附元件，並在日後更新這些項目。

id 屬性的作用為何？

id 屬性向瀏覽器代表 PWA 的身分。如果瀏覽器發現資訊清單的 ID 與已安裝的 PWA 不符，就會將其視為新的 PWA，即使該資訊清單是從與其他 PWA 相同的網址提供服務也一樣。但如果資訊清單中的身分與已安裝的 PWA 相符，就會視為已安裝的 PWA。

瀏覽器支援

id 屬性已在 Chrome 96 中推出。

如果應用程式沒有 id，該怎麼辦？

您不需要採取任何行動，不在網頁應用程式資訊清單中加入 id 時 (只要 start_url 和資訊清單路徑保持相同)，就不會中斷。如要讓 PWA 持續保護，您可以在網頁應用程式資訊清單中加入 id 屬性。

如何決定及設定 id？

如要判斷 PWA 的 id，最安全也最準確的方法就是檢查 Chrome 計算的值。

  1. 使用 Chrome 96 以上版本，在開發人員工具中開啟「Application」面板的「Manifest」窗格。
  2. 如果在網頁應用程式資訊清單檔案中未指定 id，系統會在「Computed App Id」屬性下方顯示一則附註。
  3. 複製附註中顯示的 id 值 (請見下方螢幕截圖)。
  4. 使用附註中顯示的 id 值，將 id 屬性新增至網頁應用程式資訊清單。

開發人員工具「應用程式」面板中的運算應用程式 ID。

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

如果我沒有設定 id，會怎麼樣？

請放心，不會有任何資料遺失。從 Chrome 96 版開始，如果網頁應用程式資訊清單中沒有 start_url，瀏覽器會根據該資訊清單產生 id。

在網頁應用程式資訊清單中新增 id，即可變更 start_url 和資訊清單路徑 (但前提是其特定來源保持不變)，因為瀏覽器會根據指定的 id 而非 start_url 或資訊清單路徑，識別 PWA。

如何測試？

如要測試行為，請按照下列步驟操作：

  1. 安裝 PWA。
  2. 開啟 about://web-app-internals/，並檢查已安裝 PWA 的 manifest_id 和 start_url 屬性。
  3. 按照「如何判斷及設定 id」一節中的步驟，將 id 屬性新增至 Web 應用程式資訊清單。
  4. 使用 chrome://restart 重新啟動瀏覽器，從 about://apps 啟動 PWA，然後關閉 PWA 以強制重新整理資訊清單檔案。
  5. 開啟 about://web-app-internals/，檢查已安裝 PWA 的 manifest_id 屬性，確認該屬性未變更。
  6. 變更網頁應用程式資訊清單中的 start_url。
  7. 使用 chrome://restart 重新啟動瀏覽器，從 about://apps 啟動 PWA，然後關閉 PWA 以強制重新整理資訊清單檔案。
  8. 開啟 about://web-app-internals/，然後檢查已安裝 PWA 的 start_url 屬性，確認 PWA 是否已如預期更新。

其他資源