One Click Away Web – Web ohne Hürden

One Click Away Web – Oder wenn das Web instantan wird

Das Web hat viele Vorteile. Vorteile, die es groß gemacht haben.

Aber etwas, was die native App, vor allem auf dem Smartphone, zu einem “Killer-Software-Event” hat werden lassen, hat das Web nicht. Noch nicht bzw. nicht vergleichbar: Den ‘One Click Away’-Aufruf.
Gerade auf einem mobilen Device ist die “Entfernung” zum Nutzer “konversiv” und entscheidend.

Anzeige eines Installationshinweises in der PVA App, nachdem der Nutzer den Installationsbutton geclickt hat (Chrome unter OSX)

Instantanes Web

Die native App ist heute deutlich instantaner, als das (Mobile) Web. Ein Grund dafür ist der einfache und schnelle, wenig disruptive Zugriff.

Dieser “One Klick Away-Vorteil” hat, neben anderen Aspekten, dem Web die Vormachtstellung auf dem Smartphone gekostet. Nachdem nun auch die Nutzung des Smartphones seit längerer Zeit die Nutzung aller anderen Devices überflügelt, hat damit die native App das Web generell überholt.

Mit dem neuen, alten progressiven App-Ansatz des Webs könnte dieser Nachteil einer ansonsten so überzeugenden, fast konkurrenzlosen Technologie unter Umständen wieder kompensiert werden. Die Vorteile des Web und der nativen Anwendung werden “fusioniert” (wenn die GAFAS ‘mitspielen’ und/oder der Regulator vorgibt, wie gespielt wird).

Studien über progressive Web Apps stützen meine/diese Hypothese. Wenn das Web wieder näher zum Kunden rückt, dann steigt auch die Nutzung und Conversion Rate, so die Hypothese einiger Experten.

Auch wenn die Entwicklung von Progessiven Webapps (langsame) Fortschritte macht (wie auch in meinen letzten Posts dokumentiert), wichtige Fragen bleiben offen; unter anderem:

Wie bringe ich den Kunden/Nutzer dazu, meine Webseite als Web App zu installieren?

Dafür habe ich heute eine interessante, kleine Komponente mitgebracht – Die PWA Install Komponente des durchaus interessanten Microsoft PWA Builder Programms.

Wie man dem Screenshot zu Beginn des Posts entnehmen kann, können mit dieser Komponente und wenig Code informative und attraktive Installationsbuttons- und Hinweise in Web Anwendungen eingebunden und angezeigt werden.

Die PWA Install Komponente als Web Component eingebunden in die PVA App:

<pwa-install
        installbuttontext="Installation"
        explainer="Die PVA Demo App vereinigt und testet neue PVA Features."
        iosinstallinfotext="Öffnen Sie PVA im Safari Browser. Clicken Sie den 'Share Button'. Mit '+ Zum Homebildschirm hinzufügen' installieren Sie die PVA."
        descriptionheader="Die PVA Demo App vereinigt und testet neue PVA Features. Diese arbeitet im Offline Modus. Bietet Installationsroutinen/hinweise an und optimiert das native Aussehen und 'Feeling'. Zur PVA App existiert auch ein gleichnamige Github Projekt."
      ></pwa-install>

Apple wird sich nicht ewig dem Druck der PWAs widersetzen

Die PWA Komponente unterstützt dabei die meisten gängigen Browser und funktioniert auch unter oder mit iOS, wie der nachfolgende Screenshot dokumentiert.

Sicherlich ist das Installationserlebnis noch nicht vergleichbar mit Android, OSX oder Windows, aber der Nutzer wird auch hier einen Schritt näher zur Installation heran geführt.

Ist die Anwendung erstmal auf den Homeschirm des iPhones installiert, unterscheidet sich das Erlebnis kaum von Android oder anderen Betriebssystemen.

Wie immer findet ihr den Beispielcode im entsprechenden Github Projekt bzw. ist die PVA App auch online aufrufbar.

Links

PVA App – https://pva.mobinauten.de/

PVA Github Projekt – https://github.com/mobinauten/pva (gerne mitmachen!)

“We always overestimate the change that will occur in the short term and underestimate the change that will occur in the long term.” (Bill Gates)

