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 上的郵件) 查看電子郵件。電子郵件或簡訊應包含 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 回報錯誤。請務必盡可能提供詳細的細節、重現簡易操作說明，並在「元件」方塊中輸入 UI>Browser>WebAppInstalls。Glitch 適合用來快速分享簡單快速的提案，

展現對 API 的支援

您是否打算使用 PWA 做為網址處理常式？您的公開支援可協助 Chromium 團隊排定功能的優先順序，並向其他瀏覽器廠商瞭解這項功能有多重要。

請使用主題標記 #URLHandlers 將 Tweet 訊息傳送至 @ChromiumDev，讓我們知道您的使用位置和方式。

實用連結

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

特別銘謝

PWA 為網址處理常式，是由 Microsoft Edge 團隊的 Lu Huang 和 Mandy Chen 指定及實作。本文由 Joe Medley 審查。Bryson Hammer 在 Unsplash 上提供的主頁橫幅。