Before answering your question, a note about the difference in the screenshots:
- the first screenshot is the “old” login page in Flutter / Dart
- the second screenshot is the “new” login page in Svelte
Currently both cohabits until we finish rewriting the frontend in Svelte. The “new” login page is the default and the Flutter app redirect the user to that page. However I also noticed in my browser that time to time it uses the cache and don’t redirect me, that’s why I also land sometimes on the “old” login page. No biggy, both login are working just fine.
Now about your question: when you install a web app to the home screen, you can define a set of options that tell the OS how your app should behave or be presented. This can be done by providing a Web App manifest file. Commonly the file is often called the manifest.json or manifest.webmanifest.
Within this json file you can define such options as the “theme” color but also what is the display behavior. In nns-dapp we use standalone that makes the application look and feel like a standalone application.
A couple of references:
- A nice blog post by the dev team of Google
- The MDN web docs for the web app manifest
- The specific display option
- The manifest.json of nns-dapp
- And finally the declaration of the manifest file in the index.html page of nns-dapp in svelte
Hope this answer your question. Let me know if you have more questions.