# Microsoft Edge 上的 PWA（侧边栏、应用商店）

> Windows 上的 Microsoft Edge 如何通过浏览器自身的安装功能安装 PWA、在 Microsoft Store 中上架 PWA，以及一个已被弃用的侧边栏 manifest 成员。

**一句话：** 根据微软的文档，Edge 通过自身的应用安装功能安装满足条件的 PWA，
安装后该 PWA 会像其他应用一样运行；PWA 在 Microsoft Store 中也被当作其他
应用对待，用户可以从发现、安装到运行都无需先打开浏览器，而 PWA 还可以通过
一个已被微软标记为弃用的 manifest 成员选择加入 Edge 侧边栏。

## 通过 Edge 安装

根据微软的文档，PWA "可以通过支持该功能的浏览器的应用安装功能进行安装"，
安装后即像其他应用一样运行。根据 MDN 关于触发安装提示的指南，基于 Chromium
的浏览器（包括 Edge）会触发 `beforeinstallprompt` 事件，页面可以借此展示
自己的安装按钮，而不必依赖浏览器自带的安装入口：

```js
window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();
  // 根据 MDN 的说明，保存该事件并展示自定义的"安装"按钮；
  // beforeinstallprompt 是非标准事件，仅在基于 Chromium 的浏览器中实现。
});
```

## 侧边栏

Edge 可以通过 `edge_side_panel` manifest 成员把 PWA 固定到侧边栏。根据微软
2026 年 7 月更新的文档，该功能"正在被弃用"且"即将不再受支持"——完整的要求、
语法与运行时检测代码参见
[Manifest edge_side_panel](/zh/reference/manifest/edge-side-panel/)，应将其视为
需要迁移离开而非新采用的功能。

## Microsoft Store 分发

根据微软的文档，PWA 在 Microsoft Store 中被当作其他应用对待，因此用户可以
从发现、安装到运行都无需打开浏览器。

## 在运行时检测已安装的独立 PWA

根据 MDN 关于创建独立应用的指南，`matchMedia('(display-mode: standalone)')`
可以判断页面当前是否运行在已安装应用所使用的显示模式下——这是通用的跨浏览器
技术，并非微软针对 Edge 单独记录的内容：

```js
function isInstalledPwa() {
  if (!('matchMedia' in window)) {
    // 兜底：matchMedia 不可用——当作普通标签页处理。
    return false;
  }
  return window.matchMedia('(display-mode: standalone)').matches;
}

if (isInstalledPwa()) {
  // 隐藏"安装此应用"的引导，因为已经安装过了。
} else {
  // 在 beforeinstallprompt 触发后再展示安装入口。
}
```

## 支持情况

微软的概述称，PWA 可以在所有设备上运行、跨操作系统工作，也可以安装在移动
设备上。文档一般性地将操作系统深度集成归于在 Windows 上与 Edge 配合使用的
PWA，而没有将这种集成专门绑定到通过 Store 分发的 PWA。侧边栏文档在介绍
Microsoft Edge 中的该功能时，并未说明操作系统限制。
上面安装流程所依赖的 `beforeinstallprompt` 事件是非标准的，根据 MDN 的说明
仅在基于 Chromium 的浏览器中实现。

## 实践清单

- [ ] 对 `beforeinstallprompt` 做特性检测再使用——根据 MDN 的说明它是非标准、
      仅限 Chromium 的事件，不保证一定触发。
- [ ] 不要围绕 `edge_side_panel` 构建新功能；微软自己的文档说明该侧边栏功能
      正在被弃用。
- [ ] 不要假定 Store 分发与浏览器自身的安装功能是同一条安装路径——微软的
      文档将两者描述为把 PWA 装到设备上的不同方式。

## 延伸阅读

- [Manifest edge_side_panel](/zh/reference/manifest/edge-side-panel/)
- [Chrome 与 Android 上的 PWA](/zh/reference/platforms/chrome-android/)
- [ChromeOS 上的 PWA](/zh/reference/platforms/chromeos/)