Wie das Web verschwindet!

Wie das Web – wie wir es kennen – verschwindet

Mit meinem ersten Blog Post habe ich über die grundsätzlichen Möglichkeiten von PWAs berichtet. Der zweite Eintrag beschreibt dann einige, konkrete optische Möglichkeiten unter iOS. Gerade Apple wird ja “vorgeworfen”, PWAs nicht ausreichend zu unterstützen. Individueller Code hilft hier aber oft.

In diesem Kontext gehe ich heute auf PWAs auf dem Desktop ein, am Bespiel einer PWA unter OSX. Hier verhält sich Apple, anders als unter iOS, weitestgehend standard-konform (solange nicht Safari genutzt wird).

Installieren, starten, suchen und finden

Mit Hilfe des Chrome Browser, welchen vermeintlich auch jeder Apple Nutzer installiert hat, lassen sich auch PWAs, wie native Anwendungen, installieren, starten, suchen und finden.

Siehe auch dieser Screenshot meiner PWA PVA App auf meinem Macbook.

Dazu reicht es, die notwendige Manifest-Datei entsprechend zu erstellen und pflegen. Die Manifest-Datei der PVA App sieht z.B. wie folgt aus:

{
  "short_name": "PVA App",
  "name": "Progressive Versicherung App",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Mehr zu PWA Manifest Dateien findet man auch hier.

Die Standard-Installation – klein und versteckt

Mit einer validen Manifest Datei (was über die Chrome Developer Tools auch verifiziert werden kann) und einem HTTPS-Aufruf in Chrome erscheint dann auch der entsprechende Installations-Marker in der Browser Zeile.

Wenn meine PVA App aufgerufen wird, sieht das z.B. wie folgt aus:

Die PVA App im Chrome Browser erkennt eine PWA und bietet die Installation an.

Wird das entsprechende “Plus-Icon” vom Anwender geklickt, öffnet sich der Installationsdialog – wie auf nachfolgendem Bild markiert.

Nach der Auswahl der Installation, ist die PVA als native App (PWA) installiert und kann, wie alle anderen nativen OSX Apps, gesucht, gefunden, aufgerufen und entsprechend verwaltet werden.

Die Installations-Hinweise im Chrome Browser sind für Nicht-Kenner/-Wissende nicht wirklich auffällig und gleichzeitig aussagekräftig, so dass der Nicht-Experte wahrscheinlich selten auf die Idee kommen wird, eine PWA über diesen Weg zu installieren.

Die individuelle Installationshilfe – jetzt aber mal richtig und deutlich

Dafür aber existiert eine Abhilfe. Mit ein wenig Code (siehe unten beigefügt) lässt sich ein eigener Button, ein Link oder Ähnliches erstellen und beliebig platzieren . Dieser kann dann Nutzer, prominent oder weniger prominent, auf eine Installation hinweisen.

Das könnte dann wie hier in diesem Screenshot aussehen, aber auch beliebig anders. HTML und CSS sind hier kaum Grenzen gesetzt.

PVA mit eigenem Installationsbutton

Ein Klick auf diesen Installationsbutton aktiviert dann die Standard-Installation (analog zu dem “Browserleisten-Plus-Icon”).

// Install Button für non-IOS und Mobile 
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });

Dieser hier gezeigte Javascript Code aktiviert den oben markierten Button auf den Plattformen, auf welchen dieser Weg möglich ist (OSX, Windows und auch Android – somit eigentlich alle wichtigen Desktop-Systeme).

Der Installations-Button wird auch nur angezeigt, wenn die PVA noch nicht auf der Plattform installiert ist. Auch hier kann man dann mit entsprechenden Mechanismen, ähnlich wie bei dem iOS Installationshinweis aus meinen zweiten Blog Post “spielen”, um User nicht zu häufig zu penetrieren.

Selbstverständlich kann die App dann auch wie eine App im Dock abgelegt werden.

PVA als Icon im Dock

Mit guten Beispiel voran

Obwohl der Weg zu einer PWA für den Nicht-Experten ohne konkrete Installationsunterstützung doch noch etwas versteckt und damit weniger nutzbar erscheint, PWAs als solches auch noch einen experimentellen Status genießen, gibt es schon interessante Beispiele und prominente Anwendungen

