HowTo: Blog als WebApp einrichten

How To - Blog als Web App einrichten.

Gestern war etwas Zeit um mal wieder unter der Haube von iPhomania nachzubessern. Grund für diesen Schritt war das Anbieten des Blogs als WebApp auf iPhone, iPad & Co. Mit den passenden Einstellungen kann so eine gefühlt native App erstellt werden. Dazu waren folgende Punkte wichtig für dieses Unterfangen:

  • das Ausblenden der Safari Webleiste und somit lauffähig als „Standalone“ App
  • Beim Öffnen von Links wird standardmäßig der Safari-Browser gestartet. Dies musste unterbunden werden.
  • Implementierung einer Aktivitätsanzeige beim Laden neuer Inhalte
  • erstellen WebClip-Icons für alle Geräte

Hier ein kleiner Erfahrungsbericht und hoffentlich eine kleine Hilfestellung falls ihr selbiges Nachbauen wollt. Bei Fragen bitte die Kommentarfunktion nutzen.

Standalone

Für das Ausblenden der Safari-Leiste und die Möglichkeit die Wep Applikation als Standalone Applikation zu betreiben genügt der folgende Eintrag in der header.php eures WordPress Theme:

<meta name="apple-mobile-web-app-capable" content="yes" />

Möchte man auf dem iPhone 5 auch den kompletten Bildschirm nutzen, so muss ebenfalls im header.php File folgendes nachgetragen werden:

<script>

if (window.screen.height==568) { // iPhone 4"
document.querySelector("meta[name=viewport]").content="width=320.1";
}
</script>

Behandlung von Links

Betätigt man Links in der WebApp, so werden diese standardmäßig mit dem Safari geöffnet. Mit dem unten angehängten Codeschnipsel kann auch dies unterbunden werden. Dieses Script entweder direkt in den Header übernehmen in ein Script Tag oder das JavaScript File separat abspeichern und im Header verlinken:


