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:
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.
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.
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.
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)