同域名下多个PWA无法同时添加至主屏幕，是否存在相关限制？

你遇到的这个问题其实很常见，核心原因在于PWA的作用域（Scope）机制——浏览器会通过作用域来区分不同的PWA应用，当两个PWA的作用域存在重叠或者没有明确区分时，浏览器会将它们判定为同一个应用，自然就无法同时安装到主屏幕了。

为什么会出现这个限制？ #

PWA的设计初衷是让Web应用能像原生应用一样独立运行，但浏览器需要一个明确的标识来区分同域名下的不同应用。默认情况下，PWA的作用域是其manifest.json文件所在的目录路径。如果你的两个PWA共享同一个根域名下的路径（比如都在/r/目录下），且没有手动指定独立的作用域，浏览器就会认为它们属于同一个应用实例，因此只能安装其中一个。

解决方法：明确区分两个PWA的作用域 #

要让同域名下的多个PWA能同时安装，关键是为每个PWA配置独立且不重叠的scope字段，具体步骤如下：

1. 为每个PWA的manifest.json设置专属的scope
   打开两个PWA的manifest.json文件，分别添加scope字段，指定各自的独立路径：

   • 对于naramap的manifest：

     {
       "name": "Naramap",
       "short_name": "Naramap",
       "start_url": "/r/naramap/",
       "scope": "/r/naramap/",
       // 其他字段（比如icons、display等）...
     }
     

   • 对于aizumap的manifest：

     {
       "name": "Aizumap",
       "short_name": "Aizumap",
       "start_url": "/r/aizumap/",
       "scope": "/r/aizumap/",
       // 其他字段（比如icons、display等）...
     }
     

   这里的scope必须是start_url所在的父路径或相同路径，且两个PWA的scope不能有重叠（比如不能都设为/r/）。

2. 确保start_url与scope匹配
   start_url必须落在scope定义的范围内，否则浏览器会忽略scope设置，回到默认规则。比如上面的例子中，start_url是/r/naramap/，对应的scope也是/r/naramap/，完全匹配。

3. 验证manifest的有效性
   用浏览器开发者工具检查manifest是否配置正确：

   • 打开Chrome/Firefox的开发者工具，切换到Application（Chrome）或Manifest（Firefox）标签；
   • 加载对应PWA的页面，查看manifest的解析状态，确认scope字段被正确识别，没有报错。

4. 清除浏览器缓存（必要时）
   如果之前已经尝试安装过其中一个PWA，浏览器可能缓存了旧的manifest信息。此时需要清除对应域名的缓存，或者强制刷新页面（Ctrl+Shift+R），重新触发安装提示。

额外注意事项 #

• 部分浏览器对scope的规则有严格要求，比如scope不能跨目录层级（比如不能将/r/naramap/的scope设为/，除非配合Service Worker的范围控制）；
• 确保两个PWA的name、short_name等标识字段也有明显区分，避免浏览器混淆。

按这个方法配置后，两个PWA就能被浏览器识别为独立的应用，同时安装到设备主屏幕了。

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