如何为渐进式Web应用（PWA）添加打开新应用实例的按钮

要在你的PWA中添加按钮打开独立应用窗口（而非浏览器标签/普通窗口），核心是给window.open添加特定参数，让浏览器识别为PWA应用实例模式。以下是可行的实现方案：

替换你的现有脚本 #

把你原来的newWindow函数替换成下面的代码：

function openNewAppInstance() {
  // 打开新的PWA独立窗口，参数确保应用模式且安全
  window.open(
    window.location.href,
    'taiwa-maker-new-instance', // 自定义窗口名，改为随机值可确保每次开新实例
    'app=yes,width=800,height=600,noopener,noreferrer'
  );
}

参数说明 #

• app=yes：这是Chromium系浏览器（Chrome、Edge）的核心参数，会触发应用窗口模式——去掉浏览器地址栏、书签栏等UI，直接打开和桌面启动的PWA一致的独立实例。
• noopener,noreferrer：现代浏览器推荐的安全参数，防止新窗口获取原窗口的控制权，避免安全风险。
• 窗口名（第二个参数）：如果用固定名称，同名窗口会被复用；如果需要每次打开全新实例，可以不传这个参数，或者用动态生成的字符串（比如'taiwa-' + Date.now()）。

额外注意事项 #

1. 确保你的PWA manifest.json中display属性设置正确，比如：

   "display": "standalone"
   

   这是浏览器识别为可独立运行PWA的基础，你的应用已支持安装，大概率已经配置，但可以确认一下。
2. 兼容性：这个方案在Chrome、Edge（Chromium内核）上完全生效，Firefox对PWA应用模式的支持也类似，参数通用；Safari的PWA支持有限，可能会打开普通窗口，但主流桌面浏览器都能满足需求。
3. 绑定按钮：用jQuery给导航栏按钮绑定点击事件：

   $('#your-new-window-btn').click(openNewAppInstance);
   

内容的提问来源于stack exchange，提问作者Joshua Robison