Wie kann ich eine Webseite im Look einer App anbieten? Welche Einstellungen sind dazu nötig? Gibt es Einschränkungen? Die Antworten auf diese Fragen werden in diesem Beitrag geliefert. Viel Spaß!
Hinweis: Alle hier gezeigten Optionen sind für iOS Geräte bestimmt, können aber auch bei anderen Smartphone-Betriebssystemen eingeschränkt funktionieren.
Webapp - Vorteile und Nachteile
Da es sich bei solchen Anwendungen im Endeffekt immer noch "nur" um eine Webseite handelt, muss man manche Nachteile in kauf nehmen. Je nach Anwendungsfall (wie dieser hier) können die Vorteile jedoch überwiegen.
Vorteile
Plattform übergreifend unterstützt. Das heißt, dass jedes Smartphone mit einem Browser und einer Internetverbindung auf deine Webapp zugreifen kann. Es muss keine App heruntergeladen und installiert werden. Es wird kein Speicherplatz auf dem Gerät benötigt, da keine Daten gespeichert werden (wir lassen den Cache und die Cookies an dieser Stelle außen vor :-P ). Weiterhin ist die Webapp auch auf Desktop-Geräten verwendbar (Voraussetzung ist, dass die Webseite responsive ist). Das soweit zu den markantesten Vorteilen.
Nachteile
Ein großer Nachteil ist, dass man nicht den Zugriff auf das System hat, wie es mit einer nativen App möglich wäre. Verwendung der Bewegungssensoren, Kamera usw. sind nur eingeschränkt möglich. Auch das Schicken von Benachrichtigungen ist nur sehr bedingt umsetzbar. Ein weiterer Nachteil ist, dass die Webapp nur verwendet werden kann, wenn eine Internetverbindung besteht.
"Look'n'Feel" einer App nachahmen
Es gibt verschieden Methoden die man anwenden kann, um das Gefühl bei der Benutzung der Webapp nah an das einer nativen App zu anzusiedeln. Ein paar ausgewählte Methoden werden im folgendem vorgestellt.
Rahmenlose Webapp
Damit während der Nutzung der Webapp nicht die Bedienelemente (URL-Leiste & Statusbar) des Safaris angezeigt werden werden die beiden Meta-Tags "apple-touch-fullscreen" und "apple-mobile-web-app-capable" im "Header" der Webseite benötigt. Dadurch wird das Gefühl eine native App zu benutzen verstärkt.
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Ein Nachteil der dadurch entsteht ist, dass die Verwendung von Links den Benutzer wieder in den normalen Safari führen. Dies lässt sich allerdings durch folgendes jQuery-Script im "Header" beseitigen:
(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")
Es sorgt dafür, dass man in der Webapp bleibt. Mit dem Meta-Tag "apple-mobile-web-app-status-bar-style" lässt sich die Farbe der Status-Bar anpassen.
Das Ergebnis der Anpassungen sieht man an den beiden Bildern. Links ohne Änderungen und rechts mit Änderungen.
"Add to Homescreen"
Damit der Benutzer auch weiß, dass er die Möglichkeit hat die Webseite als Webapp speichern zu können, wird durch folgendes Script eine Hinweis-Box eingeblendet, kurz nachdem die Webseite auf dem iOS Gerät aufgerufen wurde.
var addToHomeConfig = {
message: 'Für dein %device ist die Webseite als WebApp verfügbar. Jetzt %icon drücken und zum Homescreen hinzufügen.',
expire: 10,
touchIcon: true
};
Im Attribut "message" kann mit den Schlüsselwörtern "%device" das aufrufende Gerät abgefangen und angezeigt werden (z.B. iPhone). "%icon" ist der Platzhalter für das Teilen-Symbol in der Statusleiste des Safaris. Alle weiteren benötigten Scripte und eine ausführliche Anleitung findet ihr hier.
Wenn die Webseite dann als Webapp gespeichert werden soll, wird der Titel der Webseite als Name für die Webapp verwendet. Wenn man jedoch einen anderen Namen dem Benutzer als Vorschlag geben möchte, lässt sich dies mit dem Meta-Tag "apple-mobile-web-app-title" bewerkstelligen.
<meta name="apple-mobile-web-app-title" content="Teipin.de">
Homescreen Icon
Damit die Webapp auf dem Homescreen nicht als Screenshot der Seite angezeigt wird, sondern ein ordentliches Icon hat, sollten die folgenden Meta-Tags mit Icons in entsprechender Auflösung hinterlegt werden.
<link rel="apple-touch-icon" href="img/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png">
Die verschiedenen Auflösungen bedienen die verschieden großen Displays der iPhone Modelle. Beispielsweise wird ein iPhone mit Retina Display nicht das 57px * 57px Icon verwenden, sondern das größere 114px * 114px Icon. Dieses wird dann runter skaliert um eine scharfe Darstellung des Icons zu gewährleisten.
Fazit
Die hier vorgestellten Methoden sind nur Taschenspieler-Tricks. Man kann mit ihnen schnell und recht einfach das "Look'n'Feel" einer nativen App nachahmen. Es gibt noch weitere Möglichkeiten, um seine Webapp zu "pimpen". Beispielsweise konnte man beim Start der Webapp einst ein Bild anzeigen lassen, dass für ein paar Sekunden verharrte, bis die Webap angezeigt wurde (Splash Screen).
Jedoch sollte man sich beim Verwenden bewusst sein, dass es Funktionen gibt, die mit Webapps nicht benutzt werden können. Ist man also gezwungen Push-Nachrichten an das Smartphone des Benutzers zu schicken, so ist die Lösung ganz klar eine native App und keine Webapp.
Ich hoffe ich konnte dir weiterhelfen eine der aufgefassten Thematiken zu verstehen, kennenzulernen oder auszubauen. Wenn dem so ist, oder auch nicht, würde ich mich über Feedback via Upvote oder Kommentar sehr freuen. Falls du jetzt schon neugierig geworden bist, was das Ergebnis der Arbeit meines Vaters und mir ist, dann besuche doch einfach mal die Webseite Teipin.de. Wenn du die noch folgenden Beiträge nicht verpassen willst, dann folgen diesem Account ;)
Letzter Beitrag:
Teipin.de #01 - Der Beginn
Teipin.de #02 - Erste Schritte
Danke fürs Lesen
CuBy
PS: Fehler bei der Rechtschreibung und Grammatik sind stilistische Mittel und vom Autor bewusst platziert worden. :-D