在渐进式Web应用程序中隐藏地址栏 [英] Hide address bar in Progressive Web Applications

问题描述

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

I'm developing a PWA with VueJS. I started testing my application in real devices (Add to home screen). My application is intended to be 100% height, as it displays a map as you can see:

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

It seems that sometimes, transitions that appear from outside the viewport height, makes the address bar appear at the top of the page. For a PWA, I think this behaviour makes the app feel less native, and also, breaks my design (The button at bottom center and the whole map container are not visible unless the user close manually the address bar).

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

I tried some things I've seen in other questions:

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

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

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

I don't care if the app does not hide the address bar when visited in a web browser. But at least I want the address bar hidden when the app is launched as a "native" app (added to home screen).

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

I also tried changing display property in the manifest.json from standalone to fullscreen with no luck.

我知道我可以更改按钮和地图的css，以便在地址栏可见时使它们可见"，但是正如我所说，这使该应用程序不再是本地IMO.

I know I could change the css for my button and map in order to make them "visible" when the address bar is visible, but as I said, this makes feel the app less native IMO.

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

Is there a solution for hidding permanently the address bar? Is it possible or it is something I have to consider in my design?

推荐答案

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

PWA app shows the address bar when you try to navigate the pages outside of scope. For example if you have set your scope in manifest.json file as scope: "/my-pwa/" then all the page url should have prefix like this: /my-pwa/page.html.

这篇关于在渐进式Web应用程序中隐藏地址栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！