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

Thomas Steiner
Thomas Steiner

什麼是宣告式連結擷取？

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

但變得更加複雜如果這個連結不在任何網站上，而是透過 Google 任一即時通訊應用程式收到的即時通訊訊息，該怎麼辦？在電腦作業系統上，哪些應用程式視窗沒有個別的應用程式視窗，如果應用程式已開啟，應該為每個連結點擊建立新視窗或分頁？仔細思考後，您可以透過多種方式擷取連結和導覽，包括但不限於：

「宣告式連結擷取」是名為 "capture_links" 的網頁應用程式資訊清單屬性提案，可讓開發人員透過宣告方式，判斷瀏覽器應從導覽範圍外的情境前往瀏覽器前往網址時，應採取什麼動作。如果使用者位於導覽範圍內 (例如使用者在範圍中開啟瀏覽器分頁，然後點按內部連結)，則不適用此提案。

有些特殊條件 (例如點按連結 (或按一下滑鼠右鍵，然後「在新分頁中開啟」)) 通常不會觸發連結擷取行為。無論連結是 target=_self 還是 target=_blank，在瀏覽器視窗中點選的連結 (或不同 PWA 視窗) 是否會造成在相同分頁中開啟，仍會在 PWA 中開啟。

建議用途

可能使用此 API 的網站範例包括：

  • 這類 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. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

下方的螢幕側錄會顯示這兩項功能的互動方式。表示 "new-client" 和 "existing-client-navigate" 這兩種不同的行為。請務必以不同的狀態測試應用程式、在分頁中執行，或以已安裝的 PWA 的形式執行，以便瞭解行為的差異。

安全性和權限

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

遷移至啟動處理常式 API

Chromium 97 以下版本的宣告式連結擷取 API 來源試用 已於 2022 年 3 月 30 日到期。並且將由 Chromium 98 以上版本中的一組新功能和 API 取代，其中包含已啟用使用者啟用的連結擷取功能，以及 Launch Handler API。

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

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

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

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

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

啟動處理常式 API

傳入導覽的控制項已遷移至 Launch Handler API，可讓網頁應用程式決定網頁應用程式在不同情況下 (例如擷取連結、分享目標或檔案處理等) 的啟動方式。如要從宣告式連結擷取 API 遷移至 Launch Handler API：

  1. 註冊您的網站以啟動處理常式來源試用，並將來源試用金鑰放入您的網頁應用程式中。

  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" }。採用這個選項後，系統擷取連結導覽功能時，應用程式範圍內的頁面不會再自動瀏覽。您必須呼叫 window.launchQueue.setConsumer() 來啟用導覽功能，以處理 JavaScript 中的 LaunchParams。

capture_links 欄位和宣告連結 - 擷取來源試用註冊作業的有效期限為 2022 年 3 月 30 日。這可確保 Chromium 97 以下版本的使用者仍可在擷取的連結上啟動網頁應用程式。

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

意見回饋：

Chromium 團隊想瞭解你透過「宣告連結擷取」功能的使用體驗。

告訴我們 API 設計

有什麼 API 功能不如您預期嗎？或者您需要實作提案的方法或屬性嗎？對於安全性模型有任何疑問或意見嗎？在對應的 GitHub 存放區上提交規格問題，或是將您的想法新增至現有問題中。

回報導入問題

你在 Chromium 的實作方式中發現錯誤嗎？或者，實作項目是否與規格不同？ 請前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細的細節、重現簡易操作說明，並在「元件」方塊中輸入 UI>Browser>WebAppInstalls。Glitch 適合用來快速分享簡單快速的提案，

展現對 API 的支援

您打算使用宣告式連結擷取功能嗎？您的公開支援可協助 Chromium 團隊決定功能的優先順序，以及向其他瀏覽器廠商說明這項功能有多重要。

請使用主題標記 #DeclarativeLinkCapturing 將 Tweet 訊息傳送至 @ChromiumDev，告訴我們您的使用地點和方式。

實用連結

特別銘謝

宣告式連結擷取由 Matt Giuca 指定，並由 Alan Cutter 和 Dominick Ng 提供。API 是由 Alan Cutter 實作。本文由 Joe Medley、Matt Giuca、Alan Cutter 和 Shunya Shishido 審核。Zulmaury Saavedra 在 Unsplash 上提供的主頁橫幅。