PWA 做為網址處理常式

讓已安裝的 PWA 處理網址，享有更整合的體驗。

Thomas Steiner

什麼是 PWA 網址處理常式？

假設你使用 macOS 上的訊息應用程式 (例如「訊息」應用程式) 與朋友聊天，並討論音樂。接著，假設兩人都已在裝置上安裝 music.example.com PWA。如要分享你最愛的曲目給好友，可以傳送 https://music.example.com/rick-astley/never-gonna-give-you-up 等深層連結給他們。由於這個連結的字數很長，因此 music.example.com 的開發人員可能決定為每個測試群組新增額外的短連結，例如 https://🎵.example.com/r-a/n-g-g-y-u。

透過 PWA 做為網址處理常式，music.example.com 等應用程式可將自己註冊為網址處理常式，以便處理符合 https://music.example.com、https://*.music.example.com 或 https://🎵.example.com 等模式的網址，讓來自 PWA 外部的連結 (例如來自即時通訊應用程式或電子郵件用戶端的連結) 在已安裝的 PWA 中開啟，而非在瀏覽器分頁中開啟。

PWA 做為網址處理常式，包含兩個新增項目：

1. "url_handlers" 網頁應用程式資訊清單成員。
2. web-app-origin-association 檔案格式，用於驗證範圍內和範圍外的網址關聯。

建議的 PWA 做為網址處理常式用途

以下列舉可能使用此 API 的網站：

• 音樂或影片串流網站，可在應用程式的播放器服務中開啟曲目連結或播放清單連結。
• 使用新聞或 RSS 閱讀器，以應用程式閱讀器模式開啟你追蹤或訂閱的網站。

如何將 PWA 用作網址處理常式

透過 about://flags 啟用

如要在本機測試 PWA 做為網址處理常式，而不需要來源試用權杖，請在 about://flags 中啟用 #enable-desktop-pwas-url-handling 標記。

"url_handlers" 網頁應用程式資訊清單成員

