So optimieren Sie Progressive Web Apps: Über die Grundlagen hinausgehen

Progressive Webanwendungen (PWA) erfreuen sich auch im Jahr 2020 immer größerer Beliebtheit. Angesichts der Vorteile höherer Konversionsraten, Kundenbindung, verringerter Seitenladegeschwindigkeit und niedrigerer Entwicklungs- und Gemeinkosten ist dies keine Überraschung.

Auch angesehene Unternehmen wie Twitter, Uber, Tinder, Pinterest und Forbes sind mit ihren PWAs erfolgreich. Und sie alle rühmen sich massiver Vorteile durch die Implementierung der progressiven Apps.

Die gute Nachricht ist, dass sich die Entwicklung einer PWA nicht nur Unternehmen mit großen Budgets leisten können. Diese Anwendungen dienen kleinen und durchschnittlichen Unternehmen gleichermaßen und sind nicht so kompliziert zu erstellen.

Im Smashing Magazine finden Sie einen umfassenden Beginner's Guide To Progressive Web Apps, der sich auf den Aufbau des Kerns von PWAs konzentriert.

Lassen Sie uns jedoch noch einen Schritt weiter gehen und erfahren, wie Sie PWAs moderne Qualitäten wie Offline-Funktionalität, netzwerkbasierte Optimierung, geräteübergreifende Benutzererfahrung, SEO-Funktionen und nicht aufdringliche Benachrichtigungen und Anfragen bereitstellen können. Sie finden auch Beispielcode oder Verweise auf spezifischere Leitfäden, damit Sie diese Tipps in Ihrer PWA implementieren können.

Ein kurzer Überblick über progressive Webanwendungen (PWA)

Lassen Sie uns die Grundlagen nicht überspringen und schnell das Herz von PWAs durchgehen.

Was ist eine PWA?

„Progressive Web Apps (PWA) werden mit modernen APIs entwickelt und erweitert, um erweiterte Funktionen, Zuverlässigkeit und Installierbarkeit bereitzustellen und gleichzeitig jeden, überall und auf jedem Gerät mit einer einzigen Codebasis zu erreichen.“

— Entwickler von Google

Mit anderen Worten, PWAs sind Websites, die Benutzer als eigenständige Anwendungen verwenden können. Sie unterscheiden sich von nativen Apps hauptsächlich dadurch, dass PWAs keine Installation erfordern und mit verschiedenen Geräten verwendet werden können – native Apps werden hauptsächlich für mobile Geräte entwickelt.

Wie funktionieren PWAs?

Der Kern einer PWA besteht aus drei Komponenten: einem Web-App-Manifest, Service-Workern und einer Anwendungs-Shell. Eine detaillierte Bauanleitung finden Sie in der oben erwähnten Einsteigeranleitung.

Hier ist, was diese Komponenten tun.

Web-App-Manifest

Das Web-App-Manifest ist der Kern, um eine Website als eigenständige Anwendung im Vollbildmodus auszuführen. Sie können das Aussehen der PWA definieren, für verschiedene Geräte optimieren und ein Symbol zuweisen, das nach der Installation der Anwendung angezeigt wird.

Servicemitarbeiter

Die Servicemitarbeiter ermöglichen die Offline-Nutzung der PWA, indem sie zwischengespeicherte Daten abrufen oder den Benutzer über das Fehlen einer Internetverbindung informieren. Die Servicemitarbeiter rufen auch die neuesten Daten ab, sobald die Serververbindung wiederhergestellt ist.

Anwendungs-Shell-Architektur

Die Anwendungsshell ist das, was die Benutzer sehen, wenn sie auf eine PWA zugreifen. Es ist das Minimum an HTML, CSS und JavaScript, das erforderlich ist, um die Benutzeroberfläche zu betreiben. Beim Entwickeln einer PWA können Sie die Ressourcen und Assets der Anwendungsshell im Browser zwischenspeichern.

Bereitstellen moderner Merkmale für Ihre PWA

Zusätzlich zu den Kernfunktionen umfassen moderne PWAs zusätzliche Merkmale, die ihre Benutzer weiter zu einem außergewöhnlicheren Benutzererlebnis führen.

