[英]How can I make my Angular web app open in fullscreen in mobile Chrome?
I've noticed a number of web apps that open in fullscreen on my mobile device.我注意到许多 web 应用程序在我的移动设备上全屏打开。 In order for this to work, I have to add these web apps to my Android home screen.
为了让它工作,我必须将这些 web 应用程序添加到我的 Android 主屏幕。 A great example of this is TradingView.com.
TradingView.com 就是一个很好的例子。 Once you add it to your home screen, it functions similarly to a mobile app, featuring a loading screen and hiding the Chrome search bar.
将其添加到主屏幕后,它的功能类似于移动应用程序,具有加载屏幕并隐藏 Chrome 搜索栏。
I'm wondering whether or not it is possible to achieve this functionality with Angular?我想知道是否可以使用 Angular 实现此功能? I've attempted to find a solution, but I'm not sure how this feature is defined.
我试图找到一个解决方案,但我不确定这个功能是如何定义的。 Any direction would be extremely helpful!
任何方向都会非常有帮助!
What you want to make is called a Progressive Web App or PWA.您想要制作的称为 Progressive Web App 或 PWA。 A PWA consists of a manifest file which tells the browser information it needs to add it to the devices home screen.
PWA 由一个清单文件组成,该文件告诉浏览器需要将其添加到设备主屏幕的信息。 It also uses Service Workers to handle running code in the background when the app is not active.
当应用程序不活动时,它还使用 Service Worker 在后台处理正在运行的代码。 Checkout this guide for creating a PWA with Angular: https://web.dev/creating-pwa-with-angular-cli/
查看本指南以使用 Angular 创建 PWA: https://web.dev/creating-pwa-with-angular-cli/
In order to achieve a fullscreen
effect in your PWA you need to set the display
setting in the app's manifest file to either be fullscreen
or standalone
depending on your use-case.为了在 PWA 中实现
fullscreen
效果,您需要根据您的用例将应用清单文件中的display
设置设置为fullscreen
或standalone
。 More info about the display setting here: https://developer.mozilla.org/en-US/docs/Web/Manifest/display有关此处显示设置的更多信息: https://developer.mozilla.org/en-US/docs/Web/Manifest/display
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.