當使用者安裝 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 計算的值。
- 在 Chrome 96 以上版本中,開啟開發人員工具的「Application」面板的「Manifest」窗格。
- 將滑鼠遊標懸停在「App Id」屬性旁邊的
(!)
圖示上。只有在網頁應用程式資訊清單檔案「未」指定id
時,才會顯示(!)
工具提示圖示。 - 請注意工具提示中顯示的
id
值 (請見下方螢幕截圖)。 - 使用工具提示中顯示的
id
值,將id
屬性新增至網頁應用程式資訊清單。
{
...
id: "/?homescreen=1",
start_url: "/?homescreen=1",
...
}
如果我沒有設定 id
,該怎麼辦?
別擔心,不會中斷任何事情。從 Chrome 96 版開始,如果資訊清單中沒有根據網頁應用程式資訊清單中的 start_url
,瀏覽器會產生 id
。
在網頁應用程式資訊清單中新增 id
,就可以變更 start_url
和資訊清單路徑 (只有在其特定的來源保持不變的情況下),因為瀏覽器會根據指定的 id
識別 PWA,而非 start_url
或資訊清單路徑。
如何測試?
如要測試行為,請按照下列步驟操作:
- 安裝 PWA。
- 開啟
about://web-app-internals/
並查看unhashed_app_id
和start_url
屬性,找出已安裝的 PWA。 - 按照上方「如何判斷及設定
id
」一節中的步驟,在網頁應用程式資訊清單中新增id
屬性。 - 使用
chrome://restart
重新啟動瀏覽器,從about://apps
啟動 PWA,然後關閉 PWA,以強制重新整理資訊清單檔案。 - 開啟
about://web-app-internals/
並查看已安裝 PWA 的manifest_id
屬性,確認該屬性並未變更。 - 變更網頁應用程式資訊清單中的
start_url
。 - 請使用
chrome://restart
重新啟動瀏覽器,從about://apps
啟動 PWA,然後關閉 PWA,以強制重新整理資訊清單檔案。 - 開啟
about://web-app-internals/
並查看已安裝 PWA 的start_url
屬性,確認是否已如預期更新。