edge侧边面板需通过manifest.json中edge_side_panel:true声明,仅在edge生效;必须display为standalone/minimal-ui、start_url为同源相对路径;调用launchsidepanel()需用户手势触发且pwa已安装;侧边面板内可用self.sidepanel.setoptions()设宽高,但无关闭事件。

Edge 侧边面板(edge_side_panel)不是 HTML 属性,而是 Manifest 配置项
你没法用 <div id="side-panel"> 或写个 CSS 就让 PWA 在 Edge 右侧弹出侧边面板——它必须通过 Web App Manifest 的 <code>edge_side_panel 字段声明,且只在 Edge 浏览器中生效。这个字段告诉 Edge:“这个 PWA 允许以侧边面板形式打开”,但具体是否启用、何时显示,由用户操作(如右键菜单 → “在侧边面板中打开”)或你调用 launchSidePanel() 触发。
常见错误是直接在 HTML 里加 class 或写 JS 模拟侧边栏,结果发现根本进不了系统级侧边面板上下文——那只是个普通 div,没有 self.sidePanel API,也不受浏览器侧边面板生命周期管理。
manifest.json 中必须包含 edge_side_panel 字段并设为 true
这是启用侧边面板功能的硬性前提。仅声明还不够,还要满足几个隐含条件:
-
display必须是"standalone"或"minimal-ui"("browser"不支持) -
start_url必须是同源可访问的相对路径(如"./side.html"),不能是"https://..."绝对 URL -
edge_side_panel是顶层字段,和name、icons并列,不是嵌套在display_override里
正确示例:
{
"name": "My Side Panel App",
"short_name": "SideApp",
"start_url": "./side.html",
"display": "standalone",
"edge_side_panel": true,
"icons": [...]
}
调用 launchSidePanel() 才能真正打开侧边面板
用户手动右键打开只是其中一种方式;你想在代码里主动唤起,必须用 launchSidePanel()。但它有严格限制:
智能收支追踪器 — 通过自然语言快速记账,自动分类,生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元"),数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
- 只能在用户手势(如 click、tap)触发的事件处理函数中同步调用,不能放在
setTimeout或fetch().then()里 - 必须已安装为 PWA(即页面已通过
navigator.standalone === true或matchMedia('(display-mode: standalone)')确认) - 如果未声明
edge_side_panel: true,调用会静默失败,不报错也不弹窗
简单可用写法:
button.addEventListener('click', () => {
if ('launchSidePanel' in window) {
window.launchSidePanel();
}
});
侧边面板内脚本能用 self.sidePanel,但受限明显
一旦你的 side.html 在 Edge 侧边面板中加载,全局对象上会出现 self.sidePanel,提供 getOptions()、setOptions() 等方法。但注意:
-
self.sidePanel仅在侧边面板上下文中存在,在普通标签页里是undefined - 目前仅支持设置宽高(
width和height),单位是像素,且高度最大约 600px,宽度上限约 400px - 无法监听“面板关闭”事件,也没有 onclose 回调;若需响应退出,得靠
pagehide或检测document.visibilityState - 侧边面板默认不共享 sessionStorage,localStorage 和 IndexedDB 是共享的
设置尺寸示例:
if (self.sidePanel) {
self.sidePanel.setOptions({ width: 360, height: 520 });
}
侧边面板不是 UI 组件,是浏览器原生容器。所有样式、交互、状态管理都得适配这个轻量但隔离的运行环境,尤其别假设 DOM 尺寸或事件流和主窗口一致。










