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

什麼是宣告式連結擷取?

點按網路上的連結有時會帶來驚喜。舉例來說,在行動裝置上點選 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>WebAppInstallsGlitch 適合用來快速分享簡單快速的提案,

展現對 API 的支援

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

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

實用連結

特別銘謝

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