基于Node.js的PWA跨子域登录页Safari导航栏问题求助

核心原因 #

Safari对PWA的站点隔离规则严格，即使同属父域的子域，默认也会被视为独立站点。你的主域PWA配置的scope: "/"仅对smartbettor.ai生效，auth.smartbettor.ai作为子域未被纳入PWA范围，因此以浏览器模式加载，显示顶部和底部导航栏。

具体解决步骤 #

1. 统一PWA标识与关联应用
   在主域和子域的manifest.json中添加related_applications字段，让Safari识别两者为同一应用家族：

   {
     "name": "SmartBettor",
     "short_name": "SmartBettor",
     "display": "standalone", // 关键：强制启用独立模式
     "related_applications": [
       {
         "platform": "webapp",
         "url": "https://smartbettor.ai/manifest.json"
       },
       {
         "platform": "webapp",
         "url": "https://auth.smartbettor.ai/manifest.json"
       }
     ]
   }
   

   确保两个manifest的name、short_name完全一致，且display字段均设为"standalone"。

2. 添加Safari专属Meta标签
   在子域登录页的HTML头部添加以下Meta标签，强制启用独立应用模式：

   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   

   这会告诉Safari将页面作为独立应用加载，而非浏览器标签页。

3. 调整AWS Amplify Auth跳转逻辑
   修改Amplify Auth配置，将登录流程限制在主域范围内：

   • 在Amplify控制台或代码中，设置redirectSignIn为https://smartbettor.ai/market-view
   • 自定义登录UI并部署到主域路径（如/auth/login），避免跳转到子域
     这样整个登录流程都在主域PWA的scope覆盖范围内，不会触发浏览器导航栏。

4. 重新验证PWA安装

   • 先从Safari主屏幕删除旧的PWA图标
   • 访问主域页面，重新添加PWA到主屏幕
   • 测试登录跳转，确认子域页面以独立模式加载（无导航栏）

关键注意事项 #

• 必须确保主域和子域均使用HTTPS，Safari不支持HTTP环境下的PWA独立模式
• 子域的manifest.json必须能被正常访问，且响应头的Content-Type需设置为application/manifest+json

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