Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Apps » WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps

WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 19. Dezember 2014
Bookmarke mich
Share on pocket

Homepage & Design Heroes GmbH

KnallBlauMedia

4eck Media GmbH & Co. KG

Webagentur klickbeben

BIZ Digital Marketing

esTethik.media GmbH

Native Apps für Smartphones und Tablets sind nach wie vor beliebt, aber nicht immer notwendig. Vieles lässt sich als Webapplikation mit HTML5, CSS3 und JavaScript realisieren. Dank entsprechender JavaScript-APIs hat man beispielsweise Zugriff auf den Orientierungssensor und kann auch Gesten erkennen und entsprechend darauf reagieren. Mit dem WebApp-Manifest ist es zudem möglich, weitere klassische App-Eigenschaften für Webapplikationen zu übernehmen. Dazu gehört unter anderem das Bereitstellen spezieller Launcher-Icons oder eines gesonderten Launcher-Namens, der sich vom häufig langen Titel des HTML-Dokumentes unterscheiden kann.

webapp-manifest

Manifest erstellen und einbinden

Wer Erfahrung mit dem Programmieren nativer Apps für Android oder iOS gemacht hat, kennt die Einstellungsmöglichkeiten für Apps. Neben Launcher-Icons und -Name kann beispielsweise definiert werden, ob die App nur in einer bestimmten Orientierung oder im Vollbildmodus – also ohne „Action Bar“ – ausgeführt werden soll. Per HTML5, CSS3 oder JavaScript sind solche Eigenschaften für Webapps nicht festlegbar. Allerdings gibt es die Möglichkeit, diese und weitere Eigenschaften in einem sogenannten WebApp-Manifest zu definieren. Es handelt sich dabei um eine Textdatei, welche die verschiedenen Konfigurationseinstellungen in Form eines JSON-Objektes beinhaltet. Die Manifest-Datei wird per „link“-Element im Kopfbereich des HTML-Dokumentes eingebunden.

<link rel="manifest" href="manifest.json" />

Wichtig ist, dass dem „link“-Element per „rel“-Attribut mitgeteilt wird, dass hier eine Manifest-Datei referenziert wird. Im nächsten Schritt werden die einzelnen Eigenschaften, die für die Webapp festgelegt werden sollen, in die Manifest-Datei geschrieben. Diese Manifest-Datei ist nicht zu verwechseln mit der gleichlautenden Datei zur Nutzung des „Application Cache“. Letztere wird über das „<html>“-Element in ein Dokument eingebunden und nicht über ein eigenes „link“-Element.

Webapp aussehen lassen wie native App

Mit einigen Einstellungen im Manifest ist es möglich, eine Webapp so zu starten und aussehen zu lassen wie eine klassische native App. Voraussetzung ist allerdings, dass die Webapp als Verknüpfung auf dem Startbildschirm des Smartphones oder Tablets liegt und von dort aus gestartet wird. Im Chrome gibt es den Menüpunkt „Zu Startbildschirm hinzufügen“. Dadurch wird eine solche Verknüpfung angelegt. Chrome ist derzeit auch der einzige Browser, der das WebApp-Manifest unterstützt.

Im Manifest kann ein vom Standardtitel des HTML-Dokumentes abweichender Name für die Verknüpfung auf dem Startbildschirm angegeben werden. Zwar gibt es mit „name“ und „short_name“ zwei verschiedene Eigenschaften für den Titel der Verknüpfung. „short_name“ überschreibt jedoch immer den Wert „name“. Diese Eigenschaft wird daher ignoriert, wenn auch „short_name“ existiert.

"name": "Langer Name für die Webapp",
"short_name": "Kurzer Name"

Auch das Icon für die Verknüpfung kann per Manifest individuell festgelegt werden. Hierbei lassen sich Icons in unterschiedlicher Größe für unterschiedliche Pixeldichten angeben. Diese werden als JSON-Array referenziert.

"icons": [
  {
    "src": "launcher-icon-36x36-1x.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": "1"
  }
  {
    "src": "launcher-icon-36x36-2x.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": "2"
  }
]

Je nach Gerät wird das passende Icon anhand der in „sizes“ und „density“ definierten Werte ausgegeben. Wird kein maßgenaues Icon gefunden, wird Chrome eines auswählen, welches am ehesten passt.

Normalerweise würde eine Verknüpfung auf dem Startbildschirm als normale Website innerhalb des Browsers aufgerufen – mit entsprechender Navigationsleiste. Mit der Eigenschaft „display“ ist es jedoch möglich, eine Webapp so im Browser darzustellen, dass keine Navigationsleiste sichtbar ist. Optisch ist die Webapp somit nicht von einer nativen App zu unterscheiden.

"display": "standalone"

Neben dem Wert „standalone“, der die Navigationsleiste des Browsers ausblendet,  gibt es noch den Wert „fullscreen“. Hierbei verschwindet auch die „Action Bar“ des Gerätes. Vor allem Spiele werden häufig in diesem Vollbildmodus dargestellt. Er ist nicht zu verwechseln mit dem Vollbildmodus des Browsers. Derzeit scheint Chrome die Eigenschaft „fullscreen“ jedoch nicht zu unterstützen. Auf dem getesteten Gerät wird die Eigenschaft jedenfalls ignoriert und stattdessen „standalone“ verwendet, was der vorgegebene Fallback ist, falls „fullscreen“ von einem Browser nicht unterstützt wird.

