Webapps erstellen mit manifest.json

Websites können so entwickelt werden, dass sie wie eine natives App aussehen und bedient werden. Das wird unter anderem dadurch erreicht, indem man die Adressleiste und Schaltflächen des Browsers ausblendet und die Webseite im Fullscreen- bzw. Standalone-Modus angezeigt wird. Nachfolgend ist die Abbildung einer Website im Standalone-Modus auf einem Smartphone.

Daneben ist es möglich, sogenannte Touch-Icons für die Website bereitzustellen. Wenn man eine Website zum Homescreen hinzufügt, wird ein passendes Touch-Icon angezeigt und die Website kann darüber gestartet werden. Bei Webapps erhält man das Gefühl, als wäre es ein natives App und man kommt dem "Look and feel" von nativen Apps sehr nahe.

Für jede Einstellung und jeden Touch-Icon benötigte man früher Einträge im HEAD-Bereich der Seiten. Dadurch wurde der HEAD-Bereich mit vielen Einträgen aufgebläht. Das Problem wurde verstärkt, weil die Browser die Einträge nicht einheitlich gehandhabt haben. Für die Windows-Tiles benötigte man z.B. Einträge in der Form <meta name="msapplication*.....*>. In iOS-Systemen musste man für die Touch-Icons Einträge in der Form <link rel="apple-touch-icon*.....*> einfügen. Manch andere Browser berücksichtigten wiederum nur Einträge in der Form <link rel"icon*.....*>. Das Ergebnis war, dass man im HEAD-Bereich unzählige Einträge einfügen musste, wenn man denn möglichst alle Browser und Systeme berücksichtigen wollte.

Damit man den HEAD-Bereich nicht aufbläht und möglichst alle Einstellungen und Angaben zu den Touch-Icons zentral gesteuert werden, kann eine sogenannte Manifest-Datei bereitgestellt werden, die auf dem Server abgelegt und durch einen LINK-Tag im HEAD-Bereich eingebunden wird. Dadurch können alle übrigen Einträge, die relevant für die Webapp sind, entfallen. Laut dem Stand von 06/2015 unterstützt jedoch nur der Browser Chrome für Android ab der Version 38 die Manifest-Datei. Andere Browser könnten jedoch im Laufe der Zeit nachziehen. Analog dazu kann man für die Windows-Tiles die Datei browserconfig.xml bereitstellen, wofür nicht mal ein Eintrag im HEAD-Bereich benötigt wird, wenn die Datei so benannt wurde.

Die Datei manifest.json

Die Datei muss nicht unbedingt manifest.json heißen. Der Eintrag im HEAD-Bereich muss bei Abweichungen entsprechend angepasst werden. Außerdem ist die Dateiendung .json zu berücksichtigen. Die Datei wird mit einem einfachen Texteditor erstellt und ist wie folgt aufgebaut.

{
  "schluesselwort1": "Wert1",
  "schluesselwort2": "Wert2"
}

Die Einträge erfolgen innerhalb der geschweiften Klammern {...}. Für jeden Eintrag setzt man in Anführungszeichen ein Schlüsselwort. Danach folgt ein Doppelpunkt und der Wert für das Schlüsselwort wird ebenfalls in Anführungszeichen angegeben. Mit einem Komma getrennt, erfolgt der nächste Eintrag. Der Übersichtlichkeit halber sollte man jeden Eintrag in einer separaten Zeile schreiben. Nach dem letzten Eintrag entfällt das Komma.

Einem Schlüsselwort kann man nicht nur einen Wert zuweisen, sondern auch Arrays mit mehreren Objekten (Satz von Einträgen, die man dem Hauptschlüsselwort zuordnet). Das ist z.B. bei Icons notwendig, da man viele Einträge zu verschiedenen Größen und Touch-Icons etc. machen muss. Der Aufbau eines Json-Arrays ist aus dem folgenden Code zu entnehmen.

{
  "schluesselwort1": "Wert1",
  "schluesselwort2": "Wert2",
  "hauptschluesselwort3": [
    {
    "schluesselwort311": "Wert311",
    "schluesselwort312": "Wert312"
    },
    {
    "schluesselwort321": "Wert321",
    "schluesselwort322": "Wert322"
    }
  ]
}

