在渐进式 Web 应用程序中隐藏地址栏
Hide address bar in Progressive Web Applications
我正在使用 VueJS 开发 PWA。我开始在真实设备上测试我的应用程序（添加到主屏幕）。我的应用程序旨在 100% 高度，因为它显示了一张地图，如您所见：
似乎有时，从视口高度之外出现的过渡会使地址栏出现在页面顶部。
对于 PWA，我认为这种行为让应用感觉不那么原生，而且破坏了我的设计（底部中心的按钮和整个地图容器不可见，除非用户手动关闭地址栏）。
我尝试了一些我在其他问题中看到的东西：
window.scrollTo(0, 1);<meta name="mobile-web-app-capable" content="yes"> - 来自 here.
我不关心在网络浏览器中访问应用程序时是否不隐藏地址栏。但至少我希望在应用程序作为 "native" 应用程序（添加到主屏幕）启动时隐藏地址栏。
我还尝试将 manifest.json 中的 display 属性 从 standalone 更改为 fullscreen 没有运气.
我知道我可以更改我的按钮和地图的 css，以便在地址栏可见时使它们 "visible"，但正如我所说，这让应用感觉不那么原生国际海事组织。
有没有永久隐藏地址栏的解决方案？是否可能，或者这是我在设计中必须考虑的事情？
当您尝试导航 scope 以外的页面时，PWA 应用会显示地址栏。例如，如果您在 manifest.json 文件中将范围设置为 scope: "/my-pwa/"，那么所有页面 url 都应该有这样的前缀：/my-pwa/page.html。
如果我明白你想要什么，我已经找到了如何在 android 和 iOS 上使用正确的 display: fullscreen，这不需要任何浏览器 UI，例如地址栏。如@aareeph 所述，正确设置范围，然后将其添加到 header :
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='mobile-web-app-capable'/>
在 Android 上，您需要实施 TWA（可信网络活动）以启用全屏模式。所以我建议你使用 PWABuilder 来做到这一点。 PWABuilder 已经 returns 为您分配了一个 APK 文件和一个 assetlink.json，您需要将其上传到您的服务器到主机根目录下的 .well-known 文件夹中：https://www.your-domain/.well-known/assetlink.json> Android 在全屏模式下显示 PWA 的方式。
TL;DR：请参阅最后一段以了解最终为我解决的解决方案。
即使我尝试了所有方法，我仍然保留了 PWA 上的导航栏，所以我想我会分享我所做的一切、有效的方法以及我最终如何解决它，这样你就不必搜索像我一样在线解决几个小时。
扩展@alvaropaco 的回答，在从 PWABuilder 获得的 .zip 文件中，您 必须 将 assetlink.json 文件放在名为 .well-known 的文件夹中，直接在您的域下。它应该可以在 https://www.your-domain.com/.well-known/assetlink.json 访问，否则导航栏将不会隐藏。没有例外。阅读 .apk 附带的 README.html：
Next steps for getting your PWA into the Google Play Store You've successfully generated a Google Play Store app package (.apk file)
for your PWA.
Your next steps:
- Deploy
assetlinks.json to your server.
- Test your package on an Android device or Android emulator.
- Upload your
apk file to the Google Play Store.
Each step is explained below.
1. Deploy assetlinks.json
Your zip file contains assetlinks.json. This is a digital asset links file
that proves you own your PWA's domain. Upload this file to your server
at https://example.com/.well-known/assetlinks.json. (Replace
example.com with your PWA's URL.)
♂️ Heads up:
Digital asset links are required for your PWA to load without the browser address bar. If you're seeing a browser address bar in your
app on Android, your assetlinks.json file is missing, inaccessible,
or incorrect. See our asset links helper to fix
this.
如果您不是使用 PWABuilder 构建您的应用；也许使用 bubblewrap 或其他方式，这里有一些资源可以帮助您开始构建 assetlinks.json 文件：
旁注：
在使用 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
我 post 编辑了一个与此问题相关的单独的 。
验证assetlinks.json
要验证 assetlinks.json 在 Android 设备上是否被正确识别，运行 这些步骤：（您需要先安装 adb and grep）：
调试数字资产链接
生成 signed APK 之后。它可以安装到测试设备中，使用 adb:
adb install app-release.apk
如果验证步骤失败（如果地址栏仍然可见），可以使用 Android 调试桥从您的 OS 终端和已连接测试设备。
adb logcat | grep -e OriginVerifier -e digital_asset_links
现在，确保您的应用程序已完全关闭（强行停止），然后重新打开它。
如果失败，您将看到 Statement failure matching fingerprint. Verification failed. 消息。因此，重要的是 审查 AndroidManifest.xml 和 build.gradle 文件并检查是否配置与 assetlinks.json.
匹配
否则应显示 Verification succeeded. 消息。
如果 assetlinks.json 已验证但导航栏仍然存在怎么办？
我遇到了这个问题，但我最终在 this GitHub 问题 post 的帮助下解决了它。原来我在 twa-manifest.json 中有 host 参数（不是 manifest.json 因为我用 bubblewrap 构建它 - 它比 PWABuilder 更灵活，尽管它只适用于 Android ) 设置为 https://example.com 而不是 https://www.example.com（请注意 www），我的网站 实际上 托管。 因此，如果您使用 PWABuilder 构建它，首先在浏览器中转到您的站点，单击地址栏，复制 整个 URL，然后粘贴 那个进入PWABuilder。
地址栏应该没有了。
我正在使用 VueJS 开发 PWA。我开始在真实设备上测试我的应用程序（添加到主屏幕）。我的应用程序旨在 100% 高度，因为它显示了一张地图，如您所见：
似乎有时，从视口高度之外出现的过渡会使地址栏出现在页面顶部。 对于 PWA，我认为这种行为让应用感觉不那么原生，而且破坏了我的设计（底部中心的按钮和整个地图容器不可见，除非用户手动关闭地址栏）。
我尝试了一些我在其他问题中看到的东西：
window.scrollTo(0, 1);<meta name="mobile-web-app-capable" content="yes">- 来自 here.
我不关心在网络浏览器中访问应用程序时是否不隐藏地址栏。但至少我希望在应用程序作为 "native" 应用程序（添加到主屏幕）启动时隐藏地址栏。
我还尝试将 manifest.json 中的 display 属性 从 standalone 更改为 fullscreen 没有运气.
我知道我可以更改我的按钮和地图的 css，以便在地址栏可见时使它们 "visible"，但正如我所说，这让应用感觉不那么原生国际海事组织。
有没有永久隐藏地址栏的解决方案？是否可能，或者这是我在设计中必须考虑的事情？
当您尝试导航 scope 以外的页面时，PWA 应用会显示地址栏。例如，如果您在 manifest.json 文件中将范围设置为 scope: "/my-pwa/"，那么所有页面 url 都应该有这样的前缀：/my-pwa/page.html。
如果我明白你想要什么，我已经找到了如何在 android 和 iOS 上使用正确的 display: fullscreen，这不需要任何浏览器 UI，例如地址栏。如@aareeph 所述，正确设置范围，然后将其添加到 header :
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='mobile-web-app-capable'/>
在 Android 上，您需要实施 TWA（可信网络活动）以启用全屏模式。所以我建议你使用 PWABuilder 来做到这一点。 PWABuilder 已经 returns 为您分配了一个 APK 文件和一个 assetlink.json，您需要将其上传到您的服务器到主机根目录下的 .well-known 文件夹中：https://www.your-domain/.well-known/assetlink.json> Android 在全屏模式下显示 PWA 的方式。
TL;DR：请参阅最后一段以了解最终为我解决的解决方案。
即使我尝试了所有方法，我仍然保留了 PWA 上的导航栏，所以我想我会分享我所做的一切、有效的方法以及我最终如何解决它，这样你就不必搜索像我一样在线解决几个小时。
扩展@alvaropaco 的回答，在从 PWABuilder 获得的 .zip 文件中，您 必须 将 assetlink.json 文件放在名为 .well-known 的文件夹中，直接在您的域下。它应该可以在 https://www.your-domain.com/.well-known/assetlink.json 访问，否则导航栏将不会隐藏。没有例外。阅读 .apk 附带的 README.html：
Next steps for getting your PWA into the Google Play Store You've successfully generated a Google Play Store app package (
.apkfile)for your PWA.
Your next steps:
- Deploy
assetlinks.jsonto your server.- Test your package on an Android device or Android emulator.
- Upload your
apkfile to the Google Play Store.Each step is explained below.
1. Deploy
assetlinks.jsonYour zip file contains
assetlinks.json. This is a digital asset links file that proves you own your PWA's domain. Upload this file to your server athttps://example.com/.well-known/assetlinks.json. (Replace example.com with your PWA's URL.)♂️ Heads up:
Digital asset links are required for your PWA to load without the browser address bar. If you're seeing a browser address bar in your app on Android, your
assetlinks.jsonfile is missing, inaccessible, or incorrect. See our asset links helper to fix this.
如果您不是使用 PWABuilder 构建您的应用；也许使用 bubblewrap 或其他方式，这里有一些资源可以帮助您开始构建 assetlinks.json 文件：
旁注：
在使用 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
验证assetlinks.json
要验证 assetlinks.json 在 Android 设备上是否被正确识别，运行 这些步骤：（您需要先安装 adb and grep）：
调试数字资产链接
生成 signed APK 之后。它可以安装到测试设备中，使用 adb:
adb install app-release.apk
如果验证步骤失败（如果地址栏仍然可见），可以使用 Android 调试桥从您的 OS 终端和已连接测试设备。
adb logcat | grep -e OriginVerifier -e digital_asset_links
现在，确保您的应用程序已完全关闭（强行停止），然后重新打开它。
如果失败，您将看到 Statement failure matching fingerprint. Verification failed. 消息。因此，重要的是 审查 AndroidManifest.xml 和 build.gradle 文件并检查是否配置与 assetlinks.json.
否则应显示 Verification succeeded. 消息。
如果 assetlinks.json 已验证但导航栏仍然存在怎么办？
我遇到了这个问题，但我最终在 this GitHub 问题 post 的帮助下解决了它。原来我在 twa-manifest.json 中有 host 参数（不是 manifest.json 因为我用 bubblewrap 构建它 - 它比 PWABuilder 更灵活，尽管它只适用于 Android ) 设置为 https://example.com 而不是 https://www.example.com（请注意 www），我的网站 实际上 托管。 因此，如果您使用 PWABuilder 构建它，首先在浏览器中转到您的站点，单击地址栏，复制 整个 URL，然后粘贴 那个进入PWABuilder。
地址栏应该没有了。