在 Microsoft Edge 為側邊欄建立一個 PWA

漸進式Web Apps (PWA) 可以選擇被釘選到 Microsoft Edge 的側邊欄。

Microsoft Edge 的側邊欄讓使用者除了瀏覽器分頁外，也能輕鬆存取熱門網站和工具。側邊欄的內容透過並排瀏覽並減少在瀏覽器分頁間切換情境的需求，來輔助使用者的主要任務。

透過在側邊欄標示置頂意圖，你的 PWA 可獲得以下好處：

你的 PWA 可以在 Microsoft Edge 側邊欄商店推廣。
你的 PWA 可以在 Microsoft Edge 側邊欄偵測它是否在執行。
你的 PWA 會自訂風格和版面，提供使用者友善的側邊欄體驗。

要讓你的 PWA 準備好釘選到 Microsoft Edge 的側邊欄，請使用 edge_side_panel manifest 成員：

確保你的 PWA 有一個至少包含 name、 short_namedescription、和 icons 成員的網頁應用程式清單檔案。

如需詳細資訊，請參閱：
- 網頁應用程式在 MDN 出現。
- 網頁應用程式的表現形式包括 MDN> 參考漸>進式網頁應用>指南。

將該 edge_side_panel 會員加入你的網頁應用程式清單。例如：

{
  "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 像素的最小寬度，你可以在網頁應用程式清單中使用 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的側邊欄。

不過，如果你偏好建立一個只能釘選到側邊欄、無法獨立安裝的應用程式，請將該會員的值 display 設為 browser，如下所示 (，或者將該成員從你的網頁應用程式清單中省略) display ：

{
  "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邊緣」。

要在側邊欄偵測你的應用程式是否運行，請執行以下任一步驟：

在你的網頁伺服器上，閱讀 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");
}

要在側邊欄偵測你的應用程式是否正在執行，你也可以使用使用者代理字串。

注意：我們強烈建議使用 User Agent Client Hints 而非 User Agent 字串。 User Agent 字串是一種過時的瀏覽器偵測機制，且存在網站相容性問題。

如果你無法在應用程式中使用 User Agent Client Hints，請在 User Agent 字串中尋找。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

如同《調整你的應用程式至最小側邊欄寬度》一文所述，我們建議讓你的應用程式版面具備響應式設計，以便能用單一程式碼庫適應多種形態。

不過，你可以在 Microsoft Edge 側邊欄使用 Edge Side Panel 用戶代理客戶端提示品牌，重用你應用程式的行動版本。

使用手機版應用程式時，請參考側邊欄的以下建議：

移除所有指示用戶從應用商店下載應用程式的「在應用程式中開啟」訊息。
測試所有輸入方式：滑鼠、鍵盤和觸控，測試應用程式的無障礙性與可用性。想了解如何測試應用程式的無障礙性，請參閱無障礙測試功能。

示範應用程式

PWAmp 是一款音樂播放器 PWA 示範應用程式，可以釘選在 Microsoft Edge 的側邊欄。要測試 PWAmp 作為側邊欄應用程式：

打開 Microsoft Edge，確保側邊欄顯示出來。如果側邊欄沒有顯示，請前往 edge://settings/sidebar 並開啟「 永遠顯示側邊欄 」切換：
在新視窗或分頁中進入 PWAmp 。你不需要安裝這個應用程式。
打開側邊欄，點選 「自訂」，然後在 側邊欄點「開啟」：

PWAmp 音樂播放器應用程式會出現在側邊欄。
點擊側邊欄的 PWAmp 圖示即可開啟應用程式，並與其他分頁一起使用：

PWAmp 示範應用程式的原始碼包含以下內容，以支援 Microsoft Edge 側邊欄：

manifest.json檔案裡的edge_side_panel成員。
isSidebarPWA變數，該變數在 app.js 檔案中使用 navigator.userAgentData JavaScript API。

你可以在 MicrosoftEdge / Demos > pwamp 找到完整的 PWAmp 示範原始碼。若要本地下載原始碼，請參閱 DevTools 範例程式碼中的 Clone the Edge Demos 倉庫到你的硬碟。

提供意見反應

Microsoft Edge 團隊歡迎您對此功能提出回饋。閱讀 Microsoft Edge 網頁平台說明庫的側面板說明，並透過在倉庫建立新議題、搜尋現有問題並加入現有對話來留下回饋。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-27

共用方式為

在你的 PWA 中啟用側邊欄支援

調整你的應用程式到最小側邊欄寬度

打造一個只在側邊欄的應用程式

側邊欄偵測使用情況

與您的行動應用程式的關係

示範應用程式

提供意見反應

意見反應

其他資源