Web App推送通知点击后强制横屏且无法切换竖屏问题咨询

看起来你遇到的是Web App从推送通知打开后被锁定横屏的问题，我来帮你排查下可能的原因和解决办法：

1. 先检查你的manifest.json配置 #

这是最可能的问题根源，Web App的屏幕方向主要由manifest里的orientation字段控制：

• 如果你之前把orientation设为landscape或landscape-primary，那会强制应用始终横屏，哪怕系统切换到竖屏也没用。
• 要支持自适应横竖屏，把这个字段改成any或者natural（跟随设备默认方向），示例配置：

{
  "name": "My Web App",
  "icons": [...], // 你的图标配置
  "orientation": "any",
  "display": "standalone", // 确保是standalone或fullscreen，让Web App以独立窗口运行
  // 其他manifest字段...
}

如果你的manifest里没有orientation字段，默认是any，但建议显式写上避免浏览器的默认行为差异。

2. 检查页面的viewport和方向meta标签 #

有时候页面里的meta标签会覆盖manifest的配置：

• 确保你的HTML头部有正确的viewport设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 删掉任何强制横屏的meta配置，比如这种要去掉：

<!-- 移除这个！ -->
<meta name="viewport" content="width=device-width, orientation=landscape">

3. 确认Service Worker的通知点击逻辑 #

推送通知点击后打开页面的逻辑也可能有影响，比如如果你的serviceWorker.js里打开页面时传递了特殊参数，或者没有正确聚焦已有窗口：

• 优化你的notificationclick事件处理，优先聚焦已打开的窗口，避免重复打开导致的方向异常：

self.addEventListener('notificationclick', (event) => {
  event.notification.close(); // 先关闭通知

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clientList) => {
        // 查找已打开的应用窗口，聚焦它
        for (const client of clientList) {
          if (client.url === '/' && 'focus' in client) {
            return client.focus();
          }
        }
        // 如果没有已打开的窗口，再打开新的
        if (clients.openWindow) {
          return clients.openWindow('/'); // 替换成你的应用首页URL
        }
      })
  );
});

4. 测试前的准备 #

• 确保Web App已经添加到设备主屏幕：只有在standalone或fullscreen模式下，manifest的orientation配置才会生效，普通浏览器标签页可能不遵循这个设置。
• 测试时先清除之前的Web App缓存，重新添加到主屏幕，确保新的manifest配置生效。

如果做完这些还是有问题，可以补充下你的页面HTML头部的meta标签内容，以及完整的manifest配置，我再帮你进一步排查。

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