Für den Nutzer ist die aufgerufene URL aufgrund der ausgeblendeten Navigationsleiste des Browsers nicht sichtbar. Daher blendet dieser bei Seiten, die per Link zu einer anderen Domain führen, am oberen Bildschirmrand eine kleine Statusleiste ein, in welcher die URL der Seite sichtbar ist. So wird sichergestellt, dass der Nutzer immer weiß, wo er sich gerade befindet.

Desweiteren kann man eine Geräteorientierung für die Darstellung der Webapp vorgeben. Damit ist es möglich, unabhängig von der Ausrichtung des Smartphones oder Tablets, eine Webapp immer im Landscape- oder Portrait-Modus, also im Hoch- oder Querformat, laufen zu lassen.

"orientation": "portrait"

Außerdem gibt es die Möglichkeit, eine Start-URL für die Webapp zu definieren. Damit öffnet sich eine vom Startbildschirm aus aufgerufene Website beziehungsweise Webapp mit einer gesonderten URL.

"start_url": "webapp.html"

Ist die Eigenschaft „start_url“ nicht gesetzt, wird immer die URL verwendet, von der aus eine Website dem Startbildschirm hinzugefügt wird. Mit „start_url“ kann man also zum Beispiel dafür sorgen, dass eine Webapp immer mit ihrer Startseite geöffnet wird.

Oftmals ist es für Entwickler interessant, zu erfahren, wann eine Website vom Startbildschirm und wann sie als normale Website aufgerufen wurde. Hierzu lässt sich die Eigenschaft „start_url“ zweckentfremden, indem dort einfach ein Parameter übergeben wird, der anschließend dazu genutzt werden kann, die Aufrufe vom Startbildschirm aus gesondert festzustellen.

"start_url": "webapp.html?startbildschirm=1"

Dieser Parameter kann per JavaScript oder einer serverseitigen Skriptsprache abgefragt werden. So können auch Analytics-Tools entsprechende Rückschlüsse ziehen, von wo aus die Website beziehungsweise Webapp gestartet wurde.

Keine nachträgliche Änderungen der Manifest-Eigenschaften möglich

Ist eine Website als Verknüpfung dem Startbildschirm hinzugefügt worden, ist es nicht möglich, die definierten Eigenschaften für die gesetzte Verknüpfung nachträglich zu ändern. Wird beispielsweise der Wert für „orientation“ geändert, müsste der Nutzer die bestehende Webapp-Verknüpfung zunächst löschen und anschließend die Website erneut zum Startbildschirm hinzufügen. Erst dann wird die Manifest-Datei wieder ausgelesen.

Fazit

Ist eine Webapp einmal als Verknüpfung auf dem Startbildschirm gelandet, ist sie optisch nicht mehr von einer nativen App zu unterscheiden. Mit entsprechender HTML5-Technik können Sie die Webapp wie eine native App auf das Smartphone oder Tablet laden (Stichwort „Application Cache“) und Einstellungen per „Local Storage“ auf dem Gerät speichern. Somit ist nicht zwingend eine Internetverbindung notwendig, um die Webapp aufrufen zu können.

Der einzige Nachteil beim WebApp-Manifest ist die fehlende Möglichkeit, auf einer Website einen Link darzustellen, der die Website auf den Startbildschirm hinzufügt. Bisher muss man den Nutzern erklären, dass sie die Option „Zum Startbildschirm hinzufügen“ aus dem Menü des Browsers aufrufen müssen. Außerdem muss der aktuelle Chrome 39 auf dem Androidgerät installiert sein.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

Wee Media | Webdesign Agentur

Dernbach

Homepage & Design Heroes GmbH

Balingen

Warscher – Digital Experts

Horgen

4eck Media GmbH & Co. KG

Waren (Müritz)

YOYABA

Hamburg

Alle Agenturpartner

Jobs

Copywriter – Vollzeit

Remote

SEO Junior für Suchmaschinen­optimierung

Salzburg

Elektroinstallateur – Rechenzentrum

Karlsruhe

Senior SEO Manager

München

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webtronix Media entwickelt individuelle Softwarelösungen für dein Unternehmen

Das Team um die Geschäftsführer Björn Steinleitner, Ingo Steinleitner und Claus Freiwald entwickelt für dein Unternehmen maßgeschneiderte Software. Denn Software „von der Stange“ beinhaltet oft nicht die Funktionen, welche dein Business braucht, um einen echten Konkurrenzvorteil gegenüber den Wettbewerbern zu erzielen. In der Softwareentwicklung setzt Webtronix Media auf PHP, MySQL, JavaScript, HTML & CSS. Auf Basis dieses etablierten Frameworks ist deine Softwarelösung immer zukunftsfähig.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Eine Antwort zu „WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps“
— was ist Deine Meinung?

  1. Andreas Hecht sagt:
    19. Dezember 2014 um 16:48 Uhr

    Sehr interessanter Atikel, Denis!

    Danke Dir! Probiere ich gleich mal aus.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.