PWA 的網址通訊協定處理常式註冊

允許已安裝的 PWA 處理使用特定通訊協定的連結，藉此提供更貼近需求的整合體驗。

Thomas Steiner

配置的背景 (又稱為通訊協定)

「統一資源識別碼」 (URI) 是精簡的字元序列，用於識別抽像或實體資源。每個 URI 都以「配置」名稱開頭，該名稱會參照該配置中指派 ID 的規格。因此，URI 語法是一個聯合且可擴充的命名系統，其中每個配置的規格都可以進一步限制使用該配置的 ID 語法和語意。配置也稱為通訊協定。請參考以下幾個配置範例。

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

「統一資源定位器」 (網址) 一詞是指 URI 的子集，除了識別資源之外，您還可以透過描述資源主要存取機制 (例如網路位置) 的方式找到資源的方法。

registerProtocolHandler() 方法的背景

僅限安全內容的 Navigator 方法 registerProtocolHandler() 可讓網站註冊可開啟或處理特定網址配置的功能。因此，網站需要呼叫以下方法：navigator.registerProtocolHandler(scheme, url)。這兩個參數的定義如下：

  • scheme：字串，包含網站要處理的通訊協定。
  • url：包含處理常式網址的字串。此網址必須包含 %s 做為預留位置，系統會替換為要處理的逸出網址。

配置必須是列入許可清單的配置之一 (例如 mailto、bitcoin 或 magnet)，或以 web+ 開頭，並在 web+ 前置字串後加上至少一個小寫的 ASCII 字母，例如 web+coffee。

為了更清楚說明流程，以下是流程的具體範例：

  1. 使用者造訪位於 https://coffeeshop.example.com/ 的網站，並發出以下呼叫：navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')。
  2. 之後造訪 https://randomsite.example.com/ 時，使用者按下 <a href="web+coffee:latte-macchiato">All about latte macchiato</a> 之類的連結。
  3. 瀏覽器會前往下列網址：https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato。搜尋字串網址解碼後，會讀取 ?type=web+coffee://latte-macchiato。

適用的通訊協定處理方式

目前的 PWA 網址通訊協定處理常式註冊機制會透過資訊清單提供通訊協定處理常式註冊，做為 PWA 安裝的一部分。將 PWA 註冊為通訊協定處理常式後，當使用者在瀏覽器或平台專屬應用程式中點選具有特定配置的超連結 (例如 mailto、bitcoin 或 web+music) 時，已註冊的 PWA 就會開啟並接收網址。請注意，雖然建議的資訊清單式註冊和傳統的 registerProtocolHandler() 在實際操作上扮演著非常相似的角色，同時仍可讓使用者體驗相輔相成：

  • 相似之處包括允許註冊的配置清單，以及參數的名稱和格式等。
  • 資訊清單式註冊作業差異不大，但可能有助於改善 PWA 使用者的體驗。舉例來說，除了使用者啟動的 PWA 安裝，以資訊清單為基礎的 PWA 註冊不一定需要使用者執行其他動作。

用途

  • 使用文字處理 PWA 時，文件中的使用者會看到 web+presentations://deck2378465 這類簡報的連結。當使用者點選連結時，簡報 PWA 會自動在正確的範圍內開啟，並顯示簡報。
  • 在平台專用的即時通訊應用程式中，即時通訊訊息的使用者會收到 magnet 網址連結。點選連結後，系統就會啟動已安裝的 Torrent PWA，並開始下載。
  • 使用者已安裝音樂串流 PWA。當好友分享 web+music://songid=1234&time=0:13 等歌曲的連結，且使用者點選該連結時，系統會自動在獨立視窗中啟動音樂串流 PWA。

如何使用 PWA 的網址通訊協定處理常式註冊

網址通訊協定處理常式註冊的 API 是根據 navigator.registerProtocolHandler() 密切建立模型。此時，資訊會透過名為 "protocol_handlers" 的新屬性中的網頁應用程式資訊清單，以宣告方式傳遞。該屬性採用包含兩個必要索引鍵 "protocol" 和 "url" 的物件陣列。下列程式碼片段說明如何註冊 web+tea 和 web+coffee。這些值為包含處理常式網址的字串，且逸出網址必須包含 %s 預留位置。

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

多個應用程式註冊使用同一個通訊協定

如果多個應用程式本身註冊為同一配置的處理常式 (例如 mailto 通訊協定)，作業系統會顯示挑選器，並讓使用者決定要使用哪一個已註冊的處理常式。

同一個應用程式註冊多個通訊協定

