如何让amp-app-banner在Google Chrome和Safari浏览器中始终显示？

我完全理解你的困惑——官方这个“避免重复展示”的设计逻辑确实有点反直觉，尤其是当你希望自定义横幅在所有场景下都统一出现的时候。好在有几种方法可以绕过这个限制：

方法1：用CSS强制覆盖隐藏状态 #

amp-app-banner的默认隐藏是通过内联样式或专属类实现的，你可以用高优先级的CSS强制让它始终显示：

amp-app-banner {
  display: block !important;
  visibility: visible !important;
}

这种方法最简单直接，但要注意：在系统原生横幅（比如iOS Safari、Android Chrome）会触发的场景下，会出现双重横幅的情况，这是你需要提前评估的体验问题。

方法2：自定义检测逻辑，手动控制显示 #

如果你想更精细地控制（比如只在特定场景强制显示，或避免双重横幅冲突），可以自己编写JS逻辑检测浏览器环境，再手动控制横幅的显示状态：

// 检测是否是系统原生横幅会触发的场景
function isNativeBannerScenario() {
  // 判断iOS Safari
  const isIOSSafari = /iPhone|iPad|iPod/.test(navigator.userAgent) && /Safari/.test(navigator.userAgent) && !navigator.userAgent.includes('Chrome');
  // 判断Android Chrome
  const isAndroidChrome = /Android/.test(navigator.userAgent) && /Chrome/.test(navigator.userAgent);
  return isIOSSafari || isAndroidChrome;
}

// 强制显示amp-app-banner
document.addEventListener('DOMContentLoaded', () => {
  const banner = document.querySelector('amp-app-banner');
  if (banner) {
    banner.style.display = 'block';
    banner.style.visibility = 'visible';
    // 移除组件可能添加的隐藏类
    banner.classList.remove('hidden');
  }
});

这种方式能让你灵活调整逻辑，比如可以选择在原生横幅不触发时才显示自定义横幅，或者完全忽略原生规则强制展示。

方法3：替换为自定义横幅组件 #

如果上述方法都不够理想，最彻底的方式是放弃官方的amp-app-banner，自己实现一个自定义应用横幅。这样你可以完全控制它的显示逻辑、样式和行为，不受AMP组件的默认限制。

需要提醒的是：绕过官方设计可能会违反AMP的部分最佳实践，也可能影响用户体验（比如双重横幅），建议你在充分测试后再部署到生产环境。

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