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

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，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，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，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 侧边栏。

示例

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

区分侧边栏会话与窗口

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

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，MDN），而已安装的窗口会报告 display-mode: standalone：

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 用户与地址栏安装用户分开统计的唯一可靠方法。

实测

从 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（learn.microsoft.com）
• Publish a PWA to the Microsoft Store（learn.microsoft.com）
• Build a PWA for the sidebar in Microsoft Edge（learn.microsoft.com）
• Manifest edge_side_panel：将 PWA 固定到 Microsoft Edge 侧边栏
• Windows 上的 PWA
• 桌面上的 PWA
• 通过应用商店分发 PWA

规范

规范	状态
无。