Ein Brückenschlag zwischen dem alten Dilemma: Webseite oder App für mobile Geräte?
Eine einfache Möglichkeit besteht darin der Webseite eine Manifest-Datei mitzugeben. Dies ermöglicht dem Endbenutzer auf mobilen Geräten die Webseite als eine Art App zu installieren.
Installiert wird die Webseite über die Option des Google-Chrome unter "Einstellungen" -> "Zum Startbildschirm hinzufügen". Wird die Option vom Benutzer ausgeführt, fügt der Chrome dem mobilen Gerät ein Icon auf dem Startbildschirm hinzu. Über dieses Icon kann die Webseite wie eine App auf dem mobilen Gerät gestartet werden.
Bei der Manifest-Datei handelt es sich um eine JSON-Datei. Wo die Datei zu finden ist wird im Header der Webseite mit einem "Link"-Attribut angegeben.
<!-- WebApp-Manifest --> <link rel="manifest" href="manifest.webmanifest">
"name": "..." String, der Name der App auf dem mobilen Gerät."short_name": "..." String, der Kurzname der App auf dem mobilen Gerät (überschreibt "name" wenn beide angegeben)."icons" [ {...}, ... ] Array, definiert die Icons auf dem mobilen Gerät.
"src": "..." String, gibt die URL der Bilddatei an."sizes": "..." String ["PIXELxPIXEL"], gibt die Größe der Bilddatei an."type": "..." String ["image/..."], gibt das Format der Bilddatei an."start_url": "..." String, definiert die URL mit der die Webseite aufgerufen wird."display": "..." String ["browser" | "standalone" | "fullscreen"], definiert ob die Webseite im Browser, ohne Browser oder Fullscreen dargestellt werden soll."orientation": "..."String ["portrait" | "landscape"], definiert die Darstellung im Hoch- oder Querformat.Die Attribute "name" und "short_name" sollten beide angegeben werden. Eines davon nutzt das Endgerät um der installierten App einen Namen zu geben. Das Icon wird als Symbol für die App verwendet, hier können auch mehrere Icons angegeben werden, je nach Auflösung und Größe kann das mobile Engerät dann ein für sich passendes Icon auswählen.
Interessant wird es bei den Attributen "start_url", "display" und "orientation".
Die Option "start_url" bestimmt den Punkt an dem die Webseite aufgerufen wird. Hier können alle denkbaren URL's angegeben werden, inklusive Parameter ("/", "http://www.relast.de"). Dementsprechend kann zum Beispiel auch mit Hilfe einer Umleitung oder eines Parameters ausgewertet werden ob die Webseite als App aufgerufen wurde ("http://webappcall.relast.de", "http://www.relast.de?webappcall=1").
Die Option "display" hingegegen bestimmt die Darstellung der Webseite. Die Angabe "standalone" bewirkt das die Webseite ohne Browser angezeigt wird (keine Adresszeile o.ä.). Hier wirkt die Webseite also bereits wie eine normale App. Die Angabe "fullscreen" geht noch einen Schritt weiter und lässt auch die oberste Zeile des mobilen Gerätes verschwinden (Status-Bar mit Empfangs- und Akku-Anzeige usw.). In diesem Fall wirkt die Webseite also wie eines der netten Spiele die man sich als App installieren kann, die Webseite ist allein-Herrscher auf dem Display.
Die Option "orientation" bietet die interessante Option die Darstellung auf Hoch- oder Querformat festzulegen. Die Angabe "portrait" legt die Darstellung auf Hochformat fest, die Angabe "landscape" lässt die App gleich im Querformat starten.
Hier wird nur der Name und ein Icon definiert, der Browser ist beim Aufruf noch sichtbar. Damit wird sozusagen ein einfaches Lesezeichen auf dem Startbildschirm angelegt.
{
"name": "ReLast WebApp",
"short_name": "ReLast",
"icons": [
{
"src": "img/icon.png",
"sizes": "64x64",
"type": "image/png",
}
],
}
Zusätzlich zu der minimal-Version werden "start_url" und "display": "standalone" definiert. Damit wirkt die Webseite wie eine App auf dem Gerät.
{
"name": "ReLast WebApp",
"short_name": "ReLast",
"icons": [
{
"src": "img/icon.png",
"sizes": "64x64",
"type": "image/png",
}
],
"start_url": "/",
"display": "standalone"
}
Es werden drei verschiedene Icons angeboten, die Darstellung ist "display": "fullscreen" und die "orientation" wird auf "landscape" festgelegt. Geeignet zum Beispiel für Spiele oder für Webseiten die prominenten Content darstellen, wie Bilder o.ä..
{
"name": "ReLast WebApp",
"short_name": "ReLast",
"icons": [
{
"src": "img/icon_low.png",
"sizes": "32x32",
"type": "image/png",
},
{
"src": "img/icon_mid.png",
"sizes": "64x64",
"type": "image/png",
},
{
"src": "img/icon_high.png",
"sizes": "128x128",
"type": "image/png",
}
],
"start_url": "/",
"display": "fullscreen",
"orientation": "landscape"
}
Das Webapp-Manifest bietet genügend Optionen um eine Webseite wie eine App auf dem Handy wirken zu lassen. Doch was bringt uns das?
Ein Problem in der Differenz zwischen Webseite und mobiler App bleibt: der Zugriff auf die Geräte-Funktionen. Dieser ist nach wie vor ein wenig eingeschränkt (Stichwort Sicherheit, nicht jede Webseite soll die Kamera und alle Dateien auslesen können). Allerdings sind zunehmende Aufweichungen dieser Grenzen zu verzeichnen. Ob eine Webseite auf die Kamera oder auf den Standort zugreifen darf ist vermutlich jeder schon mal gefragt worden.
Ein weiteres Problem ist die Unterstützung dieser Technik. Nicht alle Browser haben die Technik bereits implementiert.
Das größte Problem ist aber definitv: die Installation. Es gibt derzeit noch keine Link mit dem man dem Benutzer die Installation anbieten könnte. Es bleibt nur die Erklärung der Installation über den Browser. Dies kann man sicher schick verpacken, aber schön ist trotzdem anders.
Die Vorteile sind allerdings nach kurzer Überlegung offensichtlich. Zum einen kann man damit das Problem der Software-Verteilung grandios umgehen. Eine Web-Anwendung die Daten zentral speichert muss keine App entwickeln die ein eigenes Frontend bietet und die Daten dann mit dem Webserver abgleicht, statt dessen wird die Webseite wie eine App ausgeführt. Sollte es Aktualisierungen an der Anwendung geben muss keine neue Version der App in den Play-Store ausgeliefert werden (und man muss nicht warten bis alle das Update installiert haben). Die Software-Versionen sind also stets aktuell und deren Verwaltung unterliegt der eigenen Kontrolle. Mit Hilfe des "Local-Storage" können auch, mit Java-Script gesteuert, lokal Daten zwischengespeichert werden.
Besonders Spiele die im Browser implementiert werden, können von dieser Technik enorm profitieren. Keine Play-Store Verwaltung mehr nötig. Gleiches gilt für alle anderen Anwendungen dieser Art. Eigentlich kann man allen Webseiten die bisher eine App entwickelt haben, um ihre Webseite über diesen Weg nutzbar zu machen, sagen: hat sich erledigt.
Copyright © 2024