如何实现已安装PWA可通过键盘快捷键在PC/Mac端快速打开？

架构老林

2026-10-1

PWA全局键盘快捷键唤起实现方案

首先明确结论：目前PC/Mac端安装的PWA本身没有原生默认的全局唤起快捷键，但有两种可落地的实现方式可以达到你要的快捷唤起效果：

方案1：引导用户配置浏览器内置PWA快捷键（兼容性最好，无代码改造成本）

Chromium内核的浏览器（Chrome、Edge等，也是目前PWA支持度最高的浏览器家族）本身已经提供了已安装PWA的自定义快捷键配置入口：

Chrome用户访问chrome://extensions/shortcuts，Edge用户访问edge://extensions/shortcuts
找到你开发的已安装PWA条目，即可自定义全局唤起快捷键，配置完成后不管浏览器处于前台还是后台，按下快捷键都能直接打开PWA窗口
你只需要在PWA的设置页给用户做清晰的操作引导即可，不需要修改任何业务代码，全版本Chromium浏览器都支持

方案2：通过Web API实现原生快捷键注册（用户操作成本低，兼容性有限）

如果你不想让用户手动去浏览器配置页操作，可以用目前Chromium内核实验性支持的Web App Commands API实现快捷键内置注册：

首先在你的PWA的manifest.json中添加commands字段配置，示例如下：

{
  "name": "你的PWA名称",
  "short_name": "PWA",
  "display": "standalone",
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+P",
        "mac": "Command+Shift+P"
      },
      "description": "快速唤起应用"
    }
  }
}

前端添加事件监听，触发快捷键时激活PWA窗口：

if ('commands' in navigator) {
  navigator.commands.addEventListener('command', (event) => {
    if (event.command === '_execute_action') {
      // 激活窗口
      window.focus();
      if (document.hidden) {
        window.show();
      }
    }
  });
}