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

Question

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

似乎有时，从视口高度之外出现的过渡会使地址栏出现在页面顶部。 对于 PWA，我认为这种行为会让应用感觉不那么原生，并且也破坏了我的设计（底部中心的按钮和整个地图容器不可见，除非用户手动关闭地址栏）。

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

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

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

我还尝试将 manifest.json 中的 display 属性从 standalone 更改为 fullscreen，但没有成功。

我知道我可以更改按钮和地图的 css，以便在地址栏可见时使它们“可见”，但正如我所说，这会让应用程序不那么原生 IMO。

有永久隐藏地址栏的解决方案吗？有没有可能，或者这是我在设计中必须考虑的事情？

Answer 1

当您尝试浏览 scope 之外的页面时，PWA 应用会显示地址栏。例如，如果您已将 manifest.json 文件中的范围设置为 scope: "/my-pwa/"，则所有页面 url 都应具有如下前缀：/my-pwa/page.html。

Answer 2

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

Answer 3

如果我理解你想要什么，我已经找到了如何在 android 和 iOS 上拥有正确的display: fullscreen，这不需要任何浏览器 UI，例如地址栏。正如@aareeph 所说，正确设置了范围，然后将其添加到header：

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

Answer 4

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

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

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

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

为您的 PWA。 ?

接下来的步骤：

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

下面解释了每个步骤。

1。部署assetlinks.json

您的 zip 文件包含 assetlinks.json。这是digital asset links file 这证明你拥有你的 PWA 的域。将此文件上传到您的服务器 在https://example.com/.well-known/assetlinks.json。 （代替 example.com 和你的 PWA 的 URL。）

?‍♂️ 注意：

您的 PWA 需要数字资产链接才能在没有浏览器地址栏的情况下加载。如果您在您的 Android 上的应用程序，您的 assetlinks.json 文件丢失、无法访问， 或不正确。请参阅我们的asset links helper 进行修复 这个。

---

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

• Trusted Web Activities Quick Start Guide
• Removing the Browser Address Bar

---

旁注：

在使用bubblewrap 构建我的应用时，我不断收到这个烦人的错误，因为安装Android SDK 工具时出现问题，我无法继续：

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


cli ERROR undefined

我发布了与此问题相关的单独stack overflow answer。

---

验证assetlinks.json

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

调试数字资产链接

在您生成signed APK 之后。可以使用 adb 将其安装到测试设备中：

adb install app-release.apk

如果验证步骤失败（如果地址栏仍然可见），则可以使用 Android Debug Bridge 从您的操作系统终端和连接的测试设备检查错误消息。

adb logcat | grep -e OriginVerifier -e digital_asset_links

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

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

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

source

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

我遇到了这个问题，但我终于在this GitHub问题帖子的帮助下解决了这个问题。事实证明，我在twa-manifest.json 中设置了host 参数（不是manifest.json，因为我使用bubblewrap 构建了它——它比PWABuilder 具有更大的灵活性，尽管它只适用于Android）设置为https://example.com 而不是@987654351 @（注意www）我的网站是实际托管的。 所以如果你使用 PWABuilder 构建它，首先在浏览器中访问你的站点，点击地址栏，复制整个 URL，然后将 那个 粘贴到 PWABuilder 中.

地址栏应该没有了。