Die Arrays werden innerhalb der eckigen Klammern [...] eingetragen. Jeder Satz von Objekten wird wiederum in geschweiften Klammern {...} eingetragen. Einzelne Sätze werden mit einem Komma getrennt. Innerhalb eines Satzes erfolgen die Einträge wie bei den normalen Einträgen. Auch hierbei empfiehlt es sich, für jeden Eintrag eine Zeile zu verwenden.

Beispiel-Datei mit Namen und Icons

Möchte man z.B. für die Webapp einen langen und kurzen Namen sowie Angaben zu den Touch-Icons machen, kann man in die Manifest-Datei folgendes eintragen.

{
  "name": "Mein Webapp",
  "short_name": "Webapp",
  "icons": [
    {
      "src": "/launcher-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "/launcher-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    }
  ]
}

Wenn man eine Webapp zum Homescreen hinzufügt, wird mit dem Icon ein Name für den Eintrag angezeigt. Der Name kann vom Entwickler vorgegeben werden, der beim Hinzufügen zum Homescreen angezeigt wird. Hierbei wird zwischen den Schlüsselwörtern "name" und "short_name" unterschieden, womit ein langer und ein kurzer Name vergeben werden kann. Sind beide Einträge vorhanden, wird in der Regel der kurze Name angezeigt.

Über das Schlüsselwort "icons" werden die Einträge zu den Touch-Icons gemacht. Jeder Satz kann verschiedene Einträge enthalten, die mit Komma getrennt angegeben werden. Einige Schlüsselwörter mit Hinweisen zu den Werten.