Zwei davon sind Twitter und Google Maps. Beide hätte ich als native App wahrscheinlich nie installiert bzw. habe diese immer über einen Browser-Link aufgerufen. Mit dem PWA Ansatz wird die Nutzung von Web-Anwendungen m.E. noch einfacher und unsichtbarer. Ich nutze Twitter und Maps nun nur noch als PWA.

Auf Wikipedia gibt es Hinweise einer 70% besseren Conversion-Rate für PWAs.

Google Maps als PVA
Twitter als PVA

Heute haben wir grundsätzlich nur auf OSX und Apple geschaut, aber ein kurzer Querscheck mit Windows macht deutlich, dass sich PWAs auf Windows unter Chrome und auch EDGE sehr ähnlich, wenn nicht sogar identisch verhalten. Und ohne dass plattform-spezifischer Code verwendet wurde. Das macht Hoffnung.

Windows werden ich mir auch noch separat anschauen.

Der Code ist wie immer in Github zu finden. Die aktuelle PVA Anwendung via Link aufrufbar.

Links

PVA App – https://pva.mobinauten.de/

PVA Github Projekt – https://github.com/mobinauten/pva (gerne mitmachen!)

“We always overestimate the change that will occur in the short term and underestimate the change that will occur in the long term.” (Bill Gates)

Die Schönheit des neuen Mobilen Web

Mit meinen ersten Blogbeitrag zu dem Thema PWA in der Versicherungswelt und dem Start eines entsprechenden Github Projektes (“PVA”) habe ich meine “persönliche Journey” in die neue Welt des “Offline Web”, der PWAs gestartet.

Heute bin dabei ich über zwei Features gestolpert, die PWAs, “meine PVA” m.E. auf einem iPhone ‘richtig gut’ aussehen lassen:

Splashcreens für deine wahre Identität im Web

Splashscreen der PVA App beim Laden

Rechts seht ihr den Splashscreen der upgedateten PVA. Normalerweise zeigen PVAs, anders als auf Android, keinen Splashscreen (gesteuert über die Manifest Datei) an.

Wenn eine PWA im installierten Mode länger laden muss (was sicherlich häufiger vorkommt), entweder aus dem lokalen Cache/Datenbanken oder über das Web, dann zeigt das iPhone einfach nur einen “nackten Bildschirm” in der definierten Hintergrundfarbe an.
Ein unschönes Erlebnis, welches aber mit ein paar Handgriffen “gefixed” werden kann.

Im Header der Startseite, üblichweise in einer index. html, müssen für die verschiedenen Formate des iPhones entsprechende Splashscreens als Image hinterlegt werden.

Nachfolgender Code aktiviert die Spashscreens für iOS, welchen ihr gerne per Copy& Paste kopieren könnt. Da es natürlich ein “Hassle” ist, die vielen entsprechenden Images zu manuell zu erzeugen, gibt es auch hier Abhilfe.

  <link href="%PUBLIC_URL%/splashscreens/iphone5_splash.png"
    media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphone6_splash.png"
    media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphoneplus_splash.png"
    media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphonex_splash.png"
    media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphonexr_splash.png"
    media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphonexsmax_splash.png"
    media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipad_splash.png"
    media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipadpro1_splash.png"
    media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipadpro3_splash.png"
    media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipadpro2_splash.png"
    media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />

