發布日期：2025 年 8 月 19 日
導覽管理涵蓋控制漸進式網頁應用程式 (PWA) 處理使用者導覽的方式。這項功能的重要環節是導覽擷取，也就是瀏覽器程序，可判斷點選連結時應啟動已安裝的 PWA，還是開啟新的瀏覽器分頁。
本指南涵蓋 Chrome 139 以上版本提供的全新導覽擷取功能。 雖然瀏覽器的預設行為適用於大多數情況，但如果您想為使用者打造最流暢的體驗，深入瞭解這些管理技術和相關 API 就非常重要。
「開發人員控制項」部分說明如何自訂導覽，為 PWA 提供最佳啟動體驗。
。新的預設行為
為配合使用者偏好設定並減少作業阻礙，Chrome 將統一處理連結的方式。先前，各平台上的行為不一致。 行動裝置通常會優先啟動已安裝的應用程式，而桌機瀏覽器會先在分頁中開啟連結，然後再發出信號，表示應用程式可以處理該連結。
新的統一式導覽擷取方法會自動在對應的已安裝 PWA 中開啟連結。只有在未安裝 PWA 或使用者選擇不使用時，連結才會改為在瀏覽器分頁中開啟。這項新功能適用於 Windows、Mac 和 Linux 系統的 Chrome 139 版，ChromeOS 支援功能將在日後版本中推出。
導覽管理程序
擷取導覽是導覽管理程序的一環。這個程序涵蓋整個流程，從使用者的初始動作到瀏覽器的決策，以及開發人員設定的結果行為：
- 使用者動作：包括點選或輕觸連結等互動。
- 瀏覽器決策：包括瀏覽器管理的任務和決策，例如導覽擷取等預設行為。
- 開發人員控制項：包括網頁 API，可讓開發人員指示瀏覽器如何處理特定工作。
這些元素之間的互動會決定 PWA 是在獨立視窗還是瀏覽器分頁中開啟。
基本導覽管理的使用情境是使用者在瀏覽器的其他頁面中，點選或輕觸已安裝 PWA 的連結。以下範例說明使用者安裝 Google Chat PWA 後，點選 Google 日曆邀請中的連結會發生什麼情況。
calendar.google.com 點選 chat.google.com 的連結 (以 PWA 形式安裝)。使用者動作
每個使用者動作都包含三個主要元素：事件 (例如點按或輕觸)、介面 (例如網頁或桌面捷徑)，以及啟動的連結類型 (例如 HTTPS 網址)。舉例來說，使用者可能在 calendar.google.com 的網頁上，點選 Google Chat PWA 範圍內的 https://chat.google.com/meeting_room_id 連結。
瀏覽器決策
使用者採取動作 (例如點選上一個步驟中的連結) 時，瀏覽器會執行導覽擷取程序，判斷連結應在瀏覽器分頁或已安裝的 PWA 中開啟。包含下列步驟：
- 判斷導覽是否可擷取：一般來說，如果導覽會建立新影格，且不會在輔助瀏覽環境中開啟，就會視為可擷取。
- 找出控管 PWA：如果導覽可擷取，瀏覽器會嘗試找出「控管」網址的 PWA (屬於網頁應用程式資訊清單中定義的範圍)。
- 驗證使用者偏好設定：如果找到控管 PWA，瀏覽器會檢查使用者偏好設定。如果使用者未在應用程式設定中停用這項功能，系統會啟動 PWA；否則，連結會在新的瀏覽器分頁中開啟。
- 啟動 PWA：瀏覽器會使用啟動處理演算法啟動 PWA。您可以使用啟動處理常式 API 影響這項行為，詳情請見下文。
下圖概略說明這個程序：
開發人員控制項
雖然導覽程序主要依賴瀏覽器預設值和使用者設定，但您可以使用各種 API 管理特定層面。隨著近期導覽擷取更新，一些長期使用的 Web API 變得更加重要。
Launch Handler API
當瀏覽器決定啟動 PWA 時，這個 API 就會派上用場，讓您控制啟動方式，例如在新視窗或現有視窗中啟動。
透過網頁應用程式資訊清單中的 launch_handler 成員定義 PWA 的啟動方式，包括名為 client_mode 的子欄位。這個子欄位會判斷應使用新視窗或現有視窗，以及是否應導覽。client_mode 的允許值如下：
focus-existing：在現有應用程式視窗中處理連結，例如已在獨立模式下執行的 PWA。navigate-existing：如果選擇這個選項，系統會將網頁應用程式視窗中最近互動的瀏覽環境，導向啟動目標網址。navigate-new：選用這個選項時，系統會在網頁應用程式視窗中建立新的瀏覽環境，載入啟動目標網址。
使用 launchQueue API 提供其他參數，並處理特殊情況。Launch Handler API 可在 Chrome 110 以上版本使用，但搭配導覽擷取更新功能會更加實用。詳情請參閱 Launch Handler API 說明文件。
其他相關 API
除了啟動處理作業，其他 API 也可能在這個程序中發揮作用，視應用程式的特定需求而定。包括網址通訊協定處理常式，可讓網頁應用程式註冊處理 http 和 https 以外的網址配置 (例如 mailto: 等標準通訊協定，或 web+music 等自訂通訊協定)。此外，網頁應用程式範圍擴充功能 API (目前正在開發中) 可讓您擴充 PWA 的範圍，擷取其他來源 (包括子網域) 的連結，因此當使用者點選相關來源的連結時，系統就能啟動 PWA。深入探討這些主題超出本文範圍，但您可以查看對應連結瞭解詳情。
用途：在 Chat PWA 中擷取 Google Chat 連結
最後，我們以使用者點選 Google 日曆連結前往 Google Chat 聊天室為例，說明各個部分如何搭配運作 (使用者已安裝 Google Chat PWA)。
擷取導覽資訊前
在下列影片中，使用者建立 Google 日曆會議並邀請三位訪客。日曆應用程式會自動產生 Google Chat 連結，並將所有參與者加入對話。使用者點選這個連結後，聊天室會在新的瀏覽器分頁中開啟。網址列中的圖示會指出已安裝對應的 PWA，但使用者必須手動啟動。這是導覽擷取更新前的行為：
擷取導覽畫面後
以下影片顯示相同的使用者工作流程，但現在採用新的導覽擷取行為。在這個版本中，點選 Google 日曆中的 Google Chat 連結後，系統會直接在已安裝的 PWA 中開啟對應的聊天室。此外，Google Chat 團隊已在 Web App Manifest 中加入 launch_handler 屬性，實作啟動處理程序。將其 client_mode 設為 focus-existing，即可確保連結會在現有的 PWA 執行個體中開啟 (如果已在執行)。由於省去開啟新瀏覽器分頁，然後觸發網頁載入的延遲時間，因此有效「使用者互動時間」的設計速度會更快。事實上，Google Chat 不再需要啟動新應用程式，因此大幅改善了導覽延遲問題。
結論與後續行動
本文探討了 Chrome 139 以上版本提供的新預設導覽擷取行為，重點是使用者在已安裝 PWA 的範圍內點選 HTTPS 連結時的常見用途。如要瞭解詳情和使用案例，請參閱「Navigation Management into Installed PWAs」。下圖完整列出各種用途，包括使用者事件、介面和通訊協定，以及對應的結果：
導覽管理是應用程式 UX 的重要環節，但經常遭到忽略，因為這項管理作業會控管應用程式的進入點。本文涵蓋的功能和連結可協助您為 PWA 打造最佳的應用程式式體驗。