How can I make my Angular web app open in fullscreen in mobile Chrome?

Question

I've noticed a number of web apps that open in fullscreen on my mobile device. In order for this to work, I have to add these web apps to my Android home screen. A great example of this is 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.

I'm wondering whether or not it is possible to achieve this functionality with Angular? I've attempted to find a solution, but I'm not sure how this feature is defined. Any direction would be extremely helpful!

Answer 1

What you want to make is called a Progressive Web App or PWA. A PWA consists of a manifest file which tells the browser information it needs to add it to the devices home screen. It also uses Service Workers to handle running code in the background when the app is not active. Checkout this guide for creating a PWA with Angular: 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. More info about the display setting here: https://developer.mozilla.org/en-US/docs/Web/Manifest/display