在渐进式Web应用程序中隐藏地址栏

Question

我正在使用VueJS开发PWA。我开始在真实设备（添加到主屏幕）中测试我的应用程序。我的应用程序打算达到100％的高度，因为它显示了一张地图，如您所见：

似乎有时，从视口高度外部出现的过渡会使地址栏出现在页面顶部。对于PWA，我认为这种行为使应用程序看起来不太自然，并且破坏了我的设计（除非用户手动关闭地址栏，否则不显示底部中心的按钮和整个地图容器）。

我尝试了在其他问题中看到的一些事情：

• window.scrollTo(0, 1);
• <meta name="mobile-web-app-capable" content="yes">
• 从这里。

我不在乎该应用程序在网络浏览器中访问时是否不隐藏地址栏。但是至少当我将应用程序作为“本机”应用程序启动时（添加到主屏幕），我希望地址栏隐藏。

我也尝试改变display在物业manifest.json从standalone到fullscreen没有运气。

我知道我可以更改按钮和地图的css以便在地址栏可见时使它们“可见”，但是正如我说的那样，这使该应用程序不太像IMO。

有没有永久隐藏地址栏的解决方案？在设计中是否有可能或必须考虑？

Answer 1

当您尝试在scope. 例如，如果您在 manifest.json 文件中设置了作用域，scope: "/my-pwa/"那么所有页面 url 都应该有这样的前缀：/my-pwa/page.html。

Answer 2

TL;DR：请参阅最后一段，了解最终为我解决问题的解决方案。

\n

我在 PWA 上保留了导航栏，尽管我尝试了一切，所以我想我会分享我所做的一切、有效的方法以及我最终如何解决它，这样你就不必花几个小时在线搜索解决方案就像我不得不那样。

\n

扩展 @alvaropaco\ 的答案，在从 PWABuilder 获得的 .zip 文件中，您必须将该文件放置在您的域正下方的assetlink.json名为 的文件夹中。.well-known它应该可以通过https://www.your-domain.com/.well-known/assetlink.json访问，否则导航栏不会隐藏。没有例外。阅读 .apk 附带的 README.html：

\n

\n

将 PWA 放入 Google Play 商店的后续步骤您已成功生成 Google Play 商店应用程序包（.apk文件）

\n

为您的 PWA。

\n

您的后续步骤：

\n

\n
1. 部署assetlinks.json到您的服务器。
\n
2. 在 Android 设备或 Android 模拟器上测试您的包。
\n
3. 上传您的apk到 Google Play 商店。
\n

\n

下面解释每个步骤。

\n

1. 部署assetlinks.json

\n

您的 zip 文件包含assetlinks.json. 这是一个数字资产链接文件， \n它证明您拥有 PWA 的域。将此文件上传到您的服务器\nat https://example.com/.well-known/assetlinks.json。（将 example.com 替换为您的 PWA 的 URL。）

\n

\n

\xe2\x80\x8d\xe2\x99\x82\xef\xb8\x8f注意：

\n

您的 PWA 需要数字资产链接才能在没有浏览器地址栏的情况下加载。如果您在 Android 上的应用程序中看到浏览器地址栏，\n则表明您的assetlinks.json文件已丢失、无法访问或不正确。请参阅我们的资产链接帮助程序来修复\n此问题。

\n

\n

\n\n

如果您不使用 PWABuilder 构建应用程序；也许使用气泡膜代替，或者其他东西，这里有一些资源可以帮助您开始构建 assetlinks.json 文件：

\n

\n
• 可信网络活动快速入门指南
\n
• 删除浏览器地址栏
\n

\n\n

边注：

\n

当使用 bubblewrap 构建我的应用程序时，我不断收到这个恼人的错误，该错误不允许我继续，因为安装 Android SDK 工具时出现问题：

\n

C:\\Users\\Me\\Desktop\\app>bubblewrap build\n,-----.        ,--.  ,--.  ,--.\n|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.\n|  .-.  |  ||  | .-. | .-. |  | .-. |  |.\'.|  |  .--\' ,-.  | .-. |\n|  \'--\' \'  \'\'  | `-\' | `-\' |  \\   --|   .\'.   |  |  \\ \'-\'  | \'-\' \'\n`------\' `----\' `---\' `---\'`--\'`----\'--\'   \'--`--\'   `--`--|  |-\'\n                                                           `--\'\nInstalling Android Build Tools. Please, read and accept the license agreement\nbuild Installing Build Tools\nError: Could not find or load main class com.android.sdklib.tool.sdkmanager.SdkManagerCli\n\n\ncli ERROR undefined\n

\n

我发布了与此问题相关的单独堆栈溢出答案。

\n\n

验证 assetlinks.json

\n

要验证 assetlinks.json 在 Android 设备上是否被正确识别，请运行以下步骤：（首先，您需要安装adb和grep ）：

\n

调试数字资产链接

\n

生成签名的 APK后。可以使用 adb 将其安装到测试设备中：

\n

adb install app-release.apk

\n

如果验证步骤失败（如果地址栏仍然可见），则可以使用 Android 调试桥从 OS\xe2\x80\x99s 终端并连接测试设备来检查错误消息。

\n

adb logcat | grep -e OriginVerifier -e digital_asset_links

\n

现在，确保您的应用程序完全关闭（强制停止它），然后重新打开它。

\n

如果失败，您将看到Statement failure matching fingerprint. Verification failed.消息。因此，检查 AndroidManifest.xml和build.gradle文件并检查配置是否与 assetlinks.json 匹配非常重要。

\n

否则Verification succeeded.应该出现消息。

\n

来源

\n

如果 assetlinks.json已验证但导航栏仍然存在怎么办？

\n

我遇到了这个问题，但我终于在这篇GitHub 问题帖子的帮助下解决了它。事实证明，我将host参数twa-manifest.json（不是manifest.json因为我用 bubblewrap 构建了它 - 它比 PWABuilder 更灵活，尽管它仅适用于 Android）设置为https://example.com而不是www.example.com（注意www）我的网站实际托管的位置。因此，如果您使用 PWABuilder 构建它，请首先在浏览器中转到您的站点，单击地址栏，复制整个URL（例如：www.example.com而不是https://www.example.com或https:// /example.com），并将其粘贴到 PWABuilder 中。

\n

地址栏应该消失了。

\n

Answer 3

如果我明白你想要什么，我已经找到了如何display: fullscreen在 Android 和 iOS 上正确使用，而无需任何浏览器 UI（例如地址栏）。正如@aareeph所说，正确设置范围，然后将其添加到header：

<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='mobile-web-app-capable'/>

Answer 4

在 Android 上，您需要实现 TWA（受信任的 Web 活动）以启用全屏模式。所以我建议你使用PWABuilder来做到这一点。PWABuilder 已经为您返回一个分配的 APK 文件和一个 assetlink.json，您需要将它们上传到您的服务器到.well-known您主机根目录下的一个文件夹中：https://www.your-domain/.well-known/assetlink.json> 这样，Android 就会以全屏模式显示您的 PWA。