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

Pete LePage

當使用者安裝您的 PWA 時，瀏覽器需要有明確識別的方式 。但直到最近，網頁應用程式資訊清單規格並未明確 定義一種明確識別 PWA 的方式，讓瀏覽器不必做決定， 就會導致不同的實作方式在某些瀏覽器中，start_url 在其他情況下，系統會使用資訊清單檔案的路徑 無法更新上述任何一個欄位。

為解決這個問題，網頁應用程式提供了新的選用 id 屬性 資訊清單，可讓您明確定義 您的 PWA。在資訊清單中新增 id 屬性，會移除 start_url 或資訊清單的位置，方便您 。

id 屬性有什麼功用？

id 屬性向瀏覽器代表 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 版開始， 如果資訊清單中沒有 id，瀏覽器就會產生 id 根據網頁應用程式資訊清單中的 start_url。

在網頁應用程式資訊清單中加入 id 變更 start_url 和資訊清單路徑 (只有當 origin 維持不變！)、 因為瀏覽器 會根據指定的 id (而非 start_url) 來識別 PWA 資訊清單路徑。

如何測試這一點？

如要測試行為，請 步驟如下：

  1. 安裝 PWA。
  2. 開啟 about://web-app-internals/ 並查看 unhashed_app_id 和 已安裝 PWA 的 start_url 屬性。
  3. 請按照下列步驟，在網頁應用程式資訊清單中新增 id 屬性： 如何決定及設定我的 id。
  4. 使用 chrome://restart 重新啟動瀏覽器，啟動 PWA： about://apps，然後關閉 PWA，即可強制重新整理資訊清單檔案。
  5. 開啟 about://web-app-internals/ 並檢查 manifest_id 屬性： 來確認其未變更。
  6. 在網頁應用程式資訊清單中變更 start_url。
  7. 使用 chrome://restart 重新啟動瀏覽器，啟動 PWA： about://apps，然後關閉 PWA，即可強制重新整理資訊清單檔案。
  8. 開啟 about://web-app-internals/ 並檢查 start_url 屬性： 。

其他資源