(function(document,navigator,standalone) {
 // prevents links from apps from oppening in mobile safari
 // this javascript must be the first script in your <head>
 if ((standalone in navigator) && navigator[standalone]) {
 var curnode, location=document.location, stop=/^(a|html)$/i;
 document.addEventListener('click', function(e) {
 curnode=e.target;
 while (!(stop).test(curnode.nodeName)) {
 curnode=curnode.parentNode;
 }
 // Condidions to do this only on links to your own app
 // if you want all links, use if('href' in curnode) instead.
 if(
 'href' in curnode && // is a link
 (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
 ( !(/^[a-z\+\.\-]+:/i).test(chref) || // either does not have a proper scheme (relative links)
 chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain
 ) {
 e.preventDefault();
 location.href = curnode.href;
 spinner.style.display="";
 }
 },false);
 }
 })(document,window.navigator,'standalone');

basierend auf https://gist.github.com/1042167

Aktivitätsanzeige

iPhomania_Loading

Beim Laden neuer Inhalte wäre es zudem schön eine Anzeige zu bekommen, dass im Hintergrund neue Daten geladen werden. Den Grundstein haben wir bereits mit dem oben angehängten JavaScript-Snippet gelegt. In Zeile 21 wird darin das unten angehängte <div> eingeblendet. Solange bis der neue Inhalt geladen wurde. Das unten angehängte <div> Element könnt ihr irgendwo im <body> -Tag anhängen. Die Position wird mittels dem style Attribut gesetzt:

<div id="spinner" style="text-align:center; padding-top:30px; display:none;margin-top:215px; margin-left:110px; position:fixed; width:100px; height:70px; background:black; z-index:1234;-webkit-border-radius:10px;opacity: 0.9; color:white; font-size:10px;">

<img id="img-spinner" src="<?php echo get_stylesheet_directory_uri()?>/ajax-loader.gif" alt="Loading" />
 </br>Seite wird geladen

</div>

Die passenden Grafiken findet ihr z.B. unter http://ajaxload.info oder mein Beispiel hier: klick. Eventuell müsst ihr die Pfade zu dieser Grafik manuell an eure Umgebung anpassen.

WebClip – Icons

Um ein passendes Icon auf eurem Homescreen anzuzeigen benötigt man 4 verschiedene Größen der Icons um alle iDevices abzudecken. Dazu benötigt ihr Grafiken in den Größen 144 x 144 px (iPad Retina), 72 x 72 px (iPad Non-Retina), 114 x 114 px (iPhone Retina), 57 x 57 px (iPhone Non-Retina). Diese legt ihr dann auf euren Webserver und fügt folgende Zeilen im Header hinzu (Pfade müssen eventuell an eure Umgebung angepasst werden):

<!-- iPad (Retina) -->
<link rel="apple-touch-icon"
 sizes="144x144"
 href="<?php echo get_stylesheet_directory_uri()?>/webclip_icons/apple-touch-icon-144x144.png">

<!-- iPhone (Retina) -->
<link rel="apple-touch-icon"
 sizes="114x114"
 href="<?php echo get_stylesheet_directory_uri()?>/webclip_icons/apple-touch-icon-114x114.png">

<!-- iPad -->
<link rel="apple-touch-icon"
 sizes="72x72"
 href="<?php echo get_stylesheet_directory_uri()?>/webclip_icons/apple-touch-icon-72x72.png">

<!-- iPhone -->
<link rel="apple-touch-icon"
 sizes="57x57"
 href="<?php echo get_stylesheet_directory_uri()?>/webclip_icons/apple-touch-icon-57x57.png">

Das sollte vorerst alles sein. Um euren Blog oder auch iPhomania zu eurem Homescreen hinzuzufügen genügen die folgenden Schritte:

WebApp hinzufügen

  • Nette Sache!
    Gibts auch eine Möglichkeit fremde Websites ohne Safari anzeigen zu lassen? Würde das super gerner bei meiner (iOS optimierten) Banken Webpage machen!

    lg

    • Johannes

      Danke.
      Denke nicht das dies möglich ist. Du müsstest die Seite über deinen Server leiten und entsprechend anpassen um die Links innerhalb der WebApp öffnen zu können. Bei einer Banking-Seite wird das sicherlich nicht möglich sein.

  • Bei mir öffnen sich zudem fast alle links via Safari… Kann man dies auch noch irgendwie eindeutiger machen?

    • Johannes

      Was genau meinst du?

  • Naja mit obigen Befehl haben wir ja festgelegt, dass Links innerhalb der „Webapp“ geöffnet werden sollen, trotzdem werden einige Links über Safari geöffnet…

    • Johannes

      Ok. Nun hab‘ ich es geschnallt was du meinst 😉
      Im JavaScript einfach in der if-Anweisung in Zeile 3 nur den Teil mit 'href' in curnode abfragen. Alles andere entfernen oder auskommentieren. Sollte dann in etwa so aussehen:
      if(
      'href' in curnode /* && // is a link
      (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
      ( !(/^[a-z\+\.\-]+:/i).test(chref) || // either does not have a proper scheme (relative links)
      chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain */
      )

  • Johannes

    Das Problem ist dann nur, dass du dann nicht mehr zurückkommst. Nun wäre die Safari Navigationsleiste am unteren Bildschirmrand nützlich.

  • Müsste doch gehen nur die obere Leiste auszublenden?
    Warum startet die Seite eigentlich nur im „Vollbild-Modus“ wenn man sie am Homescreen speichert?

  • Johannes

    Der Codeschnipsel unter Kapitel „Standalone“ im Header ist verantwortlich für die Anzeige der Seite ohne die Safari-Adressleiste sowie Navigationsleiste. Vielleicht ist es möglich ohne diese Zeile möglich nur die Adressleiste auszublenden. Sag‘ mir Bescheid wenn du es in Erfahrung bringen konntest 😉

  • Ich werde das ganze wenn Zeit mal unter die Lupe nehmen und gebe dir auf jedenfall bescheid! Muss erstmal mein Template optimieren, habe nicht so glück wie du so ein tolles responsive-template zu haben! =)

    • Johannes

      Super. Danke.
      Ja das Theme ist echt klasse. Generell alle Themes von Elmastudio. Bin am überlegen, ob ich mir das Neue (Tatami) zulegen soll.

  • Hi!
    Kann es sein, dass im Script wo die Links intern behandelt werden ein Fehler ist?
    Bei mir haut er Syntax Error raus…
    Folgendes habe ich eingebunden…
    <?php

    (function(document,navigator,standalone) {
    // prevents links from apps from oppening in mobile safari
    // this javascript must be the first script in your
    if ((standalone in navigator) && navigator[standalone]) {
    var curnode, location=document.location, stop=/^(a|html)$/i;
    document.addEventListener('click', function(e) {
    curnode=e.target;
    while (!(stop).test(curnode.nodeName)) {
    curnode=curnode.parentNode;
    }
    // Condidions to do this only on links to your own app
    // if you want all links, use if('href' in curnode) instead.
    if(
    'href' in curnode && // is a link
    (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
    ( !(/^[a-z\+\.\-]+:/i).test(chref) || // either does not have a proper scheme (relative links)
    chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain
    ) {
    e.preventDefault();
    location.href = curnode.href;
    spinner.style.display="";
    }
    },false);
    }
    })(document,window.navigator,'standalone');

    ?>

    • Johannes

      Das ist auch kein php-File. Speicher es als JavaScript File ab und leg‘ es auf deinen Server. Und dann wie beschrieben im Header einbinden/verlinken.

  • So hab jetzt soweit alles mit dem mobile theme geregelt, einziges Problem: Das ganze past sich auf einmal mit dem neuen mobile theme (elmastudios) nicht mehr an den iPhone 5 Screen an… Rat?

    • Johannes

      Hab‘ gesehen, dass du das Script um den iPhone 5 Screen zu unterstützen zweimal im Header eingebunden hast. Vielleicht ist auch die Reihenfolge wichtig. Zuerst das „apple-mobile-web-app-capable“, dann das Script für 4 Zoll Display und dann die Ions?
      Und noch ein kleiner Tip: Wenn ich dein Blog zum Homescreen hinzufüge, dann wird als Label immer „Stephsblog -“ vorgeschlagen. Das kannst du unterbinden. Einfach „meta name=“apple-mobile-web-app-title“ content=“Stephsblog““ hinzufügen.

  • So eigentlich alles richtig gestellt, aber noch immer das gleiche Problem… Seltsam ist nur, dass es beim anderen Theme funktioniert hat!?

    • Johannes

      Ok. Ich glaub‘ ich weiß woran es liegt. Du „überbügelst“ deinen viewport später wieder (nach den WebClip-Icons) den du zuvor für das iPhone 5 gesetzt hast.

  • ist es möglich, eine abfrage zu gestalten, ob die app bereits vollbild läuft oder nicht?
    ich möchte nämlich abfragen, ob der benutzer die app schon als icon hat und wenn nicht eine entsprechende nachricht anzeigen, mit dem hinweis, wie man die seite zum homescreen hinzufügt.

    super blog übrigens. würde mich über eine antwort freuen 🙂
    mfg, lennart

  • Super Artikel, zumal ich bis hierher 5 Artikel gefunden hatte die mir nur was verkaufen wollten und Webapps irgendwie nur beiläufig waren. Blos nichts erklären. Vielen Dank für diese ausführliche Erklärung. Webapps werden schließlich immer relevanter.

  • Manuel

    Mich würde interessieren, ob Google es erlaubt Adsense im Standalone Mode anzeigen zu lassen. Dies ist nicht klar definiert, zu mal der Begriff Webapp ja auch sehr inflationär benutzt wird. Es handelt sich ja eigentlich nur um eine Webseite, die ein Icon auf dem Homescreen hat.