在 Microsoft Edge 中建置提要字段的 PWA

發行項
02/27/2024

漸進式 Web Apps (PWA) 可以選擇將釘選到 Microsoft Edge 中的提要字段。

Microsoft Edge 中的提要字段可讓用戶輕鬆地連同瀏覽器索引卷標一起存取熱門網站和公用程式。提要欄位中的內容會啟用並存流覽，並將在瀏覽器索引標籤之間切換內容的需求降至最低，藉此增強使用者的主要工作。

透過將意圖釘選到提要字段的訊號，您的 PWA 會獲得下列優點：

您的 PWA 可以在 Microsoft Edge 提要字段存放區中升級。
您的 PWA 可以偵測它是否正在 Microsoft Edge 提要字段中執行。
您的 PWA 會定義自己的樣式和版面配置，以提供使用者易記的提要字段體驗。

若要讓 PWA 準備好釘選到 Microsoft Edge 中的提要字段，請使用指令 edge_side_panel 清單成員：

請確定您的 PWA 具有至少包含、short_name、 description和 icons 成員的 nameWeb 應用程式指令清單檔案。

若要深入瞭解，請參閱使用 Web 應用程式指令清單將漸進式 Web 應用程式整合到作業系統。

edge_side_panel將成員新增至您的 Web 應用程式指令清單。例如：

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}

Microsoft Edge 中的提要字段預設最小寬度為 376 像素，且可由使用者重設大小。因此，您應用程式的版面配置應該支援376像素的最小寬度，而且應該要有回應。

建置應用程式時，您可以使用 Microsoft Edge DevTools 中的 裝置模擬 工具，測試應用程式的版面配置是否可在縮小時使用，並確定設計在不同的寬度回應。若要深入瞭解，請參閱確認網頁版面配置可在縮小時使用。

如果您的應用程式版面配置無法支援 376 像素的最小寬度，您可以在 Web 應用程式指令清單中使用屬性來定義您慣用 preferred_width 的寬度。例如：

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

當您在應用程式指令清單中定義慣用寬度時，會發生下列情況：

當您的應用程式在提要字段中開啟時，側邊欄會自動調整為您慣用的寬度。
用戶可以調整提要欄位的大小，使其大於您慣用的寬度或更小，最多可達 376 像素的最小寬度。

將應用程式建置為 PWA 的其中一個最重要優點是，從一個程式代碼基底開始，您的應用程式會適應所有裝置和操作系統，不論其功能和螢幕大小為何。

指令 edge_side_panel 清單成員可讓您的應用程式安裝為獨立應用程式，並可讓您的應用程式釘選到 Microsoft Edge 中的提要字段。

不過，如果您想要建置只能釘選到提要字段但無法安裝為獨立應用程式的應用程式，請將成員browser的display值設定為，如下所示 (或省略 display Web 應用程式指令清單中的成員) ：

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "browser",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

偵測應用程式在提要字段中執行的時機，可讓使用者在此瀏覽器面板中執行應用程式時獲得最佳體驗。

您可以使用 User-Agent 用戶端提示來偵測應用程式在提要字段中執行的時機。若要深入瞭解 User-Agent 用戶端提示，請參閱從您的網站偵測 Microsoft Edge。

若要偵測應用程式在提要字段中執行的時機，請執行下列其中一項：

在您的網頁伺服器上 Sec-CH-UA ，閱讀 HTTPS 要求標頭並尋找 Edge Side Panel 品牌。例如：
```
Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"
```

或者，在瀏覽器中，使用 navigator.userAgentData JavaScript API 並讀取屬性的 brands 值。例如：

const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}

若要偵測您的應用程式是否正在提要字段中執行，您也可以使用使用者代理程式字串。

注意：我們強烈建議使用使用者代理程式用戶端提示，而不是使用者代理程式字串。使用者代理程式字串是執行瀏覽器偵測的過期機制，而且具有網站相容性問題。

如果您無法在應用程式中使用使用者代理程式用戶端提示，請在[使用者代理程式] 字串中尋找 Edge Side Panel 。以下是包含 Edge Side Panel 值的一些使用者代理程式字串範例：

User-Agent: ... (Edge Side Panel)...
User-Agent: ... (..., Edge Side Panel)...
User-Agent: ... (Edge Side Panel, ...)...

與行動應用程式的關係

假設您建立應用程式的桌面變體，以及應用程式的行動變體。在此案例中，當您的應用程式釘選到提要字段時，會使用桌面變體。根據預設，使用 edge_side_panel 指令清單成員之提要字段中的應用程式會收到 Microsoft Edge 桌面使用者代理程式用戶端提示：

Sec-CH-UA-Mobile: ?0

如將您的應用程式調整為最小提要字段寬度中所述，我們建議您讓應用程式的版面配置有回應，使其可以使用單一程式代碼基底來適應多個外型規格。

不過，您可以使用 Edge Side Panel 使用者代理程式用戶端提示品牌，在 Microsoft Edge 提要欄位中重複使用應用程式的行動變體。

在提要欄位中使用應用程式的行動變體時，請遵循下列建議：

拿掉所有「在應用程式中開啟」訊息，指示使用者從 App Store 下載您的應用程式。
使用所有輸入方法測試應用程式的輔助功能和可用性：滑鼠、鍵盤和觸控。若要瞭解如何測試應用程式的輔助功能，請參閱輔助功能測試功能。

示範應用程式

PWAmp 是音樂播放程式 PWA 示範應用程式，可釘選到 Microsoft Edge 中的提要字段。若要測試 PWAmp 作為提要字段應用程式：

開啟 Microsoft Edge，並確定顯示提要字段。如果未顯示提要字位，請移至 edge://settings/sidebar ，然後開啟 [ 永遠顯示] 提要字段 切換：
在新的視窗或索引標籤中移至 PWAmp 。您不需要安裝應用程式。
開啟提要字段，按兩下 [自定義]，然後按下 提要字段中的 [開啟]：

PWAmp 音樂播放程式應用程式會出現在提要欄位中。
點選提要欄位中的 PWAmp 圖示來開啟應用程式，並將其與其他索引標籤使用：