iOS 13 [添加到主屏幕] 和 [隐藏工具栏]答案

【问题标题】：iOS 13 [Add to Home Screen] and [Hide Toolbars]iOS 13 [添加到主屏幕] 和 [隐藏工具栏]
【发布时间】：2020-10-01 23:15:03
【问题描述】：

在之前的 iOS（12 及之前）或任何 Android 手机中，我们可以使用 Safari（或 Android 中的任何浏览器）中的 [添加到主屏幕] 并使用以下技术隐藏 PWA 的工具栏：

在 Index.html 中：

<head>
    <meta name="viewport" content="viewport-fit=cover, width=device-width,initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <link rel="apple-touch-icon" href="/customicon.png"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="application-name" content="BGBG01">
    <meta name="apple-mobile-web-app-title" content="BGBG01">
    <meta name="msapplication-starturl" content="/">
    <link rel="manifest" href="manifest.json">
</head>

在根目录下创建文件manifest.json，内容如下：

{
  "name": "App Full Name",
  "short_name": "AppName",
  "lang": "zh-CN",
  "start_url": "/",
  "scope": "/",
  "display": "standalone"
}

但是，从iOS 13开始，上述方法不再起作用，工具栏仍然存在，我们需要单击地址栏左侧的aA，然后每次选择[隐藏工具栏]，以便隐藏 PWA 的工具栏。

那么我们如何隐藏工具栏呢？

编辑

只是想强调一下，下面的js代码也不行：

<script>
  if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    /* iOS hides Safari address bar */
    window.addEventListener("load",function() {
        setTimeout(function() {
            window.scrollTo(0, 1);
        }, 1000);
    });
  }
</script>

或

<body>
<button id="goFS">Go fullscreen</button>

<script>
  var goFS = document.getElementById("goFS");
  goFS.addEventListener("click", function() {
      document.body.requestFullscreen();
  }, false);
</script>

</body>

此链接提供的解决方案也不起作用：

https://codepen.io/akikoo/pen/xdaic

【问题讨论】：

标签： ios vue.js safari progressive-web-apps

【解决方案1】：

可以智能高效地处理您的案例this method？使用这个最小的 webmanifest，菜单栏也会消失吗？

{
  "name": "My Super App",
  "short_name": "My App",
  "display": "standalone",
  "scope": "/my-app-path/",
  "start_url": "/my-app-path/"
}

【讨论】：