選擇範圍內連結透過宣告式連結擷取功能開啟 PWA 的方式

Thomas Steiner

什麼是宣告式連結擷取？

點選網路上的連結有時會帶來驚喜，舉例來說，在行動裝置上點選 YouTube 網頁連結時，如果已安裝 YouTube iOS 或 Android 應用程式，系統就會開啟該應用程式。不過，在桌上型電腦上安裝 YouTube PWA 後，點選連結時會在瀏覽器分頁中開啟。

但情況更加複雜。如果連結不是出現在網站上，而是顯示在 Google 即時通訊應用程式收到的即時通訊訊息中，該怎麼辦？在具有獨立應用程式視窗概念的電腦作業系統上，如果應用程式已開啟，是否應為每次點選連結建立新的視窗或分頁？仔細想想，擷取連結和導覽的方式有很多種，包括但不限於：

聲明式連結擷取功能提案建議在網頁應用程式資訊清單中加入名為 "capture_links" 的屬性，讓開發人員以聲明方式決定瀏覽器從導覽範圍外的環境導覽至應用程式導覽範圍內的網址時，應採取的動作。如果使用者已在導覽範圍內 (例如使用者開啟的瀏覽器分頁在範圍內，並點按內部連結)，則這項提案不適用。

一般來說，中鍵點選連結 (或按下滑鼠右鍵，然後選取「在新分頁中開啟」) 等特殊情況不會觸發連結擷取行為。連結是否為 target=_self 或 target=_blank 都不重要，因此即使連結通常會導致在同一分頁中導覽，在瀏覽器視窗 (或其他 PWA 的視窗) 中點選的連結仍會在 PWA 中開啟。

建議用途

可能使用這項 API 的網站包括：

  • 如果使用者點選 PWA 的連結，PWA 希望開啟視窗而非瀏覽器分頁。在電腦環境中，同時開啟多個應用程式視窗通常是合理的做法。
  • 單一視窗 PWA：開發人員偏好隨時只開啟一個應用程式執行個體，並將新導覽作業的焦點放在現有執行個體。子用途包括：
    • 只適合執行一個執行個體的應用程式 (例如音樂播放器、遊戲)。
    • 應用程式在單一執行個體中包含多文件管理功能 (例如以 HTML 實作的索引標籤列)。

透過 about://flags 啟用

如要在本機環境中試用宣告式連結擷取功能，且不使用原始碼試用權杖，請在 about://flags 中啟用 #enable-desktop-pwas-link-capturing 標記。

如何使用聲明式連結擷取功能？

開發人員可以利用額外的網頁應用程式資訊清單欄位 "capture_links"，以宣告方式決定應如何擷取連結。這個屬性的值是字串或字串陣列。如果提供字串陣列，使用者代理程式會選擇清單中第一個支援的項目，預設為 "none"。支援下列值：

  • "none" (預設)：不擷取連結；點選導向這個 PWA 範圍的連結時，會正常導覽，不會開啟 PWA 視窗。
  • "new-client"：每個點選的連結都會在該網址開啟新的 PWA 視窗。
  • "existing-client-navigate"：如果現有 PWA 視窗可用，點選的連結會在該視窗中開啟，否則會在新的視窗中開啟。如果有多個 PWA 視窗，瀏覽器可能會任意選擇一個。如果目前沒有開啟任何視窗，這項行為與 "new-client" 類似。🚨 小心！這個選項可能會導致資料遺失，因為系統可能會任意導覽離開網頁。網站應瞭解，選擇這個選項即表示同意這類行為。這個選項最適合「唯讀」網站，這類網站不會將使用者資料儲存在記憶體中，例如音樂播放器。如果使用者要離開的網頁有 beforeunload 事件，系統會在完成導覽前顯示提示。

示範

宣告式連結擷取功能的示範實際上包含兩個互動式示範：

  1. 網站 1
  2. 網站 2

下方的螢幕錄影畫面顯示兩者如何互動。這兩個圖示代表兩種不同的行為，分別是 "new-client" 和 "existing-client-navigate"。請務必測試應用程式在不同狀態下的行為，例如在分頁中執行或以已安裝的 PWA 執行，藉此查看行為差異。

安全性和權限

