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

允許安裝的 PWA 處理使用特定通訊協定的連結，提供更全面的整合體驗。

Thomas Steiner

成功：PWA 的網址通訊協定處理常式註冊屬於 功能專案，自 Chrome 96 起推出。

配置 (即通訊協定) 背景資訊

統一資源識別碼 (URI) 是一小段字元序列，可用來識別 抽像或實體資源每個 URI 的開頭都是 scheme 名稱是指 而指派 ID 或 ID 或 ID因此，URI 語法是一種可擴充的可延伸 因此，每個配置的規格都可能會進一步限制 擁有該配置的識別碼配置也稱為通訊協定。您可以在這個部分查看 評估方式。

tel:[phone]
mailto:[e-mail]
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」前往「Protocol Handlers」部分，「資訊清單」窗格。你可以 您可以在這裡查看及測試所有可用的通訊協定。

例如，安裝這個示範 PWA。在 通訊協定處理常式區段，輸入「americano」，然後按一下「測試通訊協定」開啟咖啡網頁。 。

示範

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

1. 前往 https://protocol-handler.glitch.me/，安裝 PWA，然後在安裝完成後重新載入應用程式。瀏覽器已將 PWA 註冊為 web+coffee 通訊協定和作業系統的處理常式。
2. 在已安裝的 PWA 視窗中點選連結 https://protocol-handler-link.glitch.me/.這將 開啟新的瀏覽器分頁，其中含有三個連結。按一下第一個或第二次出現 (拿鐵瑪奇亞，或是 americano)。瀏覽器現在會顯示提示，並詢問您是否使用以下應用程式： 通訊協定處理常式web+coffee。如果你同意，PWA 就會開啟，並顯示 只選出一個咖啡店。
3. 如要與使用 navigator.registerProtocolHandler() 的傳統流程比較，請按一下 開啟 PWA 中的「註冊通訊協定處理常式」按鈕。接著，在瀏覽器分頁中，點選第三個連結 (chai)。同樣地，系統會顯示提示，但不會在瀏覽器視窗中開啟 PWA。
4. 利用平台專屬應用程式 (例如 Windows 上的 Skype) 傳送訊息給自己，並附上以下連結： <a href="web+coffee://americano">Americano</a>，然後按一下。同樣地，開啟 安裝 PWA。

安全性考量

由於 PWA 安裝作業需要安全內容，因此通訊協定處理機制會沿用這項設定 限制。已註冊的通訊協定處理常式清單不會以任何方式在網路上公開，因此 無法用做數位指紋採集向量

非使用者啟動的瀏覽嘗試

非使用者啟動但屬於程式輔助方式的瀏覽嘗試，可能無法開啟 應用程式。自訂通訊協定網址只能用於頂層瀏覽環境，例如 做為 iframe 的網址

通訊協定許可清單

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

同意提示

由於叫用通訊協定而首次啟動 PWA 時，使用者會看到 權限對話方塊此對話方塊將顯示應用程式名稱和來源，並詢問使用者 應用程式能處理來自通訊協定的連結。如果使用者拒絕權限對話方塊， 作業系統將忽略已註冊的通訊協定處理常式。如何取消註冊通訊協定 處理常式時，使用者需要解除安裝已註冊的 PWA。瀏覽器也會取消註冊 如果使用者選取 [記住我的選擇]，則通訊協定處理常式然後選取「禁止」

意見回饋

Chromium 團隊想瞭解你的網址通訊協定處理常式註冊使用經驗： PWA。

請與我們分享 API 設計

您覺得這個 API 有任何不如預期的運作方式嗎？或者缺少某些方法 需要實現什麼構想？對安全性有任何疑問或意見 以及模型在對應的 GitHub 存放區上提出規格問題，或將您的想法新增至 現有的問題。

回報導入問題

您發現 Chromium 實作錯誤嗎？還是採用與規格不同？ 前往 new.crbug.com 回報錯誤。請務必盡量提供詳細資料 重現問題的簡單操作說明，然後在「Components」(元件) 中輸入 UI>Browser>WebAppInstalls。 方塊。Glitch 有便捷的報復工具，

顯示對 API 的支援

您是否打算使用 PWA 的網址通訊協定處理常式註冊？你的公開支援讓 Chromium 團隊會優先開發功能，並向其他瀏覽器供應商說明支援的重要性 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件

歡迎前往 WICG Discourse 討論串，說明這項工具的運用方式。傳送 Tweet 給 使用主題標記 @ChromiumDev #ProtocolHandler敬上 ，並說明你使用這項服務的位置和方式。

實用連結

• 說明
• 規格草稿
• GitHub
• ChromeStatus
• Chromium 錯誤
• TAG 審查
• 課程

特別銘謝

已實作 PWA 的網址通訊協定處理常式註冊，並由 Fabio Rocha Diego González， Connor Moody，以及 Microsoft Edge 團隊的 Samuel Tang。本文 審查者為 Joe Medley 和 Fabio Rocha。主頁橫幅製作者： JJ Ying 的 Unsplash 網站上。