同一個應用程式可以註冊多個通訊協定，如以上程式碼範例所示。

應用程式更新和處理常式註冊

處理常式註冊會與應用程式提供的最新資訊清單版本保持同步。有以下兩種情況：

  • 這項更新會新增處理常式觸發處理常式註冊 (與應用程式安裝無關)。
  • 這項更新會移除處理常式，觸發處理常式取消註冊 (與應用程式解除安裝作業不同)。

開發人員工具中的通訊協定處理常式偵錯

透過「Application」(應用程式) >「Manifest」(資訊清單) 窗格，前往「通訊協定處理常式」區段。您可以在此查看及測試所有可用的通訊協定。

例如安裝這個試用版 PWA。在「通訊協定處理常式」專區中輸入「americano」，然後按一下「TestProtocol」，在 PWA 中開啟咖啡頁面。

資訊清單窗格中的通訊協定處理常式

示範

您可以在 Glitch 上查看 PWA 的網址通訊協定處理常式註冊示範。

  1. 前往 https://protocol-handler.glitch.me/ 安裝 PWA，並在安裝完成後重新載入應用程式。瀏覽器現已將 PWA 註冊為與作業系統搭配使用的 web+coffee 通訊協定處理常式。
  2. 在已安裝的 PWA 視窗中，按一下 https://protocol-handler-link.glitch.me/ 連結。這樣會開啟新瀏覽器分頁，其中顯示三個連結。按一下第一個或第二個 (拿鐵的馬奇亞多或美利卡諾)。瀏覽器現在會顯示提示，並詢問應用程式是否為 web+coffee 通訊協定的通訊協定處理常式是否正確無誤。如果您同意，PWA 會開啟並顯示所選的咖啡。
  3. 如要與使用 navigator.registerProtocolHandler() 的傳統資料流進行比較，請按一下 PWA 中的「註冊通訊協定處理常式」按鈕。然後在瀏覽器分頁中，按一下第三個連結 (chai)。同樣會顯示提示，然後另外在分頁中開啟 PWA，而不是在瀏覽器視窗中開啟。
  4. 在 Windows 上的 Skype 等平台專屬應用程式上，透過 <a href="web+coffee://americano">Americano</a> 之類的連結傳送訊息給自己，然後按一下該連結。系統同樣應開啟已安裝的 PWA。

URL 通訊協定處理常式示範，瀏覽器分頁位於左側，右側為獨立 PWA 視窗。

安全性考量

由於 PWA 安裝作業需要確保背景資訊安全無虞，因此通訊協定處理功能會沿用這項限制。已註冊的通訊協定處理常式清單無法透過任何方式在網路上公開，因此無法做為指紋向量使用。

非使用者啟動的瀏覽嘗試

導覽嘗試不由使用者啟動，但用於程式輔助，因此無法開啟應用程式。自訂通訊協定網址只能用於頂層瀏覽內容，但無法做為 iframe 的網址使用。

通訊協定許可清單

和 registerProtocolHandler() 一樣，應用程式可以註冊要處理的通訊協定許可清單。

當使用者因叫用的通訊協定而首次啟動 PWA 時，系統會顯示權限對話方塊。這個對話方塊會顯示應用程式的名稱和來源，並詢問使用者是否已允許應用程式處理來自通訊協定的連結。如果使用者拒絕權限對話方塊，作業系統將忽略註冊的通訊協定處理常式。如要取消註冊通訊協定處理常式，使用者必須解除安裝註冊該處理常式的 PWA。如果使用者選取「記住我的選擇」並選取「不允許」，瀏覽器也會取消註冊通訊協定處理常式。

意見回饋：

Chromium 團隊想瞭解您在 PWA 的網址通訊協定處理常式註冊方面的使用體驗。

告訴我們 API 設計

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

回報導入問題

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

展現對 API 的支援

您打算使用 PWA 的網址通訊協定處理常式註冊嗎？您的公開支援可協助 Chromium 團隊排定功能的優先順序，並向其他瀏覽器廠商說明這項功能有多重要。

請在 WICG Discourse 討論串上分享計畫使用方式。使用主題標記 #ProtocolHandler 傳送推文到 @ChromiumDev，並告訴我們您的使用地點和方式。

特別銘謝

PWA 的網址通訊協定處理常式註冊是由 Microsoft Edge 團隊的 Fabio Rocha、Diego González、Connor Moody 和 Samuel Tang 實作及指定。本文由 Joe Medley 和 Fabio Rocha 審查。JJ Ying 在 Unsplash 上提供的主頁橫幅。