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

Pete LePage

當使用者安裝 PWA 時，瀏覽器需要利用一種方法來識別 PWA。但我們最近並未透過網頁應用程式資訊清單規格，明確定義識別 PWA 的方法，讓瀏覽器決定並促成不同的實作。有些瀏覽器會使用 start_url，有些則會使用資訊清單檔案的路徑，因此這兩種欄位無法更新。

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

id 屬性的用途為何？

id 屬性代表瀏覽器的身分，讓使用者瞭解 PWA。如果瀏覽器看到的資訊沒有與已安裝 PWA 的身分相符，就會將其視為新的 PWA，即使它與另一個 PWA 的網址相同，也會將其視為新的 PWA。但如果系統發現資訊清單的身分與已安裝的 PWA 相符，就會將其視為已安裝的 PWA。

瀏覽器支援

Chrome 96 版中現有的 id 資源支援。

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

您無須採取任何行動，如果沒有在網頁應用程式資訊清單中加入 id，則只要 start_url 和資訊清單路徑保持相同，就不會中斷。為使 PWA 永不過時，您可以在網頁應用程式資訊清單中新增 id 屬性。

如何找出並設定 id？

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

  1. 在 Chrome 96 以上版本中，開啟開發人員工具的「Application」面板的「Manifest」窗格。
  2. 將滑鼠遊標懸停在「App Id」屬性旁邊的 (!) 圖示上。只有在網頁應用程式資訊清單檔案「未」指定 id 時，才會顯示 (!) 工具提示圖示。
  3. 請注意工具提示中顯示的 id 值 (請見下方螢幕截圖)。
  4. 使用工具提示中顯示的 id 值，將 id 屬性新增至網頁應用程式資訊清單。

顯示「id」值的工具提示。

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

如果我沒有設定 id，該怎麼辦？

別擔心，不會中斷任何事情。從 Chrome 96 版開始，如果資訊清單中沒有根據網頁應用程式資訊清單中的 start_url，瀏覽器會產生 id。

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

如何測試？

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

  1. 安裝 PWA。
  2. 開啟 about://web-app-internals/ 並查看 unhashed_app_id 和 start_url 屬性，找出已安裝的 PWA。
  3. 按照上方「如何判斷及設定 id」一節中的步驟，在網頁應用程式資訊清單中新增 id 屬性。
  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 屬性，確認是否已如預期更新。

其他資源