Sehen wir uns einige spezifische moderne Merkmale einer PWA an und erfahren Sie, wie Sie diese zu Ihrer PWA hinzufügen. Die folgenden Eigenschaften werden von Google-Entwicklern als großartige Ergänzungen zur grundlegenden PWA angesehen.

Die Anwendung funktioniert offline genauso wie online

Beim Erstellen Ihrer PWA können Sie auch eine benutzerdefinierte Offline-Seite als Teil des Kerns entwickeln. Viel benutzerfreundlicher ist es jedoch, wenn Ihre PWA auch ohne Internetverbindung weiter funktioniert – bis zu einem gewissen Punkt, an dem die Verbindung notwendig wird. Andernfalls könnte die Benutzererfahrung so frustrierend sein wie Ankita Masands Tortur mit der Bestellung eines Kuchens, wie sie in ihrem Artikel über die Schmerzpunkte von PWAs beschreibt.

Sie können eine signifikantere Benutzererfahrung erzielen, indem Sie zwischengespeicherte Inhalte, Hintergrundsynchronisierung und Skelettbildschirme verwenden. Schauen wir uns jeden an.

Zwischengespeicherter Inhalt mit IndexedDB

IndexedDB ist ein NoSQL-Speichersystem im Browser, mit dem Sie die erforderlichen Daten zwischenspeichern und abrufen können, damit Ihre PWA offline funktioniert.

Allerdings unterstützen nicht alle Browser IndexedDB , also sollten Sie als erstes prüfen, ob der Browser des Benutzers dies unterstützt.

 if (!('indexedDB' in window)) { console.log('This browser doesn\'t support IndexedDB'); return; }

Danach können Sie mit der IndexedDB-API zwischengespeicherte Inhalte erstellen. Hier ist ein Beispiel von Google-Entwicklern für das Öffnen einer Datenbank, das Hinzufügen eines Objektspeichers und das Hinzufügen eines Elements zu diesem Speicher.

 var db; var openRequest = indexedDB.open('test_db', 1); openRequest.onupgradeneeded = function(e) { var db = e.target.result; console.log('running onupgradeneeded'); if (!db.objectStoreNames.contains('store')) { var storeOS = db.createObjectStore('store', {keyPath: 'name'}); } }; openRequest.onsuccess = function(e) { console.log('running onsuccess'); db = e.target.result; addItem(); }; openRequest.onerror = function(e) { console.log('onerror!'); console.dir(e); }; function addItem() { var transaction = db.transaction(['store'], 'readwrite'); var store = transaction.objectStore('store'); var item = { name: 'banana', price: '$2.99', description: 'It is a purple banana!', created: new Date().getTime() }; var request = store.add(item); request.onerror = function(e) { console.log('Error', e.target.error.name); }; request.onsuccess = function(e) { console.log('Woot! Did it'); }; }

Synchronisierung im Hintergrund

Wenn Ihre PWA Daten im Hintergrund synchronisiert, kann der Benutzer offline Aktionen ausführen, die dann ausgeführt werden, wenn die Internetverbindung wiederhergestellt ist. Ein einfaches Beispiel ist eine Messaging-App. Ein Benutzer kann eine Nachricht senden, wenn er offline ist, ohne warten zu müssen, bis sie gesendet wird – die Hintergrundsynchronisierung sendet die Nachricht automatisch, wenn die Verbindung wiederhergestellt ist.

Hier ist ein Beispiel für die Entwicklung einer Hintergrundsynchronisierungsfunktion von Jake Archibald.

 // Register your service worker: navigator.serviceWorker.register('/sw.js'); // Then later, request a one-off sync: navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); });

Hören Sie dann auf das Ereignis in /sw.js :

 self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } });

Skelett-Bildschirme

Einer der Hauptvorteile der Verwendung von Skeleton-Bildschirmen besteht darin, dass die Benutzer das Gefühl haben, dass die Anwendung funktioniert, anstatt untätig zu sein. Während der Benutzer keine Verbindung hat, zeichnet der Skelettbildschirm die Benutzeroberfläche ohne Inhalt – der sich dann füllt, sobald die Verbindung wiederhergestellt ist.

