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

Question

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

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

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

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

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

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

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

是否存在永久隐藏地址栏的解决方案？是可能的还是我在设计中必须考虑的事情？

Answer 1

在Android上，您需要实施TWA（受信任的网络活动）以启用全屏模式。因此，我建议您使用PWABuilder来做到这一点。 PWABuilder已经向您返回了一个分配的APK文件和一个assetlink.json，您需要将其上传到服务器上主机根目录下的select * from activities a1, activities a2 where a1.id < a2.id and a1.name <> a2.name and a1.period && a2.period and a1.period &< a2.period; 文件夹中：.well-known>这样，Android会显示您的PWA在全屏模式下。

Answer 2

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

Answer 3

如果我了解您的需求，我已经找到了如何在Android和iOS上使用正确的display: fullscreen，而没有任何浏览器用户界面（例如地址栏）的方法。如上述@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

您的压缩文件包含assetlinks.json。这是digital asset links file 证明您拥有PWA的域。将此文件上传到您的服务器 在https://example.com/.well-known/assetlinks.json。 （更换 example.com以及您的PWA的网址。）

?‍♂️ 抬起头来：

需要数字资产链接才能加载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调试桥从操作系统的终端并连接测试设备来检查错误消息。

adb logcat | grep -e OriginVerifier -e digital_asset_links

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

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

否则，将显示Verification succeeded.消息。

source

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

我遇到了这个问题，但是我终于在this GitHub Issues的帮助下解决了这个问题。原来，我在host中有twa-manifest.json参数（不是manifest.json，因为我是用bubblewrap生成的-它比PWABuilder更具灵活性，尽管它仅适用于Android）设置为{由{1}}而不是https://example.com（请注意https://www.example.com）托管我的网站。 因此，如果您使用PWABuilder进行构建，请首先在浏览器中转到您的网站，单击地址栏，复制整个URL ，然后将那个粘贴到PWABuilder中

。

地址栏应该消失了。