Möchte man seine (Angular-)WebApp auf dem Smartphone im Vollbildmodus laufen lassen, so sind folgende Schritte notwendig:
App-Voraussetzungen
Jede Browser-Engine hat andere Voraussetzungen, die erfüllt werden müssen, damit das "AddToHomeScreen" funktioniert. Hier mal eine Auflistung der wichtigsten Browser:
Google Chrome
Show archive.org snapshot
Microsoft Edge
Show archive.org snapshot
Mozilla Firefox
Show archive.org snapshot
Opera
Show archive.org snapshot
Samsung Internet
Show archive.org snapshot
UC-Browser
Show archive.org snapshot
Apple iOS-Geräte
Hierfür sind nur 2 Meta-Einträge in der index.html notwendig:
<html>
<head>
<!-- bewirkt, dass die Adressleiste ausgeblendet wird -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- bewirkt, dass die Statusleiste überdeckt werden kann -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
</html>
Android-Geräte
Hierfür muss im Header der index.html ein Link zu einer Manifest-Datei eingefügt werden:
<html>
<head>
<link rel="manifest" href="manifest.json">
</head>
</html>
Die Manifest-Datei ist in JSON formatiert und folgendermaßen aufgebaut:
{
"background_color": "#E7E7E7",
"description": "<App-Description>",
"display": "fullscreen",
"icons": [
{
"src": "assets/logo.png",
"sizes": "242x242",
"type": "image/png"
}
],
"name": "netLogger monitoring",
"short_name": "netLogger",
"start_url": "/index.html"
}
Hier noch eine genaue Beschreibung der einzelnen Json-Properties:
Web App Manifest - HowTo
Show archive.org snapshot