Code My UI verfügt über einige hervorragende Code-Snippets, die Sie verwenden können, um einen Skelettbildschirm für Ihre PWA zu erstellen.

Optimierung basierend auf der Netzwerknutzung

Ein zentraler Vorteil einer PWA besteht darin, dass sie den Benutzern ein schnelleres Erlebnis bietet. Sie können die Ladegeschwindigkeit weiter optimieren, indem Sie die PWA Cache-First-Netzwerke verwenden, Ressourcen priorisieren und adaptives Laden basierend auf der Netzwerkqualität verwenden.

Schauen wir uns an, wie Sie diese zu Ihrer PWA entwickeln können.

Erst cachen, dann Netzwerk

Die Verwendung des zwischengespeicherten Inhalts ermöglicht es Ihrer PWA, offline zu funktionieren, und ebnet den Weg für Benutzer, auch in Gebieten mit geringer Netzabdeckung auf die Inhalte zuzugreifen. Sie können dies tun, indem Sie einen Dienstmitarbeiter erstellen, der den Inhalt zwischenspeichert und ihn dann abruft.

Hier ist ein Beispiel von Jeff Posnick zum Zwischenspeichern von statischem HTML mithilfe von Servicemitarbeitern.

 self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { // See /web/fundamentals/getting-started/primers/async-functions // for an async/await primer. event.respondWith(async function() { // Optional: Normalize the incoming URL by removing query parameters. // Instead of https://example.com/page?key=value, // use https://example.com/page when reading and writing to the cache. // For static HTML documents, it's unlikely your query parameters will // affect the HTML returned. But if you do use query parameters that // uniquely determine your HTML, modify this code to retain them. const normalizedUrl = new URL(event.request.url); normalizedUrl.search = ''; // Create promises for both the network response, // and a copy of the response that can be used in the cache. const fetchResponseP = fetch(normalizedUrl); const fetchResponseCloneP = fetchResponseP.then(r => r.clone()); // event.waitUntil() ensures that the service worker is kept alive // long enough to complete the cache update. event.waitUntil(async function() { const cache = await caches.open('my-cache-name'); await cache.put(normalizedUrl, await fetchResponseCloneP); }()); // Prefer the cached response, falling back to the fetch response. return (await caches.match(normalizedUrl)) || fetchResponseP; }()); } });

Priorisierung von Ressourcen

Standardmäßig haben PWAs aufgrund ihrer Lite-Natur eine höhere Leistung als ähnliche native Apps. Da PWAs den Cache des Browsers verwenden, ist es außerdem möglich, anzugeben, welche Ressourcen Priorität haben und gerendert werden müssen, noch bevor sie verwendet werden. Dies funktioniert hauptsächlich mit statischen Elementen, da dynamische Inhalte aktualisiert werden müssen, bevor sie abgerufen werden.

Sie können die Priorität von Elementen angeben, indem Sie die Zeichenfolge <link> im HTML-Code verwenden. Sie können auch Serverdateien von Drittanbietern angeben, indem Sie rel=”preconnect” und rel=”dns-prefetch.”

Maximiliano Firtman gibt ein einfaches Beispiel dafür, indem er Webfonts in der Engine des Browsers priorisiert:

 <link rel=”preload” as=”font” href=”font.woff” crossorigin>

Adaptives Laden implementieren

Die Internetgeschwindigkeiten von WiFi und 4G sind nicht überall verfügbar, und Benutzer kommen immer noch mit 2G- und 3G-Verbindungen ins Internet. Da Sie möchten, dass Ihre PWA für so viele Personen wie möglich zugänglich ist, sollten Sie sie möglicherweise so optimieren, dass sie auch bei niedrigeren Internetgeschwindigkeiten funktioniert.

Sie können dies erreichen, indem Sie adaptives Laden implementieren, das die PWAs-Elemente basierend auf dem Verbindungstyp des Benutzers lädt.

Der einfachste Weg ist die Verwendung von Googles Workbox-Tool, das zahlreiche vorgefertigte Plugins für Caching-Strategien enthält.

Angenommen, Sie möchten eine benutzerdefinierte Caching-Strategie definieren. So können Sie es am Beispiel von Demian Renzulli und Jeff Posnick machen:

 const adaptiveLoadingPlugin = { requestWillFetch: async ({request}) => { const urlParts = request.url.split('/'); let imageQuality; switch ( navigator && navigator.connection ? navigator.connection.effectiveType : '' ) { //... case '3g': imageQuality = 'q_30'; break; //... } const newUrl = urlParts .splice(urlParts.length - 1, 0, imageQuality) .join('/') .replace('.jpg', '.png'); const newRequest = new Request(newUrl.href, {headers: request.headers}); return newRequest; }, };

Als nächstes übergeben Sie das Plugin an eine cacheFirst Strategie, die einen regulären Ausdruck enthält, um Bild-URLs abzugleichen (z. B. /img/ ):

 workbox.routing.registerRoute( new RegExp('/img/'), workbox.strategies.cacheFirst({ cacheName: 'images', plugins: [ adaptiveLoadingPlugin, workbox.expiration.Plugin({ maxEntries: 50, purgeOnQuotaError: true, }), ], }), );

Hervorragende Benutzererfahrung auf allen Plattformen

Eine hervorragende PWA funktioniert nahtlos auf Browsern, Mobilgeräten und Tablets. Während die Verwendung eines Android-Geräts die beliebteste Art (mit einem Marktanteil von 38,9 %) ist, auf das Internet zuzugreifen, ist die Optimierung Ihrer Anwendung für alle Plattformen Teil der Entwicklung der Kernfunktionen von PWAs.

Sie können weitere Schritte unternehmen, um die Benutzerfreundlichkeit zu erhöhen und ein großartiges Benutzererlebnis zu bieten, z. B. indem Sie die Sprunghaftigkeit beim Laden Ihrer PWA reduzieren und sicherstellen, dass Ihre PWA mit jeder Eingabemethode funktioniert.

So können Sie jeden dieser Aspekte angehen.

Reduzieren des „sprunghaften“ Ladens von Inhalten

Selbst bei Hochgeschwindigkeitsinternet kann sich der Inhalt der Site während des Ladens verschieben, da die Elemente der Site der Reihe nach geladen werden. Dieser Effekt ist bei langsameren Verbindungsgeschwindigkeiten noch schlimmer und beeinträchtigt die Erfahrung des Benutzers erheblich.

Die häufigsten Elemente, die dazu führen, dass sich der Inhalt beim Laden verschiebt, sind Bilder, da diese im Allgemeinen größer sind und beim Laden von Inhalten keine Priorität haben. Sie können dieses Problem mit „Lazy Loading“ angehen, indem Sie kleinere Platzhalterbilder verwenden, die Sie priorisieren können, nachdem die HTML-Struktur gerendert wurde.

Hier ist ein Beispiel von Mozillas Entwicklern, wie Sie ein leichtgewichtiges Bild hinzufügen können, das zuerst vor dem eigentlichen Bild in JavaScript geladen wird:

 <img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>

Die Datei app.js verarbeitet die data-src-Attribute wie folgt:

 let imagesToLoad = document.querySelectorAll('img[data-src]'); const loadImages = (image) => { image.setAttribute('src', image.getAttribute('data-src')); image.onload = () => { image.removeAttribute('data-src'); }; };

Und dann eine Schleife erstellen:

 imagesToLoad.forEach((img) => { loadImages(img); });

Sie können auch einen ausführlichen Leitfaden im Smashing Magazine lesen, um das Springen von Inhalten mit anderen Elementen zu reduzieren.

PWA funktioniert mit jeder Eingabemethode

Wir haben behandelt, wie PWAs mit einer Vielzahl verschiedener Geräte funktionieren sollten. Um noch einen Schritt weiter zu gehen, müssen Sie auch andere Eingabemethoden berücksichtigen, die die Benutzer auf diesen Geräten verwenden können, wie z. B. Berührung, Maus und Stift.

Das Hinzufügen der Pointer Events API zu Ihrer PWA löst hauptsächlich diese Frage. So können Sie laut den Entwicklern von Google vorgehen.

Überprüfen Sie zunächst, ob der Browser die Zeigerereignisse unterstützt:

 if (window.PointerEvent) { // Yay, we can use pointer events! } else { // Back to mouse and touch events, I guess. }

Als Nächstes können Sie die Aktionen definieren, die verschiedene Eingabemethoden ausführen können:

 switch(ev.pointerType) { case 'mouse': // Do nothing. break; case 'touch': // Allow drag gesture. break; case 'pen': // Also allow drag gesture. break; default: // Getting an empty string means the browser doesn't know // what device type it is. Let's assume mouse and do nothing. break; }

Da die meisten Browser bereits berührungsfähige Funktionen haben, müssen Sie nichts weiter hinzufügen.

Auffindbar durch Suche

Einer der Hauptvorteile von PWAs gegenüber einer nativen Anwendung besteht darin, dass die PWA von Natur aus eine Website ist und Suchmaschinen sie indizieren können. Auf diese Weise können Sie SEO-Strategien einsetzen, um Ihre PWA-Inhalte besser auffindbar zu machen.

Sie können damit beginnen, sicherzustellen, dass jede URL in Ihrer PWA einen eindeutigen, aussagekräftigen Titel und eine Meta-Beschreibung hat, die die Grundlage jeder SEO-Optimierungsaktivität bilden.

Sehen wir uns einige andere Schritte an, die Sie unternehmen können, um Ihre PWA durchsuchbar zu machen.

Analysieren Sie die Auffindbarkeit Ihrer PWA

Google hat in seiner Search Console ein hervorragendes Tool, das Ihre Website (PWA) analysiert und die Ergebnisse meldet. Sie können es verwenden, um einen grundlegenden Scan Ihrer Website durchzuführen und Schwachstellen aufzudecken, die Sie dann beheben können.

Alternativ können Sie Lighthouse im Chrome-Browser verwenden, um ein SEO-Audit durchzuführen.

Navigieren Sie zunächst zur Ziel-URL. Drücken Sie dann Control+Shift+J (oder Command+Option+J auf dem Mac), um das Tools-Menü des Entwicklers zu öffnen. Wählen Sie die Registerkarte „Leuchtturm“, aktivieren Sie das Kontrollkästchen „SEO-Kategorie“ und erstellen Sie den Bericht.

Verwenden Sie strukturierte Daten

Die Suchmaschine von Google verwendet strukturierte Daten, um den Zweck des Inhalts auf Ihrer Webseite zu verstehen.

Strukturierte Daten sind ein standardisiertes Format, um Informationen über eine Seite bereitzustellen und den Seiteninhalt zu klassifizieren; zum Beispiel auf einer Rezeptseite, was sind die Zutaten, die Garzeit und -temperatur, die Kalorien und so weiter.
- Google

Bevor Sie mit dem Codieren beginnen, hat Google außerdem eine nützliche Liste mit häufigen Fehlern bei strukturierten Daten und relevanten Richtlinien zu deren Behebung zusammengestellt. Das Studium dieses Materials sollte Ihnen eine gute Grundlage dafür geben, was Sie vermeiden sollten.

Frederick O'Brien hat einen ausgezeichneten Leitfaden für das Smashing Magazine, Baking Structured Data Into The Design Process , geschrieben, der beschreibt, wie man von Anfang an strukturierte Daten erstellt.

Benutzerfreundliche Benachrichtigungen und Berechtigungsanfragen

Zu guter Letzt können Sie die Benutzererfahrung verbessern, indem Sie die Benachrichtigungen und Berechtigungsanfragen optimieren, damit sie Ihren Benutzern dienen – anstatt nur verwirrend und nervig zu sein.

Während Sie sich im Allgemeinen auf Ihren gesunden Menschenverstand verlassen können, gibt es praktische Tipps, die Sie ebenfalls umsetzen können, wie z.

Subtile Erlaubnisanfragen für die Kommunikation

Es gibt zwei moderne Möglichkeiten, die Kommunikation zwischen einer Website und einem Benutzer zu automatisieren – Chatbots und Benachrichtigungen.

In einem PWA-Kontext besteht der Hauptvorteil eines Chatbots darin, dass er nicht die Erlaubnis des Benutzers benötigt, um mit dem Benutzer zu interagieren. Je nachdem, welche Chatbot-Anwendung Sie verwenden, kann der Benutzer jedoch die subtile Nachricht übersehen. Benachrichtigungen hingegen erfordern die Erlaubnis des Benutzers, sind aber viel sichtbarer.

Da Sie einen Chatbot als separate Drittanbieteranwendung hinzufügen können, konzentrieren wir uns auf die Erstellung einer benutzerfreundlichen Push-Benachrichtigung. Falls Sie überhaupt eine Anleitung zum Erstellen einer Push-Benachrichtigung benötigen, finden Sie hier eine großartige Anleitung von Indrek Lasn.

Der einfachste Weg, eine nicht-intrusive Berechtigungsanfrage zu erstellen, ist die Verwendung einer doppelten Anfrage. Das bedeutet, dass Sie zusätzlich zu der Standardinteraktion aus dem Betriebssystem des Benutzers eine benutzerdefinierte Interaktion in Ihre Site aufnehmen.

Matt Gaunt bietet mit den folgenden Bildern perfekte Illustrationen für diesen Effekt.

Hier ist die standardmäßige Berechtigungsanforderung für Benachrichtigungen, die keinen Kontext bereitstellt:

Und hier ist die benutzerdefinierte Interaktion, die vor der oben beschriebenen standardmäßigen Benachrichtigungsberechtigung hinzugefügt wurde:

Indem Sie eine benutzerdefinierte Warnung vor der Standardwarnung des Betriebssystems hinzufügen, können Sie den Zweck der Benachrichtigung für den Benutzer klarer beschreiben. Dies erhöht die Wahrscheinlichkeit, dass sich der Benutzer für die Benachrichtigungen Ihrer Website entscheidet.

Ermöglichen Sie dem Benutzer, sich von Benachrichtigungen abzumelden

Für einen Benutzer ist das Deaktivieren der Push-Benachrichtigungen einer Website ziemlich ärgerlich, unabhängig davon, welches Gerät er verwendet. Daher trägt es wesentlich zur Benutzererfahrung bei, dem Benutzer die Möglichkeit zu geben, sich von den Nachrichten abzumelden.

Hier ist ein Beispiel von Matt Gaunt, wie Sie eine Abmeldefunktion in Ihren Code und Ihre Benutzeroberfläche implementieren:

Definieren Sie zunächst den Click-Listener des pushButton :

 pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { unsubscribeUser(); } else { subscribeUser(); } });

Fügen Sie dann eine neue Funktion hinzu:

 function unsubscribeUser() { swRegistration.pushManager.getSubscription() .then(function(subscription) { if (subscription) { // TODO: Tell application server to delete subscription return subscription.unsubscribe(); } }) .catch(function(error) { console.log('Error unsubscribing', error); }) .then(function() { updateSubscriptionOnServer(null); console.log('User is unsubscribed.'); isSubscribed = false; updateBtn(); }); }

So sieht es in der Konsole aus, nachdem die Schaltfläche zum Abonnieren erfolgreich implementiert wurde, um die Benachrichtigungen zu deaktivieren, wenn der Benutzer dies wünscht.

Fazit

PWAs können sehr effektiv sein, um den Traffic Ihrer Website zu steigern und die Benutzererfahrung zu erweitern. Um Ihre PWA weiter zu optimieren, können Sie diese in diesem Artikel beschriebenen modernen Lösungen verwenden, um die Leistung und Funktionalität zu verbessern.

Sie müssen auch nicht alles auf einmal umsetzen. Fühlen Sie sich frei, die relevantesten Optionen auszuwählen, da jeder dieser Vorschläge Ihnen hilft, Ihre PWA zu verbessern.

Weitere Ressourcen

• Progressive Web Apps-Schulung von Google
• Progressive Web Apps von web.dev
• Progressive Web Apps (PWAs) von Mozilla