"src": "Pfad zur Bilddatei" (z.B. "/launcher-icon-36x36.png")
"sizes": "Größe der Bilddatei" (z.B. "36x36")
"type": "MIME-Typ der Bilddatei" (z.B. "image/png")
"density": "Angabe der Pixel-Dichte des Geräts" (z.B. "1.0")
"background_color": "Farbcode für die Hintergrundfarbe" (z.B. #ff0000)

Diese Angaben werden beim Hinzufügen zum Homescreen berücksichtigt und ein passendes Icon verwendet. Falls mehrere Icons passend sind, wird das Icon verwendet, das zuletzt angegeben wurde.

Beispiel Manifest-Datei mit weiteren Einträgen

Eine Manifest-Datei kann natürlich viele weitere Einträge enthalten. Ein Beispiel.

{
  "name": "Mein Webapp",
  "short_name": "Webapp",
  "icons": [
    {
      "src": "/launcher-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "/launcher-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "/launcher-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "/launcher-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "/launcher-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "/launcher-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ]
  "start_url": "/start.html",
  "display": "standalone",
  "orientation": "portrait"
}

In diesem Beispiel wurden für das Hauptschlüsselwort "icons" weitere Einträge hinzugefügt. Die angegebenen Größen für die Touch-Icons sind für Chrome in Android ab der Version 39 geeignet. Die Bedeutung der im unteren Bereich hinzugefügten und einigen anderen Schlüsselwörtern ist wie folgt.

lang

Die Sprache für den Inhalt von "name" und "short_name". Für Deutsch kann als Wert "de-DE" oder "de" eingetragen werden.

start_url

Hierbei kann ein relativer oder absoluter Pfad angegeben werden. Man kann z.B. die Startseite eintragen und dadurch erreichen, dass immer die Startseite aufgerufen wird, egal von welcher Unterseite die Webapp zum Homescreen hinzugefügt wurde. Man kann der Start-URL für verschiedene Zwecke auch Parameter übergeben, z.B. in der Form /index.php?foo=bar.

display

Damit wird angegeben, wie die App angezeigt werden soll. Folgende Werte sind möglich.

standalone: Die Adressleiste wird mit dem Wert "standalone" ausgeblendet wird.
fullscreen: Man könnte den Wert "fullscreen" eintragen, damit neben der Adressleiste auch die "Action-Bar" ausgeblendet wird. Ob und mit welchen Browsern der Wert "fullscreen" funktioniert, sollte vor der Verwendung getestet werden.
minimal-ui: Mit "minimal-ui" wird der Browser minimal ausgestattet, z.B. mit den Vor-, Zurück- und Aktualisieren Schaltflächen. Welche Elemente angezeigt werden, ist vom Browser abhängig. Diese können auch spezifische Schaltflächen beinhalten, z.B. eine Drucken- oder Teilen-Schaltfläche.
browser: Mit dem Wert "browser" wird die Webapp im normalen Modus des Browsers angezeigt.

Die angegebenen Werte haben einen Fallback-Modus. Gibt man z.B. "fullscreen" ein, wird zunächst versucht, die Webapp in diesem Modus zu laden. Unterstützt der Browser das nicht, wird die Webapp auf "standalone" geschaltet. Die Fallback-Reihenfolge ist dabei wie folgt: fullscreen -> standalone -> minimal-ui -> browser.

orientation

Ob die Webapp im Hoch- oder Querformat angezeigt werden soll, wird darüber festgelegt. Einige mögliche Werte.

any: Überlässt die Ausrichtung dem Browser.
natural: Standardausrichtung des Geräts. Ist unterschiedlich, jedoch häufig Querformat.
portrait: Für Hochformat trägt man als Wert "portrait" ein.
landscape: Für Querformat wird "landscape" eingetragen.
portrait-primary: Bei hochformatigen Bildschirmen auf Hochformat (richtige Ausrichtung) und bei querformatigen Bildschirmen um 90° im Uhrzeigersinn gedreht.
landscape-primary: Bei querformatigen Bildschirmen auf Querformat (richtige Ausrichtung) und bei hochformatigen Bildschirmen um 90° gegen den Uhrzeigersinn gedreht.
portrait-secondary: Bei hochformatigen Bildschirmen auf den Kopf gestellt und bei querformatigen Bildschirmen um 90° gegen den Uhrzeigersinn gedreht.
landscape-secondary: Bei querformatigen Bildschirmen auf den Kopf gestellt und bei hochformatigen Bildschirmen um 90° im Uhrzeigersinn gedreht.

scope

Als Wert kann eine relative oder absolute Adresse angegeben werden. Hat Auswirkungen auf die Verlinkung von und zu Apps. Wird ein Pfad angegeben und klickt man innerhalb der Webapp auf einen Link, der außerhalb des Bereichs führt, dann wird der Link im Standardbrowser des Geräts geöffnet. So soll dem User nicht unbemerkt bleiben, dass die verlinkte Seite nicht zum Bereich vom Webapp gehört. Wird auf eine Adresse verlinkt, die sich innerhalb des angegebenen Bereichs befindet, wird der Link im aktuellen Appfenster geöffnet.

splash_screens

Ein oder mehrere Bilder können als Startbild angezeigt werden. Die Bildpfade, MIME-Typen, Bildgrößen und Pixel-Dichten werden wie beim "icon" als ganze Sätze in Arrays eingetragen. Hierbei ist zu beachten, dass die Bildschirme wesentlich größer sind als die Touch-Icons und die Bilder dementsprechend groß sein sollten, z.B. in 320x240, 1024x768 und 1920x1080 Pixeln.

theme_color

Ein Farbwert kann angegeben werden (z.B. #ff0000), mit dem die Header-Leiste des Fensters gefärbt wird. Es ist nicht gesichert, dass das Feature in den Spezifikationen bleibt. Nachfolgend zwei Abbildungen.

related_applications

Wenn neben der Webapp eine native App zur Verfügung steht, kann es sinnvoll sein, die User darauf hinzuweisen. Hierfür dient das Schlüsselwort related_applications. Die Einträge werden als Array eingegeben. Jeder Satz kann folgende Schlüsselwörter enthalten, mit denen auf die andere App verwiesen wird.

platform: Als Wert wird der Name der Plattform eingetragen.
url: Die Adresse, auf der die App zu finden ist.
id: Eine ID für das Objekt. Kann z.B. zum Auslesen der angegebenen URL verwendet werden.

Ein Beispiel.

{
  "related_applications": [
    {
    "platform": "platform1",
    "url": "https://......",
    "id": "beispielapp1"
    }, 
    {
    "platform": "platform2",
    "url": "https://......",
    "id": "beispielapp2"
    }
  ]
}

prefer_related_applications

Als Wert trägt man einen booleschen Wert (true/false) ein, um dem Browser mitzuteilen, ob die unter "related_applications" angegebene App dem Webapp vorgezogen werden soll. So kann ein Browser beim Installieren einer Webapp vorschlagen, die native App zu installieren.

All die genannten Schlüsselwörter und Werte können, müssen jedoch nicht mit den Browsern funktionieren. Daneben können weitere Schlüsselwörter und Werte berücksichtigt werden, die hier nicht aufgelistet sind.