Manifest edge_side_panel：将 PWA 固定到 Microsoft Edge 侧边栏

发布于 2026-08-042026-08-04作者 Carey Gill · 编辑流程

一句话： edge_side_panel 是一个 web 应用清单字段，用于让 PWA 选择加入 Microsoft Edge 的侧边栏；根据 Microsoft 自己文档在 2026 年 7 月的更新，该特性“正在被弃用（being deprecated）”，“将很快不再受支持”。

该特性正在被弃用

Microsoft 的文档写道：“Update July 2026: This feature is being deprecated; it will soon no longer be supported.”（2026 年 7 月更新：该特性正在被弃用，将很快不再受支持。）Microsoft 建议开发者参阅 Streamline access to your favorite sites and apps with Sidebar in Microsoft Edge 以了解侧边栏后续的情况。请将以下内容视为对一个 Microsoft 正在逐步淘汰的特性的说明，而不是可以新建依赖的特性。

它的作用

在清单中添加 edge_side_panel 表示该 PWA 可以被固定到 Microsoft Edge 的侧边栏中，此时该 PWA “can be promoted in the Microsoft Edge sidebar store（可以在 Microsoft Edge 侧边栏商店中被推广）”、“can detect whether it is running in the Microsoft Edge sidebar or not（可以检测自己是否运行在 Microsoft Edge 侧边栏中）”，并且“defines its own style and layout to provide a user-friendly sidebar experience（可以定义自己的样式和布局，提供友好的侧边栏体验）”。

要求与语法

Microsoft 的文档要求，在添加 edge_side_panel 之前，清单中至少要包含 name、short_name、 description 和 icons：

{
  "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": {}
}

侧边栏默认的最小宽度为 376 像素，并且用户可以调整大小。如果应用的布局无法适应该最小宽度， edge_side_panel.preferred_width 可以请求一个更大的默认宽度：“When you define a preferred width in your app’s manifest… the sidebar is automatically resized to your preferred width”（当你在应用清单中定义了首选宽度……侧边栏会自动调整为该首选宽度），并且“Users can resize the sidebar to make it larger than your preferred width, or smaller, up to the 376 pixels minimum width”（用户仍可以将侧边栏调整得比首选宽度更大，或更小，直至 376 像素的最小宽度）。

{
  "edge_side_panel": {
    "preferred_width": 480
  }
}

支持情况

edge_side_panel 是一个 Microsoft Edge 专有的清单字段，这些来源中没有记录其他浏览器的实现；而根据前面引用的 2026 年 7 月更新，Microsoft 目前将其描述为正在被弃用。

在运行时检测侧边栏

Microsoft 的文档推荐使用 User-Agent Client Hints，而不是 User-Agent 字符串，来检测 PWA 是否运行在侧边栏中：

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");
}

应先用特性检测做防护。以下实现是本文的做法，而非 Microsoft 文档给出的建议：在 navigator.userAgentData 不可用时回退为“未运行在侧边栏中”，而不是抛出异常：

function isInEdgeSidebar() {
  if (!("userAgentData" in navigator)) {
    // 此浏览器不支持 User-Agent Client Hints。
    return false;
  }
  return navigator.userAgentData.brands.some((b) => b.brand === "Edge Side Panel");
}

Microsoft 的文档还补充说，如果无法使用 User-Agent Client Hints，开发者可以改为在 User-Agent 请求头中查找字符串 Edge Side Panel，但不建议这样做，因为“the User Agent string is an outdated mechanism for doing browser detection, and has website compatibility issues”（User Agent 字符串是一种过时的浏览器检测机制，存在网站兼容性问题）。

实用清单

不要围绕 edge_side_panel 构建新特性——Microsoft 自己的文档说明它正在被弃用，将很快不再受支持。
如果已经依赖它，请规划迁移路径；Microsoft 建议参阅文中链接的侧边栏支持页面，了解侧边栏后续的情况。
通过 edge_side_panel 固定到侧边栏的应用，默认会收到桌面版的 User-Agent Client Hint，即使存在移动端变体也是如此；可使用 Edge Side Panel 这一 UA-CH 品牌，让移动端变体重新生效。
优先使用 User-Agent Client Hints 而非 User-Agent 字符串嗅探来检测侧边栏，并在读取 navigator.userAgentData 之前先做特性检测。