如何隐藏已安装PWA的顶部默认工具栏？

Chrome 76及以上版本针对桌面端PWA调整了显示逻辑：即使在manifest中配置fullscreen、standalone等模式，默认仍会保留顶部控制工具栏，这是浏览器的原生设计，你测试的makemytrip.com、starbucks.in等站点PWA也受此限制。以下是可行的解决方向：

1. 利用Web API强制触发全屏 #

在应用初始化阶段调用浏览器全屏API，通过用户授权进入无工具栏的全屏状态。在Vue 3的App.vue中添加如下逻辑：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const enterFullscreen = async () => {
        try {
          const rootElement = document.documentElement;
          // 兼容Chrome的前缀API
          if (rootElement.requestFullscreen) {
            await rootElement.requestFullscreen();
          } else if (rootElement.webkitRequestFullscreen) {
            await rootElement.webkitRequestFullscreen();
          }
        } catch (error) {
          console.error('全屏请求失败:', error);
        }
      };

      // 仅在PWA独立模式下触发
      const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
      const isFullscreenMode = window.matchMedia('(display-mode: fullscreen)').matches;
      
      if (isStandalone || isFullscreenMode) {
        enterFullscreen();
      }

      // 监听显示模式变化，切换后重新尝试全屏
      window.matchMedia('(display-mode: standalone)').addEventListener('change', (e) => {
        if (e.matches) enterFullscreen();
      });
    });
    return {};
  }
};

首次启动时浏览器会弹出全屏授权提示，用户允许后即可进入无工具栏的全屏状态。

2. 自定义窗口控制栏（折中方案） #

如果强制全屏不符合需求，可通过window-controls-overlay替代原生工具栏，实现自定义UI：

• 修改manifest.json配置：

{
  "display_override": ["window-controls-overlay"],
  "display": "standalone",
  "background_color": "#your-app-bg-color",
  "theme_color": "#your-app-theme-color"
}

• 添加自定义控制按钮并通过CSS适配窗口区域：

.custom-titlebar {
  position: fixed;
  top: 0;
  left: env(titlebar-area-x);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
  background-color: inherit;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
}

/* 给页面内容留出标题栏空间 */
.app-content {
  padding-top: env(titlebar-area-height);
}

通过这种方式可以隐藏原生工具栏，用自定义的控制按钮替代，达到视觉上无原生工具栏的效果。

3. 引导用户手动操作 #

由于Chrome的限制，无法在无用户授权的情况下自动隐藏工具栏，可在应用内添加引导提示：告知用户按F11键进入全屏，或点击独立窗口右上角的「进入全屏」按钮（位于最大化按钮右侧）。

内容的提问来源于stack exchange，提问作者Rohìt Jíndal