Auf dieser Webseite könnt Ihr Euch sowohl die passenden Splashscreen-Größen generieren, wie auch das passende HTML für das Head Tag. (https://appsco.pe/developer/splash-screens). Tolles Angebot, funktioniert prima.

Statusbars für die vollendete Schönheit

Ein weiteres, schönes, etwas kompliziertes, weil unter iOS noch nicht vollständig umgesetztes Feature ist der “echte Fullscreen”.

Auch die erste Version der PVA App verfügte auch schon unter iOS über einen Fullscreen.

Neue Version mit Status Bar in App Farbe
Alte Version PVA mit Standard Status Bar

Leider war die Status Bar dabei nicht in der Farbe der App, sondern nur Standard Schwarz (siehe rechter Screen).

Man kann nicht alle Farben für eine Toolbar setzen, aber mit diesem Code Snippet übernimmt (content="black-translucent“) die Status Bar auch die Farbe der App bzw. des im Manifestes gesetzten Hintergrundes (linker Screen).

Und schon ist die PWA wieder ein “weiteres Stückchen an eine “echte native App heran gerückt.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Der Code ist im Github Projekt eingescheckt bzw. die PVA App auch upgedatet.

Denkt bitte daran, den Safari Cache zu löschen, bevor ihr die neuen Features ausprobiert.

Links

PVA App – https://pva.mobinauten.de/

PVA Github Projekt – https://github.com/mobinauten/pva (gerne mitmachen!)

“We always overestimate the change that will occur in the short term and underestimate the change that will occur in the long term.” (Bill Gates)

Die App ist tot! Es lebe die PVA – Die Progressive Versicherung App

Wie Versicherungen das “verlorene App Jahrzehnt” aufholen können – jetzt!


PVA App als native Anwendung auf einem Macbbook mit Google Chrome und OSX als Trägertechnologien

Versicherungen und ihre digitale Kunden-Anwendungen waren selten, im Gegensatz zu Banking-Apps und Banking-Web-Anwendungen, eine attraktive, eine erste Wahl.

Wenig Funktionalität wurde im Online Bereich angeboten. Ein Grund, warum eine regelmäßige digitale Interaktion wenig interessant erschien, noch heute teilweise ist.

Noch nachteiliger wirkte sich für Versicherungen dann das “Jahrzehnt der App Revolution” aus. Zwar hatten Versicherer inzwischen mit mehr Funktionalität und eigenen Portalen ‘gepunktet’ und damit eine digitale Interaktion mit ihnen attraktiver gemacht. Allerdings reichte dieser Fortschritt nicht aus, um den Verdrängungswettbewerb der Apps auf den mobilen Devices der Kunden zu kompensieren.

Die digitale Kommunikation wurde vom Web auf Apps umgelenkt und nur hoch frequentierte Apps fanden und finden ihren Platz auf dem mobilen Device der Kunden.

Waren die Versicherer schon “spät im Internet und Web unterwegs”, die App und ihr technologischer Vorteil und Komfort verdrängte sie nun fast völlig.

Die Karten werden neu gemischt

Das könnte sich nun ändern.

Mit neuen Web Standards und Technologien und deren Anwendung, nicht nur für Desktop Browser, sondern auch für iOS und Android, lassen sich die Errungenschaften des Web und der Apps kombinieren. Dieser “Mix” kann gerade für seltener frequentierte Anbieter Vorteile bieten – ‘das Web’ nennt diese neue Form der Anwendung und Architektur PWA – Progressive Web App.

Welche Vorteile bieten PWA?

Neben vielen anderen vor allem diese:

  1. Der Kunde kann diese Anwendungen ohne Appstore finden und installieren – ein Browser und ein Link, empfangen via Email, Whatsapp oder SMS ist ausreichend
  2. Der Versicherer kann dem Kunden die Anwendung über diverse Kommunikations-Kanäle einfach zukommen lassen; der Kunde kann diese sowohl im Web, als auch auf dem Handy sofort als Web Anwendung oder dauerhaft mit einem Click als native App installieren und nutzen. Hürden, diese Form von Anwendung zu nutzen, sind vermeintlich gering bis kaum vorhanden
  3. Die App hat eine ähnliche Leistungsfähigkeit wie herkömmliche, native Anwendungen zu deutlich geringeren Entwicklungs- und Bereitstellungskosten mit maximalen Freiheitsgraden (im Gegensatz zu streng kontrollierten App Stores) und einer hohen Plattformunabhängigkeit:
    -> PWAs sind trotz purer und plattform-neutraler Web Technologien “Offline-First Citizen”
    -> PWAs sind, wie native Apps, installierbar und können auf dem Home Bildschirm eines Handys oder eines Desktops hinterlegt werden
    -> PWAs können Push-Nachrichten erhalten, verfügen über Datenbanken und vieles, was wir sonst nur aus der nativen Welt kennen

“Machen ist wie wollen, nur krasser!”

Um die Stärke einer PWA zu verifizieren und zu demonstrieren habe ich ein übersichtliches Github Projekt ins Leben gerufen, welches ich nach und nach erweitern und ergänzen möchte.

Die aktuelle Version der PVA App, die auch über diesen Link aufgerufen bzw. auch über Github “gebaut”, geändert und installiert werden kann, proto-typisiert erste, wesentliche Features.

Diese sind anbei per Screenshot dokumentiert, aber auch direkt über Code und Link verfügbar.

Beim Laden installieren – Yes, please!

Beim Laden der Anwendung über den Browser wird eine native Installation angeboten.

Je nach Device verläuft die Installation unterschiedlich, führt aber im Grunde zu dem gleichen Ergebnis. Die Anwendung ist über den Homebildschirm über ein eigenes Icon verfügbar.

Links ist die Installation über den Safari Browser dargestellt. Der User wird über entsprechende Schritte instruiert, die App zu installieren.

Nach einer Installation erscheint der Hinweis nicht mehr bzw. auch, wenn die der User den Hinweis ignoriert.

Im Chrome Browser auf Android Geräten oder auf anderen Devices ist die Installation weitergehend automatisiert (wird in einem weiteren Beitrag behandelt).

PVA auf dem Home Bildschirm – What else?

Rechts der Screenshot zeigt meinen iPhone Homebildschirm nach der Installation der PVA Anwendung.

Die App ist visuell nicht von anderen, nativen Apps zu unterscheiden.

PVA kann, wie andere native auch, verschoben und gruppiert werden.

Der Aufruf und das Öffnen unterscheidet sich nicht von einer nativen App, vor allem dann, wenn diese grundsätzlich auch für Offline verfügbar ist.

Favicons und App Icons sind so selbstverständlich, wie auch individuelle Splash Screens.

PVA App als Icon auf iPhone Desktop
iPhone mit PVA App standalone

Wie eine App, ist eine App! Offline? Sure!

Linker Screenshot zeigt die PVA Demo App – nach Installation auf dem Device – als eigenständige App geöffnet.

Der Browser und die HTML Technologien sind als solches nicht mehr direkt identifizierbar.

Die App sieht aus (kein Browser-Rahmen, keine Browser Navigation), startet und lässt sich wie eine native App bedienen.

Dabei ist diese auch aufgrund ihrer Offline- und Caching-Fähigkeiten schnell und responsive (siehe auch gelb markierte Offline-Situation meines iPhones).

Links ist die PVA App auf einem iPhone dargestellt, aber ein vergleichbares Verhalten findet man auch auf Desktop Systemen, wie z.b. bei einer Kombination aus Apple OSX und Chrome (oben zu Beginn des Blogpost dargestellt).

PVA App als Github Projekt – der Sandkasten zum “Spielen und Selber-bauen”

“Machen ist wie Wollen, nur krasser” Frei nach diesem Motto habe ich es mir in der Vergangenheit und als “in die Jahre gekommener Entwickler” immer zu eigen gemacht, Neuerungen nicht nur “zu erlesen”, sondern auszuprobieren, zu coden.

Denn nur im Code findet man die Wahrheit!

Auch diesmal werde ich den enstprechenden Code in einen Github Projekt ablegen.

Nicht nur, weil ich glaube, dass dieses “Verifizieren” in Summe länger dauern und auch immer umfangreicher werden könnte. Eventuell wollen andere Zeitgenossen entsprechend partizipieren. “Schwarm-Intelligenz” ist ja bekanntlich die effizienteste. 🙂

Und wo kann man das besser und gemeinsamer, als in und über Github?

Der PVA Sandkasten bei Github

More to come!

Momentan kann die App nur die Hauptnavigation anzeigen. Dafür ist der Code aber übersichtlich und verdeutlich die wesentlichen Features: Installier-barkeit und Offline. Einfach mal ausprobieren.

Aber das ist mit Sicherheit nicht das Ende. Ideen gibt es genug:

-> Wo kann man PWAs einsetzen?

-> Wie, und für welche Prozesse?

-> Offline mit PWAs schreiben, wie, wann, wo?

Links

Die PVA App zum direkten Ausprobieren – https://pva.mobinauten.de/

Das PVA Github Projekt – https://github.com/mobinauten/pva