Chromium 團隊根據「控管強大的網頁平台功能存取權」中定義的核心原則 (包括使用者控制權、資訊公開和人體工學)，設計及實作了宣告式連結擷取功能。這個 API 可讓網站使用新的額外控制選項。首先， 能夠在視窗中自動開啟已安裝的應用程式。這項功能會使用現有 UI，但可讓網站自動觸發。其次，能夠將現有視窗聚焦於自身網域，並觸發含有點擊網址的事件。這項功能可讓網站將現有視窗導向新網頁，覆寫預設的 HTML 導覽流程。

遷移至 Launch Handler API

Declarative Link Capturing API 的來源試用已於 2022 年 3 月 30 日結束，適用於 Chromium 97 以下版本。Chromium 98 以上版本將提供一組新功能和 API，取代這項功能，包括使用者可啟用的連結擷取功能和 Launch Handler API。

在 Chromium 98 中，自動擷取連結現在是使用者選擇加入的行為，而不是在安裝時授予網頁應用程式。如要啟用連結擷取功能，使用者必須使用「開啟方式」從瀏覽器啟動已安裝的應用程式，然後選擇「記住我的選擇」。

已安裝應用程式的「開啟方式」設定範例，並已啟用「記住我的選擇」選項。

或者，使用者也可以在應用程式管理設定頁面中，為特定網頁應用程式開啟或關閉連結擷取功能。

已安裝應用程式的設定頁面範例。

目前連結擷取功能僅適用於 ChromeOS，Windows、macOS 和 Linux 的支援功能正在開發中。

Launch Handler API

傳入導覽的控制項已遷移至 Launch Handler API，可讓網頁應用程式決定在各種情況下 (例如擷取連結、分享目標或檔案處理等) 啟動網頁應用程式的方式。如要從 Declarative Link Capturing API 遷移至 Launch Handler API，請按照下列步驟操作：

  1. 註冊網站以參加啟動處理常式來源試用，並將來源試用金鑰放入 Web 應用程式。

  2. 在網站資訊清單中新增 "launch_handler" 項目。

    • 如要使用 "capture_links": "new-client"，請新增："launch_handler": { "route_to": "new-client" }。
    • 如要使用 "capture_links": "existing-client-navigate"，請新增： "launch_handler": { "route_to": "existing-client-navigate" }。
    • 如要使用 "capture_links": "existing-client-event" (從未在宣告式連結擷取來源試用中實作)，請新增： "launch_handler": { "route_to": "existing-client-retain" }。 選取這個選項後，系統擷取連結導覽時，應用程式範圍內的網頁就不會再自動導覽。您必須在 JavaScript 中處理 LaunchParams，方法是呼叫 window.launchQueue.setConsumer() 來啟用導覽。

capture_links 欄位和宣告式連結擷取來源試用註冊將於 2022 年 3 月 30 日到期。這樣一來，使用 Chromium 97 以下版本的使用者，仍可透過擷取的連結啟動網頁應用程式。

詳情請參閱「控管應用程式的啟動方式」。

意見回饋

Chromium 團隊很想瞭解您使用宣告式連結擷取的體驗。

介紹 API 設計

API 是否有任何不符合預期的運作方式？或者，是否有缺少的屬性或方法需要實作，才能實現您的想法？對安全模型有任何問題或意見嗎？在對應的 GitHub 存放區中提出規格問題，或在現有問題中新增想法。

回報導入問題

您是否發現 Chromium 實作有錯誤？還是實作方式與規格不同？ 在 new.crbug.com 回報錯誤。請務必盡可能提供詳細資料、重現問題的簡單操作說明，並在「Components」(元件) 方塊中輸入 UI>Browser>WebAppInstalls。

支援 API

您是否打算使用宣告式連結擷取功能？您的公開支持有助於 Chromium 團隊優先處理功能，並向其他瀏覽器供應商展示支援這些功能的重要性。

使用 #DeclarativeLinkCapturing 主題標記傳送推文給 @ChromiumDev，告訴我們您在何處使用這項功能，以及使用方式。

實用連結

特別銘謝

宣告式連結擷取功能是由 Matt Giuca 指定，並參考 Alan Cutter 和 Dominick Ng 的意見。這個 API 是由 Alan Cutter 實作。本文由 Joe Medley、Matt Giuca、Alan Cutter 和 Shunya Shishido 審查。主頁橫幅圖片由 Zulmaury Saavedra 在 Unsplash 上提供。