Was sind PWAs?<\/h2>\n
Progressive Web Apps sind eine Technologie, die die M\u00f6glichkeiten einer traditionellen, responsiven Website mit denen einer funktionsreichen mobilen Anwendung kombiniert.<\/p>\n
Laut Mozilla<\/a> nutzen PWAs moderne Webfunktionen, um eine anwendungs\u00e4hnliche Weboberfl\u00e4che bereitzustellen, auf die mit einem Webbrowser zugegriffen werden kann.<\/p>\n Die drei wichtigsten technischen Komponenten hinter PWAs sind:<\/p>\n Die Kombination aller drei Technologien sorgt f\u00fcr ein schnelles, installationsfreies Erlebnis, bei dem die PWA vollst\u00e4ndig in die Homepage integriert ist.<\/p>\n Du kannst sehen, wie gut die Website und die Anwendung von Cafe Javas<\/a> zusammenpassen.<\/p>\n Die von TechAhead<\/a> entwickelte PWA bietet ein nahtloses Erlebnis zwischen der Website und der mobilen Anwendungs-Version. So k\u00f6nnen die Kunden ganz einfach von ihrem Webbrowser aus Bestellungen aufgeben, ohne die frustrierende UX einer herk\u00f6mmlichen Website.<\/p>\n Die Umwandlung deiner WordPress-Website in eine Progressive Web App kann deine digitale Pr\u00e4senz und dein Nutzererlebnis deutlich verbessern. Hier erf\u00e4hrst du, warum die Umstellung eine gute Idee ist:<\/p>\n Einer der zahlreichen Vorteile von PWAs ist die M\u00f6glichkeit, Push-Benachrichtigungen zu versenden. So kannst du dein Publikum \u00fcber Neuigkeiten und Ank\u00fcndigungen informieren und daf\u00fcr sorgen, dass die Besucher deiner Website dich nicht vergessen. Diese Eigenschaft ermutigt zu regelm\u00e4\u00dfigen Besuchen und mehr Interaktionen.<\/p>\n PWAs sind auch extrem schnell. Die meisten Assets werden zwischengespeichert und Service Worker helfen dabei, sie schnell zu laden. Selbst wenn deine Website-Besucher\/innen nicht den schnellsten und zuverl\u00e4ssigsten Netzwerkanbieter haben, wird ihre mit WordPress betriebene PWA sofort geladen. Dieser Geschwindigkeitsschub verbessert nicht nur das Nutzererlebnis, sondern wirkt sich auch positiv auf das Suchmaschinenranking aus, da die Geschwindigkeit der Website ein Rankingfaktor f\u00fcr Google ist.<\/p>\n Einer der vielleicht \u00fcberzeugendsten Vorteile von PWAs ist ihre F\u00e4higkeit, offline oder in Netzwerken mit schlechter Qualit\u00e4t zu funktionieren. Dies wird durch Service Worker erreicht, die wichtige Ressourcen zwischenspeichern und es den Nutzern erm\u00f6glichen, auf zuvor besuchte Seiten zuzugreifen, ohne dass eine Internetverbindung besteht.<\/p>\n Sowohl herk\u00f6mmliche Websites als auch mobile Anwendungen haben ihre Grenzen. Websites sind zum Beispiel stark von der Netzqualit\u00e4t abh\u00e4ngig und bieten keine nativen Anwendungs-Funktionen wie Push-Benachrichtigungen oder Offline-Zugriff. Bei mobilen Anwendungen hingegen m\u00fcssen die Nutzer\/innen regelm\u00e4\u00dfig Updates herunterladen und installieren.<\/p>\n PWAs haben diese Nachteile nicht.<\/p>\n Wenn du deine WordPress-Website in eine PWA umwandelst, verbesserst du nicht nur deine Website. Sie ver\u00e4ndert die Art und Weise, wie dein Publikum mit ihr interagiert, durch eine schnellere, ansprechendere Plattform, die auf jedem Ger\u00e4t und in jedem Netzwerk funktioniert und gut aussieht.<\/p>\n Wer eine PWA f\u00fcr WordPress entwickeln will, muss Folgendes wissen:<\/p>\n Wenn du eine schnelle Suche nach den besten PWA-Plugins f\u00fcr WordPress durchf\u00fchrst, wirst du schnell eine Reihe von Tools entdecken, die deine Website mit anwendungs\u00e4hnlichen Funktionen, schnelleren Ladezeiten und anderen beeindruckenden Features erweitern k\u00f6nnen.<\/p>\n F\u00fcr alle, die schnell eine PWA erstellen wollen, haben wir hier einige der besten PWA-Plugins f\u00fcr WordPress zusammengestellt, die deinen Workflow beschleunigen k\u00f6nnen.<\/p>\n Das von SuperPWA entwickelte Super Progressive Web Apps-Plugin<\/a> bietet WordPress-Nutzern eine einfache M\u00f6glichkeit, ihre Websites in Progressive Web Apps (PWAs) zu verwandeln. Diese Verschmelzung der besten Aspekte von Web- und Mobile-App-Technologien erm\u00f6glicht die Offline-Nutzung, nahezu sofortige Ladezeiten und den Zugriff \u00fcber eine Verkn\u00fcpfung auf dem Startbildschirm.<\/p>\n SuperPWA basiert auf einem Freemium-Modell, d.h. ein Grundpaket an Funktionen ist kostenlos verf\u00fcgbar, w\u00e4hrend Extras durch Upgrades erh\u00e4ltlich sind. Das erste Set von SuperPWA-Upgrades beginnt bei 99 $.<\/p>\n Das PWA for WP & AMP<\/a> Plugin bereichert das Nutzererlebnis mit einer App-\u00e4hnlichen Oberfl\u00e4che, voller AMP PWA-Kompatibilit\u00e4t, Multisite-Unterst\u00fctzung, UTM-Tracking und der M\u00f6glichkeit, offline zu arbeiten. Au\u00dferdem bietet es Unterst\u00fctzung f\u00fcr die Entwicklung von Service Workern, App-Bannern, einem Web-App-Manifest und einem benutzerdefinierten Splash-Screen.<\/p>\n Das PWA-Plugin<\/a> konzentriert sich auf die wesentlichen Elemente von PWA, wie Service Worker, Web App Manifest und HTTPS-Unterst\u00fctzung. PWA ist darauf ausgerichtet, die Ladezeiten zu verk\u00fcrzen und ein anwendungs\u00e4hnliches Erlebnis auf dem Handy zu bieten.<\/p>\n Instantify<\/a> zeichnet sich dadurch aus, dass es drei wichtige Funktionen in einer Plattform vereint: Progressive Web Apps (PWA), Googles Accelerated Mobile Pages (AMP) und Facebook Instant Articles (FBIA). Mit dieser Kombination verwandelt das Tool deine Website in eine Anwendung, beschleunigt die Ladezeiten f\u00fcr das mobile Web und \u00f6ffnet den Inhalt deiner Website f\u00fcr soziale Plattformen.<\/p>\n Instantify kostet $29, eine einmalige Geb\u00fchr f\u00fcr eine lebenslange Lizenz. Darin enthalten sind sechs Monate Support, die f\u00fcr zus\u00e4tzliche 21 US-Dollar verl\u00e4ngert werden k\u00f6nnen. Das Produkt wird nicht mit einer kostenlosen Testversion oder einer Geld-zur\u00fcck-Garantie geliefert, daher solltest du dir deine aktuellen Bed\u00fcrfnisse und Kompatibilit\u00e4tsanforderungen genau \u00fcberlegen, bevor du es kaufst.<\/p>\n Die Erstellung einer PWA mit WordPress ist eine spannende M\u00f6glichkeit, das mobile Erlebnis deiner Website zu verbessern und sie schneller, zuverl\u00e4ssiger und ansprechender zu machen. Wie wir bereits besprochen haben, nutzen PWAs moderne Webfunktionen, um Nutzern direkt im Browser ein anwendungs\u00e4hnliches Erlebnis zu bieten.<\/p>\n Hier ist eine kleine Schritt-f\u00fcr-Schritt-Anleitung, wie du deine WordPress-Website mit einem der besprochenen Plugins in eine PWA verwandelst.<\/p>\n Bevor du dich mit den technischen Aspekten besch\u00e4ftigst, solltest du die Funktionen und Ziele deiner PWA planen. \u00dcberlege dir, welche Teile deiner Website vom Offline-Zugriff profitieren k\u00f6nnten, welche Aktionen die Nutzer\/innen ohne Netzwerkverbindung ausf\u00fchren k\u00f6nnen sollten und wie deine PWA auf dem Startbildschirm aussehen soll. Die Planung hilft dir sicherzustellen, dass deine PWA die Nutzererfahrung auf sinnvolle Weise verbessert.<\/p>\n Wie wir bereits besprochen haben, gibt es verschiedene Plugins, mit denen du deine WordPress-Seite in eine PWA verwandeln kannst.<\/p>\n Beurteile jedes davon anhand deiner spezifischen Bed\u00fcrfnisse. Wenn du nach einer einfachen, unkomplizierten L\u00f6sung suchst, bietet Super Progressive Web Apps eine einfache Einrichtung. F\u00fcr diejenigen, die eine Integration mehrerer Tools ben\u00f6tigen, ist Instantify vielleicht die bessere Wahl.<\/p>\n F\u00fcr unser heutiges Beispiel werden wir Super Progressive Web Apps verwenden.<\/p>\n Wenn du dich f\u00fcr ein Plugin entschieden hast, installiere es auf deiner WordPress-Website. Dazu gehst du in dein WordPress-Dashboard, navigierst zu Plugins > Neu hinzuf\u00fcgen<\/strong>, suchst nach dem Namen des Plugins und klickst auf Jetzt installieren<\/strong>. Nach der Installation klickst du auf Aktivieren<\/strong>.<\/p>\n Nach der Aktivierung findest du die Einstellungen des Plugins unter dem Men\u00fcpunkt Einstellungen<\/strong> in deinem WordPress-Dashboard.<\/p>\n Hier kannst du verschiedene Aspekte deiner PWA konfigurieren, wie z. B.:<\/p>\n Wenn du alle \u00c4nderungen vorgenommen hast, klicke auf Einstellungen speichern<\/strong>.<\/p>\n Sobald du die Einstellungen konfiguriert hast, ist es wichtig, deine PWA auf verschiedenen Ger\u00e4ten zu testen. Verwende Chrome DevTools oder \u00e4hnliche Tools, um verschiedene Ger\u00e4te zu simulieren, oder teste sie direkt auf deinem mobilen Ger\u00e4t, indem du deine Website zum Startbildschirm hinzuf\u00fcgst.<\/p>\n Wenn du zum Beispiel ein iOS-Ger\u00e4t benutzt, musst du den Cache deines mobilen Browsers leeren, bevor du deine Website besuchst.<\/p>\n Klicke auf die Schaltfl\u00e4che Teilen<\/strong> und dann auf Optionen<\/strong>. Klicke auf Zum Startbildschirm hinzuf\u00fcgen<\/strong>. Schlie\u00dfe deinen Browser und klicke dann auf das App-Symbol, das gerade zu deinem Homescreen hinzugef\u00fcgt wurde. Bl\u00e4ttern Sie ein paar Seiten auf der Website durch, trennen Sie die Verbindung zum Internet und versuchen Sie dann, dieselben Seiten erneut aufzurufen.<\/p>\n Wenn sie geladen werden, ist deine PWA einsatzbereit!<\/p>\n Wenn du mehr Kontrolle und Anpassungsm\u00f6glichkeiten haben m\u00f6chtest, solltest du deine WordPress-Website manuell in eine PWA umwandeln.<\/p>\n Diese Methode ist technisch anspruchsvoller und erfordert ein gutes Verst\u00e4ndnis der Prinzipien der Webentwicklung, daher solltest du dir die oben genannten Voraussetzungen ansehen, um sicherzugehen, dass du sie erf\u00fcllen kannst.<\/p>\n Die Sicherung deiner Website mit HTTPS ist f\u00fcr PWAs nicht verhandelbar. HTTPS verschl\u00fcsselt die Daten zwischen deiner Website und ihren Besuchern und sch\u00fctzt so vor Datenlecks und \u00c4hnlichem.<\/p>\n Du kannst ein kostenloses SSL-Zertifikat von Let’s Encrypt<\/a> erhalten, wenn es nicht bereits in deinem Hosting-Paket enthalten ist.<\/p>\n Der Installationsprozess variiert je nach Hosting-Anbieter. Viele bieten einfache Ein-Klick-SSL-Installationsoptionen an. Genaue Anweisungen findest du in der Support-Dokumentation deines Hosting-Anbieters.<\/p>\n Nach der Installation deines SSL-Zertifikats musst du sicherstellen, dass der gesamte Website-Verkehr HTTPS verwendet, indem du von HTTP auf HTTPS umleitest. Das kannst du mit einem WordPress-Plugin wie Really Simple SSL<\/a> erreichen oder indem du die .htaccess-Datei deiner Website \u00e4nderst<\/a>, wenn du dich mit manuellen \u00c4nderungen auskennst.<\/p>\n Das Web-App-Manifest ist eine JSON-Datei, die steuert, wie deine PWA den Nutzern erscheint und wie sie gestartet wird. Sie enth\u00e4lt unter anderem den Namen, die Symbole und die Start-URL deiner Anwendung.<\/p>\n Als Erstes erstellst du eine JSON-Datei namens manifest.json<\/strong>. Diese Datei sollte wichtige Informationen \u00fcber deine Anwendung enthalten, z. B. den Namen ( So sollte der Code laut MDN Web Docs<\/a> ungef\u00e4hr aussehen.<\/p>\n F\u00fcge einen Link zur Datei manifest.json<\/strong> in den Abschnitt Verwende dann Tools wie Googles Lighthouse<\/a>, um deine Web-App-Manifest-Implementierung zu testen und zu validieren.<\/p>\n Service Worker<\/a> fungieren als Proxy zwischen deiner Web Anwendung und der Au\u00dfenwelt. Sie sind wichtig f\u00fcr Offline-Funktionen, Push-Benachrichtigungen und das Zwischenspeichern von Ressourcen.<\/p>\n Um einen Service Worker zu erstellen, musst du eine neue JavaScript-Datei erstellen. Nenne sie service-worker.js<\/strong> und lege sie in das Hauptverzeichnis deines WordPress-Themes. Diese Datei enth\u00e4lt die Logik f\u00fcr das Zwischenspeichern von Ressourcen, das Abfangen von Netzwerkanfragen und die Verwaltung der Offline-Funktionen.<\/p>\n Du musst deinen Service Worker \u00fcber das JavaScript deiner Web Anwendung registrieren. Normalerweise geschieht dies in einer Haupt-JavaScript-Datei, die auf deiner Webseite l\u00e4uft.<\/p>\n Hier ist ein Beispiel daf\u00fcr, wie du einen Service Worker von Borstch<\/a> registrierst:<\/p>\n In der Datei service-worker.js<\/strong> implementierst du die Logik f\u00fcr das Zwischenspeichern statischer Assets, das Abfangen von Fetch-Anfragen und das Ausliefern von Inhalten aus dem Cache, wenn du offline bist.<\/p>\n Hier ist ein einfaches Beispiel f\u00fcr das Caching einiger Assets:<\/p>\n Testen ist ein Muss, um sicherzustellen, dass sich dein Service Worker wie erwartet verh\u00e4lt. Verwende das Anwendungspanel<\/strong> in Chrome DevTools, um registrierte Service Worker, gecachte Assets und mehr zu \u00fcberpr\u00fcfen.<\/p>\n Die Optimierung deiner WordPress PWA ist das letzte, was du tun musst, um Geschwindigkeit, Zuverl\u00e4ssigkeit und Funktionalit\u00e4t zu gew\u00e4hrleisten. Im Folgenden werden einige fortgeschrittene Optimierungstechniken vorgestellt, die sich auf Caching-Strategien, die Priorisierung von Ressourcen und das adaptive Laden bei unterschiedlichen Verbindungsgeschwindigkeiten konzentrieren.<\/p>\n Laut dem Smashing Magazine<\/a> ist Caching ein Schl\u00fcsselelement der PWA-Optimierung. Es erm\u00f6glicht deiner Anwendung, schneller zu laden, indem es Kopien von Ressourcen speichert. Die Implementierung einer Cache-First-Strategie stellt sicher, dass deine Anwendung Ressourcen aus dem Cache abruft, bevor sie das Netzwerk nutzt. Dieser Ansatz ist besonders effektiv f\u00fcr statische Assets, die sich nicht oft \u00e4ndern.<\/p>\n Verwende Service Worker, um wichtige Ressourcen w\u00e4hrend der Installationsphase zwischenzuspeichern. Dazu geh\u00f6ren die Shell deiner Anwendung (HTML<\/a>, CSS<\/a>, JavaScript<\/a>) und alle statischen Ressourcen.<\/p>\n Bei dynamischen Inhalten solltest du Strategien wie „stale-while-revalidate“<\/a> in Betracht ziehen, bei der zuerst die gecachten Inhalte bereitgestellt werden und der Cache dann mit frischen Inhalten vom Server aktualisiert wird.<\/p>\n Nicht alle Ressourcen sind gleich wichtig. Einige sind f\u00fcr das erste Rendering entscheidend, w\u00e4hrend andere \u00fcber Lazy Loading<\/a> gerendert werden k\u00f6nnen. Analysiere die Ladeleistung deiner Anwendung, um festzustellen, welche Ressourcen wichtig sind und zuerst geladen werden sollten. Du kannst die preload- und prefetch-Direktiven verwenden, um den Browser \u00fcber diese Priorit\u00e4ten zu informieren:<\/p>\n Adaptives Laden passt den Inhalt und die Funktionen deiner Anwendung an die F\u00e4higkeiten des Ger\u00e4ts und die Netzwerkbedingungen des Nutzers an. Diese Technik stellt sicher, dass deine PWA auch bei langsamen oder instabilen Netzwerken ein gutes Erlebnis bietet.<\/p>\n Implementiere die Feature Detection, um je nach Ger\u00e4t des Nutzers unterschiedliche Inhalte bereitzustellen. So kannst du z. B. hochaufl\u00f6sende Bilder f\u00fcr Nutzer\/innen mit einer schnellen Verbindung bereitstellen und kleinere, komprimierte Bilder f\u00fcr Nutzer\/innen mit einer langsameren Verbindung.<\/p>\n\n
![\"cafe](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/cafe-javas.png\")
Warum die Umwandlung einer WordPress-Website in eine PWA eine gute Idee ist<\/h2>\n
1. Mehr Engagement der Nutzer<\/h3>\n
2. Verbesserte Website-Geschwindigkeit<\/h3>\n
3. Offline-F\u00e4higkeiten<\/h3>\n
4. Traditionelle Einschr\u00e4nkungen entfallen<\/h3>\n
Voraussetzungen f\u00fcr die PWA-Entwicklung in WordPress<\/h2>\n
\n
Die besten PWA-Plugins f\u00fcr WordPress<\/h2>\n
1. Super Progressive Web Apps<\/h3>\n
![\"super](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/super-pwa.png\")
Pro<\/h4>\n
\n
Nachteile<\/h4>\n
\n
Preisgestaltung<\/h4>\n
2. PWA f\u00fcr WP & AMP<\/h3>\n
![\"pwa](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/pwa-for-wp-and-amp.png\")
Pro<\/h4>\n
\n
Nachteile<\/h4>\n
\n
3. PWA<\/h3>\n
![\"pwa\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/pwa.png\")
Pro<\/h4>\n
\n
Nachteile<\/h4>\n
\n
4. Instantify<\/h3>\n
![\"instantify\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/instantify.png\")
Pro<\/h4>\n
\n
Nachteile<\/h4>\n
\n
Preisgestaltung<\/h4>\n
Wie man eine PWA mit einem WordPress-Plugin erstellt: Schritt f\u00fcr Schritt<\/h2>\n
Schritt 1: Planung deiner PWA<\/h3>\n
Schritt 2: Auswahl des richtigen Plugins<\/h3>\n
Schritt 3: Installieren des gew\u00e4hlten Plugins<\/h3>\n
![\"install](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/install-super-pwa.png\")
Schritt 4: Konfiguriere die Einstellungen<\/h3>\n
![\"super](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/super-pwa-settings.png\")
\n
\n
Schritt 5: Teste deine neue PWA<\/h3>\n
Wie du eine PWA mit WordPress von Grund auf erstellst<\/h2>\n
Schritt 1: Sicherstellung von HTTPS<\/h3>\n
2. Ein Web-App-Manifest erstellen<\/h3>\n
name<\/code>), den Kurznamen (short_name<\/code>), die Start-URL (start_url<\/code>), den Anzeigetyp (display<\/code>), die Hintergrundfarbe (background_color<\/code>), die Themefarbe (theme_color<\/code>) und die Icons (
\nicons<\/code>).<\/p>\n{\n\n\"name\": \"Your App Name\",\n\n\"short_name\": \"AppShortName\",\n\n\"start_url\": \"\/\",\n\n\"display\": \"standalone\",\n\n\"background_color\": \"#FFFFFF\",\n\n\"theme_color\": \"#000000\",\n\n\"icons\": [\n\n{\n\n\"src\": \"path\/to\/icon.png\",\n\n\"sizes\": \"192x192\",\n\n\"type\": \"image\/png\"\n\n}\n\n]\n\n}<\/code><\/pre>\nhead<\/code> deiner WordPress-Websitevorlage ein.<\/p>\n3. Einen Service Worker implementieren<\/h3>\n
if ('serviceWorker' in navigator) {\n\nwindow.addEventListener('load', function() {\n\nnavigator.serviceWorker.register('\/service-worker.js').then(function(registration) {\n\n\/\/ Registration was successful\n\nconsole.log('ServiceWorker registration successful with scope: ', registration.scope);\n\n}, function(err) {\n\n\/\/ registration failed :(\n\nconsole.log('ServiceWorker registration failed: ', err);\n\n});\n\n});\n\n}<\/code><\/pre>\nconst CACHE_NAME = 'your-app-cache';\n\nconst urlsToCache = [\n\n'\/',\n\n'\/styles\/main.css',\n\n'\/script\/main.js'\n\n];\n\nself.addEventListener('install', event => {\n\nevent.waitUntil(\n\ncaches.open(CACHE_NAME)\n\n.then(cache => {\n\nreturn cache.addAll(urlsToCache);\n\n})\n\n);\n\n});<\/code><\/pre>\nOptimieren einer WordPress PWA<\/h2>\n
Caching-Strategien<\/h3>\n
Ressourcen priorisieren<\/h3>\n
\n
Adaptives Laden<\/h3>\n