如要將已安裝的 PWA 與網址模式建立關聯，您必須在網頁應用程式資訊清單中指定這些模式。這項操作會透過 "url_handlers" 成員執行。這個函式會接受含有 origin 屬性的物件陣列，這是必要的 string，也是用於比對來源的模式。這些模式可使用萬用字元 (*) 前置字串，以加入多個子網域 (例如 https://*.example.com)。這個應用程式可處理與這些來源相符的網址。「配置」一律假設為 https://，但必須明確提及。

以下摘錄的網路應用程式資訊清單顯示，前述音樂 PWA 範例如何設定這項功能。使用萬用字元 ("https://*.music.example.com") 的第二個項目可確保應用程式也能為 https://www.music.example.com 或 https://marketing-activity.music.example.com 等其他可能的範例啟用。

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

web-app-origin-association 檔案

由於 PWA 位於與其需要處理的部分網址不同的來源 (music.example.com)，https://🎵.example.com)，應用程式就需要驗證這些其他來源的擁有權。這會發生在其他來源代管的 web-app-origin-association 檔案中。

此檔案必須包含有效的 JSON。頂層結構是物件，其中成員名稱為 "web_apps"。這個成員是物件陣列，每個物件都代表一個獨特網頁應用程式的項目。每個物件都包含：

每個 "details" 物件都包含：

以下是上述音樂 PWA 範例的 web-app-origin-association 範例檔案。它將由來源 🎵.example.com 代管，並與 music.example.com PWA (由網頁應用程式資訊清單網址識別) 建立關聯。

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

網址比對方式為何？

如果 PWA 符合下列兩個條件，就會與要處理的網址相符：

• 網址與 "url_handlers" 中的其中一個來源字串相符。
• 瀏覽器可透過對應的 web-app-origin-association 檔案進行驗證，確認各來源都同意讓這個應用程式處理這類網址。

關於 web-app-origin-association 檔案探索

開發人員必須將 web-app-origin-association 檔案放在應用程式根目錄的 /.well-known/ 資料夾中，瀏覽器才能找到 web-app-origin-association 檔案。為此，檔案名稱必須為 web-app-origin-association。

示範

如要測試 PWA 做為網址處理常式，請務必按照上述說明設定瀏覽器標記，然後前往 https://mandymsft.github.io/pwa/ 安裝 PWA。查看網頁應用程式資訊清單，您會發現該應用程式會處理以下網址模式的網址：https://mandymsft.github.io 和 https://luhuangmsft.github.io。由於後者位於與 PWA 不同的來源 (luhuangmsft.github.io)，因此 mandymsft.github.io 上的 PWA 需要證明擁有權，這會透過 https://luhuangmsft.github.io/.well-known/web-app-origin-association 代管的 web-app-origin-association 檔案完成。

如要測試是否確實運作，請使用你選擇的即時通訊應用程式，或在非網路郵件用戶端 (例如 macOS 上的 Mail) 中查看電子郵件，傳送測試訊息給自己。電子郵件或簡訊應包含 https://mandymsft.github.io 或 https://luhuangmsft.github.io 其中一個連結。這兩個連結都應在已安裝的 PWA 中開啟。

安全性和權限

Chromium 團隊根據「控制強大網路平台功能的存取權」一文中定義的核心原則，設計並實作 PWA 做為網址處理常式，包括使用者控管、資訊公開和人體工學。

使用者控制項

如果有多個 PWA 註冊為特定網址模式的網址處理常式，系統會提示使用者選擇要處理該模式的 PWA (如果有)。這項提案不會處理從瀏覽器分頁開始的導覽，而是明確針對從瀏覽器外開始的導覽。

透明度

如果 PWA 安裝期間因任何原因無法順利完成必要的關聯驗證，瀏覽器就不會將應用程式登錄為受影響網址的有效網址處理常式。如果網址處理常式實作不當，可能會遭到濫用，用來劫持網站流量。因此，應用程式關聯機制是這項配置的重要一環。

特定平台的應用程式已可使用作業系統 API 來列舉使用者系統上已安裝的應用程式。舉例來說，Windows 中的應用程式可以使用 FindAppUriHandlersAsync API 列舉網址處理常式。如果 PWA 在 Windows 中註冊為 OS 級別的網址處理程序，其他應用程式就能看到這些 PWA。

權限持續性

來源隨時都可以修改其與 PWA 的關聯。瀏覽器會定期嘗試重新驗證已安裝網頁應用程式的關聯。如果關聯資料已變更或無法使用，導致網址處理常式註冊無法重新驗證，瀏覽器就會移除註冊。

意見回饋

Chromium 團隊希望瞭解您使用 PWA 做為網址處理常式時的體驗。

請說明 API 設計

API 是否有任何部分無法正常運作？或者，您是否缺少實作想法所需的方法或屬性？您對安全性模型有任何問題或意見嗎？在對應的 GitHub 存放區中提出規格問題，或在現有問題中加入您的想法。

回報實作問題

您發現 Chromium 實作錯誤嗎？或者實作方式與規格不同？請前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊，並在「Components」方塊中輸入 UI>Browser>WebAppInstalls，以便重現問題。Glitch 可讓您輕鬆快速地分享重現內容。

顯示對 API 的支援

您打算使用 PWA 做為網址處理常式嗎？您的公開支援服務可幫助 Chromium 團隊優先開發特定功能，並說明其他瀏覽器廠商對於這些功能的支援有多重要。

使用主題標記 #URLHandlers 向 @ChromiumDev 發送推文，告訴我們你在何處使用這項功能，以及使用方式。

實用連結

• 公開說明
• 示範影片 | 示範影片來源
• Chromium 追蹤錯誤
• ChromeStatus.com 項目
• 閃爍元件：UI>Browser>WebAppInstalls
• TAG 審查
• Microsoft 說明文件

特別銘謝

微軟 Edge 團隊的 Lu Huang 和 Mandy Chen 指定並實作了 PWAs 做為網址處理常式。本文由 Joe Medley 審查。主頁橫幅圖片由 Bryson Hammer 提供，取自 Unsplash。