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

> Microsoft Edge 如何从地址栏安装 PWA、已安装窗口带有哪些菜单、PWA 如何进入 Microsoft Store，以及已弃用的侧边栏 manifest 成员。

Microsoft Edge 通过地址栏中的图标安装符合条件的 PWA，在标题栏带有 Edge **App info** 菜单的窗口中运行它，并在 `edge://apps` 中列出；同一个 Web 应用可以用 PWABuilder 打包进 Microsoft Store，而把 PWA 固定到 Edge 侧边栏的 `edge_side_panel` manifest 成员自 2026-07 起已被弃用。

## 工作原理

Edge 是 Chromium 浏览器，manifest 要求与 `beforeinstallprompt` 事件都与 Chrome 的文档一致；Edge 特有的是围绕它们的界面、Windows 集成与商店路径。

### 地址栏中的安装支持

当 Edge 判定站点是可安装的 PWA 时，地址栏会显示 **App available** 图标；点击后弹出带 **Install** 按钮的安装浮窗，应用随即作为 Windows 应用运行（[Use Progressive Web Apps in Microsoft Edge](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/ux)，Microsoft Learn，2025-10-15）。任何站点，不论有没有 manifest，都可以通过 **Settings and more** > **More tools** > **Apps** > **Install this site as an app** 安装（Microsoft 支持）。安装后的对话框有三个复选框：**Pin to taskbar**、**Pin to Start** 与 **Auto-start on device login**；最后一项也可以之后在 `edge://apps` 中通过应用的 **More options** 按钮开启。此处所有标签均为英文界面。

### 已安装的窗口

已安装的应用在独立窗口中打开，标题栏末端是 **Settings and more**（...）按钮。该按钮打开 **App info** 菜单：应用图标、名称与发布者（服务器域名），命令 **Pin to taskbar**、**Pin to Start** 与 **App settings**，以及子菜单 **Privacy**（Cookie 数量）、**Extensions** 与 **More tools**。在 Windows 上，应用出现在任务栏、开始菜单与 Alt+Tab 切换器中，manifest 的 `shortcuts` 成员会填充它在任务栏的右键菜单。已安装应用列在 `edge://apps`（可按安装日期、最近使用或名称排序）、**Settings and more** > **More tools** > **Apps** > **View apps**，以及 Windows 设置的 **Add or remove programs** 中，与其他应用一样。

### 发布到 Microsoft Store

把 PWA 上架 Store 不需要改代码（[Publish a PWA to the Microsoft Store](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/microsoft-store)，Microsoft Learn）。步骤：在 Partner Center 的 **New product** > **MSIX or PWA app** 下预留名称，复制 **Package ID**、**Publisher ID** 与 **Publisher display name**，在 PWABuilder 生成 Windows 包（下载的是一个 `.zip`，内含 `.msixbundle` 与 `.classic.appxbundle`），然后提交这两个文件；审核通常需要 24 到 48 小时。前端与 Service Worker 的改动通过正常页面加载到达 Store 用户，但任何 manifest 改动（图标、名称、`file_handlers`、`protocol_handlers`、`share_target`）都需要重新打包，因为 manifest 会被复制进 MSIX。从 Store 安装的 PWA 有一个硬编码在主域名上的 `start_url`，所以跳转到 `contoso.co.ke` 之类的地区域名会被视为超出 scope，Edge 会在窗口顶部显示 URL 与页面标题；微软没有记录任何关闭它的办法。

### 已弃用的侧边栏成员

`edge_side_panel` 曾让 PWA 可以固定到 Edge 侧边栏，并可用 `preferred_width` 请求超过 376 px 最小宽度的宽度（[Build a PWA for the sidebar in Microsoft Edge](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/sidebar)，Microsoft Learn）。该页开头的通告是「Update July 2026: This feature is being deprecated; it will soon no longer be supported.」它记录的检测机制，即 `Sec-CH-UA` 与 `navigator.userAgentData.brands` 中的 `Edge Side Panel` 品牌，仍是区分侧边栏会话与窗口的方法。把这个成员当作应从 manifest 中移除的项，语法见 [Manifest edge_side_panel：将 PWA 固定到 Microsoft Edge 侧边栏](/zh/reference/manifest/edge-side-panel/)。

## 示例

下面两个检测互相独立：一个读取页面运行在哪里，另一个决定安装按钮是否应该存在。

### 区分侧边栏会话与窗口

`navigator.userAgentData` 只有 Chromium 系浏览器提供，所以查询要加保护，回退是普通窗口布局：

```js
function isEdgeSidebar() {
  const brands = navigator.userAgentData?.brands;
  if (!brands) {
    return false; // 没有 Client Hints API：当作普通窗口或标签页
  }
  return brands.some((b) => b.brand === 'Edge Side Panel');
}

document.body.classList.toggle('sidebar', isEdgeSidebar());
```

侧边栏会话报告 `Sec-CH-UA-Mobile: ?0`，所以依赖该提示的移动端布局在那里默认不会被选中；品牌检测才是让页面有意选择窄布局的手段。

### 应用安装后隐藏安装按钮

`beforeinstallprompt` 只存在于 Chromium 系浏览器（[Window: beforeinstallprompt event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event)，MDN），而已安装的窗口会报告 `display-mode: standalone`：

```js
const button = document.querySelector('#install');
let deferredPrompt = null;

window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();
  deferredPrompt = event;
  const standalone = window.matchMedia?.('(display-mode: standalone)').matches ?? false;
  button.hidden = standalone; // 已安装：不显示按钮
});

button.addEventListener('click', async () => {
  if (!deferredPrompt) return;
  await deferredPrompt.prompt();
  deferredPrompt = null;
});
```

没有该事件时（Safari、Firefox），按钮因默认的 `hidden` 属性保持隐藏，浏览器自带的安装入口是唯一路径。

## 实测行为

Edge 会在网络层标记来自 Store 的安装，这是把 Store 用户与地址栏安装用户分开统计的唯一可靠方法。

:::observed
从 Microsoft Store 安装的 PWA 首次导航时，Edge 会发送请求头 `Referer: app-info://platform/microsoft-store`，客户端可通过 `document.referrer` 读到（Microsoft Learn，「Publish a PWA to the Microsoft Store」，2026-10 读取）。地址栏安装不发送这个请求头，应用内的后续导航携带的是普通的页面 referrer。
:::

同一份文档指出，跳转到地区域名时出现的超出 scope 地址栏只针对 Store 安装，同一站点的地址栏安装不会出现，所以两种安装来源在首次启动时的行为可能不同。

## 另请参阅

- [Use Progressive Web Apps in Microsoft Edge](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/ux)（learn.microsoft.com）
- [Publish a PWA to the Microsoft Store](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/microsoft-store)（learn.microsoft.com）
- [Build a PWA for the sidebar in Microsoft Edge](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/sidebar)（learn.microsoft.com）
- [Manifest edge_side_panel：将 PWA 固定到 Microsoft Edge 侧边栏](/zh/reference/manifest/edge-side-panel/)
- [Windows 上的 PWA](/zh/reference/platforms/windows/)
- [桌面上的 PWA](/zh/reference/platforms/desktop/)
- [通过应用商店分发 PWA](/zh/guides/app-store-distribution/)