PWA APP – in 10 Minuten mit WordPress zur eigenen App

Inhaltsverzeichnis

• 1. Zur Einführung
• LOS gehts_
• 2. WordPress downloaden & installieren
  • Einfache Schritte zur WordPress Installation:
  • Wie lege ich eine Datenbank mit phpMyAdmin für WordPress an?
  • MySQL Datenbank in wp-config.php ändern / eintragen
  • Twenty Twenty-Two und die neuen WordPress Block Themes
    • Jetzt kommt die Inhalte!
• 3. Inhalten einstellen / Kategorien anlegen / Beiträge veröffentlichen
  • Hinzufügen eines Titels und Inhalts
  • Hinzufügen von Bildern
  • Kategorien anlegen
• 4. Speed & Performance Optimierung
  • Autoptimize
  • WP Super Cache
  • Dringende Empfehlung darüber hinaus
• 5. PWA Plugin Installieren
• 6. Screenshots & neu Installationsroutine in Chrome Dev
• 7. Grafik erstellen, Maskable machen
• 8. PWA – Installationsroutine, Manifest & Icons überprüfen
• 9. PWA in APK umwandeln und in Play, App & Microsoft Store einstellen
  • • TATATA … Willkommen bei Ihrer neuen App

1. Zur Einführung

Viele werden es gar nicht glauben, aber es ist inzwischen sehr einfach in kürzester Zeit zur eigenen App zu kommen. Im Folgenden möchte ich den einfachsten und schnellsten Weg vorstellen. Dabei wird nicht “nur” eine PWA App erstellt, sondern wir machen anschließend daraus eine .apk Datei und stellen diese in den Play Store von Google. Für Apple geht das ähnlich einfach, da ich aber keine eigene Apple Technik und damit auch keine Apple Developer Konto habe, kann ich das nur beschreiben, bzw. Links zu Beschreibungen veröffentlichen. Ich werde alle Schritte der Reihe nach durchgehen, ich gehe aber prinzipiell davon aus, dass Content bereits existiert und Grafiken schon erstellt sind. 

LOS gehts_

2. WordPress downloaden & installieren

Vornweg muss erwähnt werden, dass die meisten Hoster inzwischen die Installation so stark vereinfacht haben, dass ein paar Klicks genügen und die neusten Version automatisch zu installieren, trotzdem sollte man wenigstens prinzipiell wissen, wie man das auch alleine hinbekommt. 

Einfache Schritte zur WordPress Installation:

• Laden Sie die neueste Version von WordPress von wordpress.org herunter.
• Wenn Sie fertig sind, entpacken Sie die Zip-Datei
• Laden Sie die entpackten  Dateien auf Ihren Server hoch (am besten mit einem FTP-Client oder durch Hochlanden der Dateien in den entsprechenden Ordner auf Ihrem lokalen Host über das Menü Ihres Hosting-Providers).
• Sobald die Dateien der Website auf Ihren Server hochgeladen wurden, erstellen Sie eine Datenbank mit phpMyAdmin > Weitere Informationen
• Verbinden Sie die Installation und die Datenbank, indem Sie die Variablen in der Datei wp-config.php ändern > Weitere Informationen
• Sobald WordPress eingerichtet ist, installieren Sie ein Theme (weil es gerade brandaktuell ist, installieren wir das neue Twenty Twenty-Two und nutzen die WordPress Block Themes)  > Weitere Informationen
• Installieren Sie bei Bedarf verschiedene Plugins nach Ihren Bedürfnissen
• Wenn Sie neu in der Erstellung einer WordPress-Website sind, wird Ihnen das alles sehr kompliziert vorkommen. Nehmen Sie sich Zeit, informieren sich zu den Detailschritten, und mit der Zeit und etwas Übung wird der Vorgang zu einem Kinderspiel.

Wie lege ich eine Datenbank mit phpMyAdmin für WordPress an?

Schnell & einfach

Im Folgenden finden Sie eine Zusammenfassung der Schritte, die Sie bei der Erstellung einer WordPress-Datenbank mit phpMyAdmin durchführen müssen:

• Melden Sie sich bei Ihrem Webhosting an, um auf das phpMyAdmin Control Panel zuzugreifen. Für lokales Hosting sollten Sie die URL http://localhost/phpmyadmin in Ihrem Browser aufrufen, während Apache und MySQL laufen.
• Suchen Sie die Schaltfläche phpMyAdmin in Ihrem Hosting Control Panel, dort können Sie eine Datenbank auf einem Remote-Server bzw. in Ihrem Hosting-Account erstellen.
• Klicken Sie auf das phpMyAdmin Symbol und Sie werden zur phpMyAdmin-Oberfläche weitergeleitet, wo Sie nun eine WordPress-Datenbank erstellen können.
• Klicken Sie auf das Menü „Datenbanken“ und Sie werden Felder zum Erstellen der Datenbank sehen; Sie müssen den Namen der Datenbank hinzufügen und auf „Erstellen“ klicken.
• Erstellen Sie einen neuen Benutzernamen und ein Passwort, die von PHP-WordPress-Skripten für den Zugriff auf die neu erstellte MySQL-Datenbank verwendet werden sollen. Gehen Sie dazu auf die Registerkarte „Privilegien“ und klicken Sie auf „Neuen Benutzer hinzufügen“.
• Weisen Sie dem neuen Benutzer globale Privilegien zu:
  • In diesem Schritt müssen Sie dem neuen Benutzer globale Rechte zuweisen, damit Sie den Benutzer im WordPress-Installationsprozess verwenden können. Aktivieren Sie das Kontrollkästchen, um alle globalen Berechtigungen auszuwählen, und klicken Sie auf Los, um den Datenbankbenutzer zu erstellen und ihm globale Berechtigungen zuzuweisen.

Jetzt haben Sie eine neue Datenbank mit einem Benutzer, mit dem passenden Privilegien für den Sie Benutzername & Passwort haben (brauchen wir gleich). 

MySQL Datenbank in wp-config.php ändern / eintragen

Die Einstellungen für die WordPress-Datenbankverbindung werden im Abschnitt MySQL-Einstellungen in der Datei wp-config.php angezeigt. Um diesen Abschnitt auszufüllen, benötigen Sie Ihren MySQL-Host, den Datenbanknamen, den Datenbankbenutzernamen und das Datenbankpasswort.

wp-config.php:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'databank_name_hier');
 
/** MySQL database username */
define('DB_USER', 'benutzer_name_hier');
 
/** MySQL database password */
define('DB_PASSWORD', 'passwort_hier');
 
/** MySQL hostname */
define('DB_HOST', 'localhost');
 
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
 
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

Standardmäßig stellt WordPress allen von WordPress erstellten Tabellen das Präfix wp_ voran. Es wird empfohlen, das Präfix der WordPress-Datenbanktabelle in etwas Zufälliges zu ändern. Dadurch wird es für Hacker schwieriger, Ihre WordPress-Tabellen zu erraten, und Sie werden vor einigen gängigen SQL-Injection-Angriffen geschützt.

/**
 * WordPress Database Table prefix.
 *
 * You can have multiple installations in one database if you give each
 * a unique prefix. Only numbers, letters, and underscores please!
 */
$table_prefix  = 'wp_';

Sie sollten den Datenbank Präfix übrigens nicht unbedingt für einen bestehende WordPress Installation ändern. Sollte es trotzdem notwendig werden, finden Sie hier den Weg. 

Twenty Twenty-Two und die neuen WordPress Block Themes

WordPress 5.9 wird ein brandneues Standard-Theme namens Twenty Twenty Two enthalten. Dies kommt zu einem aufregenden Zeitpunkt für WordPress-Themes. Mit dem Aufkommen von Full Site Editing und der globalen Stile ändern sich die Themes strukturell und funktionell und bieten weitaus mehr Anpassungsmöglichkeiten, als die Nutzer in der Vergangenheit erwartet haben. Um die Vorteile dieser neuen Funktionen zu nutzen, wurde Twenty Twenty-Two als das flexibelste Standard-Theme entwickelt, das jemals für WordPress erstellt wurde.

Der Entwickler des Themas, Kjell Reigstad, hat sich zwar stark von der Vogelbeobachtung inspirieren lassen, aber Sie können die Bilder schnell durch eigene Inhalte ersetzen. Mit fast 70 verschiedenen Blockvorlagen zur Auswahl können Sie mit verschiedenen Layouts beginnen und eigene Inhalte einfügen.

Mit Twenty Twenty können Sie Schriftarten, Bildeffekte, stilspezifische Blöcke und vieles mehr ändern. Diese neuen Einstellungen ermöglichen eine völlig neue Art der Anpassung von Websites.

Um die Vorteile dieser neuen Anpassungsfunktionen nutzen zu können, wird Twenty Twenty-Two zunächst für die vollständige Bearbeitung von Websites ausgelegt sein. Das Thema zielt darauf ab, so wenig CSS wie möglich zu verwenden: Das Ziel ist es, alle Themenstile über theme.json zu konfigurieren und über globale Stile zu bearbeiten. Das Theme-Team hat  eng mit den Gutenberg-Autoren zusammengearbeitet, um Design-Tools im Block-Editor zu entwickeln, die dieses Ziel erreichen.

Twenty Twenty-Two nutzt ein breites Netzwerk von Seitenvorlagen, Kopf- und Fußzeilen und anderen Vorlagen, so dass die Benutzer ihr eigenes Theme leicht gestalten können. 

Dieses Video bietet einen Einblick die Möglichkeiten, die Twenty Twenty Two bietet:

Darüber hinaus wird Twenty Twenty-Two mit einer Reihe von alternativen Farbschemata geliefert, so dass die Nutzer das Aussehen ihrer Website grundlegend verändern können. Die Nutzer werden auch in der Lage sein, Schriftarten, Bildbearbeitung und vieles mehr auf der gesamten Website zu ändern. Diese neuen Steuerelemente eröffnen eine breite Palette von völlig unterschiedlichen Einstellungen für das Thema.

Bei der Entwicklung von Twenty Twenty wurde berücksichtigt, dass das Standard-Look-and-Feel für die meisten Menschen nicht das Nonplusultra ist. Jeder verdient eine wirklich einzigartige Website, die auf einer soliden, gut gestalteten Grundlage aufgebaut ist, und Twenty Twenty-Two soll ihm dabei helfen, dies zu erreichen.

Sind Sie alle Einzelschritte durchgegangen, haben Sie jetzt die neuste WordPress Version -seit heute gibt es WordPress 5.9- mit dem neuen “Basis-Theme” für den Block Editor installiert

Jetzt kommt die Inhalte!

3. Inhalten einstellen / Kategorien anlegen / Beiträge veröffentlichen

Es gibt mehrere Möglichkeiten, einen neuen Beitrag in WordPress hinzuzufügen, und alle führen Sie zum visuellen Editor.

Die erste Möglichkeit ist über das Dashboard -> Beiträge -> Erstellen.

Die zweite Möglichkeit ist, auf das „+“-Symbol in der Kopfzeile zu klicken und dann auf „Beitrag“.

Denken Sie daran, dass Beiträge und Seiten zwei verschiedene Aspekte einer WordPress-Website sind.

Beiträge sind Inhalte auf einer Blogseite, die in umgekehrter chronologischer Reihenfolge aufgelistet werden. Sie erscheinen in der Regel in Form von Artikeln und werden regelmäßig veröffentlicht.

Seiten sind für statische und zeitlose Inhalte gedacht, wie z. B. eine Homepage oder eine Kontaktseite. Die Seiten werden von Zeit zu Zeit aktualisiert, bleiben aber im Großen und Ganzen unverändert.

Hinzufügen eines Titels und Inhalts

Sowohl der Titel als auch der Inhalt eines Beitrags sind wichtige Bestandteile der Suchmaschinenoptimierung einer Website.

Oben auf der Seite des visuellen Editors wird automatisch ein Feld „Überschrift hinzufügen“ angezeigt. Sie können Beiträge ohne Titel veröffentlichen, was es für die Leser schwierig macht, den Beitrag zu finden.

Direkt unter dem Kopfzeilenfeld ist Platz, um beliebige Inhalte in Blöcken einzufügen. Wenn Sie mit Text beginnen, schreiben Sie einfach los.

Um weitere Blöcke hinzuzufügen, klicken Sie auf das „+“-Symbol in der oberen linken Ecke des Bildschirms neben dem WordPress-Logo oder rechts neben dem Editor.

Es gibt Blöcke für alle gängigen Inhaltstypen, einschließlich Absatz, Spalte und Kopfzeile. Neben den Blöcken können Sie auch Widgets hinzufügen, z. B. „Letzte Kommentare“ und „Suche“. Es gibt auch Blöcke für die Einbettung von Inhalten Dritter.

Sie können auch einige Blöcke umwandeln. Beginnen Sie mit einem Absatzblock und ändern Sie ihn dann in eine Spalte, eine Überschrift oder ein Zitat, indem Sie auf die Schaltfläche mit dem Blocksymbol klicken.

Um weitere Änderungen vorzunehmen, klicken Sie auf das Einstellungssymbol in der oberen rechten Ecke des Bildschirms und wählen Sie dann den Abschnitt „Sperren“. Dies bietet mehr Bearbeitungsmöglichkeiten für alle Blöcke.

Wenn Ihnen die Verwendung von Blöcken zu kompliziert ist, gibt es auch einen klassischen Block. Dieser Block fügt Inhalte ein, als ob Sie den klassischen Editor verwenden würden, und verwandelt sich nach Fertigstellung wieder in einen Block.

Hinzufügen von Bildern

Ohne Bilder hätten die meisten Websites Schwierigkeiten, die Aufmerksamkeit ihrer Besucher zu gewinnen. Gut optimierte Bilder tragen nicht nur dazu bei, Ihre Beiträge und Seiten ansprechender zu gestalten, sondern erhöhen auch die Geschwindigkeit der Website und verbessern ihr SEO-Ranking.

Es gibt zwei grundlegende Blöcke für Bilder – einen Block für ein einzelnes hochzuladendes Bild und einen Galerieblock für mehrere Bilder.

Wenn Sie ein einzelnes Bild anzeigen möchten, wählen Sie den Bildblock. Der Galerie-Block ist die beste Option für die Anzeige mehrerer Bilder in Zeilen und Spalten mit einem Raster.

Es gibt drei Möglichkeiten, ein Bild oder mehrere Bilder hochzuladen, wenn Sie den WordPress-Blockeditor verwenden:

• Ziehen Sie Medien per Drag & Drop direkt in den ausgewählten Block.
• Fügen Sie vorhandene Medien aus Ihrer Medienbibliothek hinzu.

Oder fügen Sie ein neues Bild ein, indem Sie in der Symbolleiste -> Medien -> Neu hinzufügen wählen.

Kategorien anlegen

Auch hierfür gibt es 2 Möglichkeiten:

1. direkt im neuen Beitrag

Sie können einfach auf den Link „Neue Kategorie hinzufügen“ auf der rechten Seite klicken, um Ihre neue Kategorie zu erstellen. Sobald Sie auf den Link klicken, erscheinen zwei neue Felder, in die Sie Ihre Kategorie eintragen können. Für eine reguläre Kategorie müssen Sie nichts aus der Dropdown-Liste übergeordnete Kategorie auswählen. Die Felder zum Hinzufügen Ihrer neuen Kategorie sind nun sichtbar. Sobald Sie den Namen Ihrer Kategorie eingegeben haben, klicken Sie auf die Schaltfläche „Neue Kategorie hinzufügen“. Das Feld für diese Kategorie wird dann automatisch für Ihre aktuelle Veröffentlichung überprüft. Sie können dieses Kontrollkästchen deaktivieren, wenn Sie dies wünschen.

2. Über das Beiträge Menü

Sie können auch eine neue Kategorie hinzufügen, ohne den Beitrag zu bearbeiten. Gehen Sie einfach zum Abschnitt „Beitragskategorien“ und fügen Sie Ihre neue Kategorie hinzu. Dies ist praktisch, wenn Sie alle Kategorien erstellen möchten, bevor Sie Inhalte hinzufügen. Mit dieser Methode können Sie auch den Link (URL) für Ihre Kategorien bearbeiten. Sie können hier auch Kategorien löschen und umbenennen. Sie können ihnen sogar eine Beschreibung geben. Sehen Sie, wie Sie in WordPress SEO-Schlüsselwörter und Beschreibungen hinzufügen.

4. Speed & Performance Optimierung

Normalerweise bräuchte es für dieses Thema einen eigenen Beitrag. Es ist insgesamt von entscheidender Bedeutung, denn nur eine schnelle Webseite macht auch eine von der Nutzbarkeit sinnvolle App. Wenn Sie diesen Punkt vernachlässigen, brauchen Sie in meinen Augen hier gar nicht weiterzumachen. Sie sollten diesem Punkt die Aufmerksamkeit und Priorität zukommen lassen, die nach objektiven Kriterien auch benötigt. Ich gehe hier nicht so intensiv darauf ein, wie es normalerweise sinnvoll wäre. Hier gehe ich davon aus, dass Sie WordPress 5.9 mit den neuen Block Themes und nicht allzu viele weitere Plugins installiert haben. Dann ist ihr WordPress nämlich von Haus aus ziemlich schnell und die 2 Plugins, die ich im Folgenden beschreibe reichen dann vollkommen. Diese 2 Plugins sind meine bevorzugte Startkonfiguration für neue Webseiten. In vielen Fällen reicht mir das vollkommen aus, wenn aber viele Plugins zum Einsatz kommen, muss hier unbedingt nachgebessert werden. Haben Sie beispielsweise Woocommerce installiert, müssen Sie ALLE Möglichkeiten nutzen, die ihnen direkt zur Verfügung stehen. 

Um hier aber insgesamt vollumfänglich alle Möglichkeiten auszuschöpfen, empfehle ich folgende Artikel (englisch):

• 8 Excellent WordPress Caching Plugins to Speed Up Your Site
• 25 Ways To Fix A Slow WordPress Site And Pass Core Web Vitals

Autoptimize

Autoptimize macht die Optimierung Ihrer Webseite ziemlich einfach. Es kann Skripte und Stile zusammenfassen, reduzieren und zwischenspeichern, CSS standardmäßig in den Seitenkopf einfügen, aber auch kritisches CSS einbetten und zusammengefassen vollständiges CSS aufschieben, Skripte in die Fußzeile verschieben und aufschieben sowie HTML reduzieren. Sie können Bilder optimieren und verzögert laden (mit Unterstützung für WebP- und AVI-Formate), Google-Schriftarten optimieren, asynchrones nicht aggregiertes JavaScript verwenden, grundlegende WordPress-Emoji entfernen und vieles mehr. Auf diese Weise kann die Leistung Ihrer Website verbessert werden, auch wenn sie bereits auf HTTP/2 basiert! Es gibt eine umfangreiche API, mit der Sie die automatische Optimierung an die spezifischen Bedürfnisse jeder Website anpassen können.

zum perfekten Einstellen empfehle ich folgenden Artikel:

• Autoptimize: Optimale Einstellungen für besten Pagespeed

WP Super Cache

Dieses Plugin erzeugt statische HTML-Dateien aus Ihrem dynamischen WordPress-Blog. Sobald die HTML-Datei erstellt ist, wird Ihr Webserver diese Datei ausliefern, anstatt die relativ schwerfälligen PHP-WordPress-Skripte zu verarbeiten.

Diese statische Html-Dateien sind für die große Mehrheit Ihrer Nutzer zugänglich:

• Benutzer, die nicht angemeldet sind.
• Benutzer, die keinen Kommentar in Ihrem Blog hinterlassen haben.
• Oder Benutzer, die einen passwortgeschützten Beitrag nicht angesehen haben.

99 % Ihrer Besucher werden die erzeugten statische HTML-Dateien erhalten. Eine zwischengespeicherte Datei kann Tausende von Malen ausgeliefert werden. Anderen Besuchern werden auf ihren Besuch zugeschnittene Cache-Dateien zur Verfügung gestellt. Wenn sie eingeloggt sind oder Kommentare hinterlassen, werden diese angezeigt und zwischengespeichert.

Das Plugin stellt zwischengespeicherte Dateien auf 3 Arten bereit (geordnet nach Geschwindigkeit):

1. Experte. Am schnellsten geht es, wenn Sie Apache mod_rewrite (oder ein ähnliches Modul, das Ihr Webserver unterstützt) verwenden, um statische Html-Dateien in den „Super-Cache“ zu stellen. Dies umgeht PHP vollständig und ist extrem schnell. Wenn eine Flut von Datenverkehr auf Ihren Server trifft, wird er eher damit fertig, weil die Anfragen „leichter“ sind. Dies erfordert das Apache-Modul mod_rewrite (das wahrscheinlich installiert ist, wenn Sie benutzerdefinierte dauerhafte Links haben) und die Änderung Ihrer .htaccess-Datei, was riskant ist und dazu führen kann, dass Ihre Website nicht mehr funktioniert, wenn sie nicht korrekt geändert wird.
2. Einfach. Statische Dateien aus dem Supercache können von PHP bedient werden, und dies ist die empfohlene Art, das Plugin zu verwenden. Das Plugin stellt eine „supercached“ Datei bereit, wenn sie existiert, und ist fast so schnell wie die mod_rewrite-Methode. Es ist einfacher einzurichten, da die .htaccess-Datei nicht geändert werden muss. Sie benötigen immer noch einen benutzerdefinierten dauerhaften Link. In diesem Caching-Modus können Sie Teile Ihrer Seite dynamisch halten.
3. WP Cache Caching. Dies wird hauptsächlich dazu verwendet, Seiten bekannter Benutzer, URLs mit Parametern und Channels zwischenzuspeichern. Bekannte Benutzer sind registrierte Benutzer, Besucher, die Kommentare hinterlassen, oder diejenigen, die benutzerdefinierte Daten für jeden Benutzer anzeigen sollen. Dies ist die flexibelste Caching-Methode und etwas langsamer. Das WP-Caching speichert auch Besuche von unbekannten Benutzern, wenn Supercaching deaktiviert ist. In diesem Modus können Sie auch dynamische Teile zu Ihrer Seite hinzufügen. Dieser Modus ist immer aktiviert, aber Sie können die Zwischenspeicherung für bekannte Benutzer, URLs mit Parametern oder Kanäle separat deaktivieren.

Empfohlener Artikel für das Einstellen:

• ANLEITUNG: WP SUPER CACHE INSTALLIEREN UND EINSTELLEN

Dringende Empfehlung darüber hinaus

Es gibt 2 Dinge, die ich auch eigentlich immer aktiviert habe, aber da sie serverseitig sind und deshalb in den günstigeren Hosting Varianten nicht funktionieren, hier nur kurz erwähnt. Wenn Sie aber die Infrastruktur dafür haben, sollten Sie es dringend einrichten.

1. Nginx Caching

NGINX ist ein konsolidierter Open-Source-Hochleistungs-Webserver, der die Auslieferung von Content und Applikationen erheblich beschleunigt, die Sicherheit verbessert und die Skalierbarkeit steigert. Eine der häufigsten Verwendungen von Nginx ist das Zwischenspeichern von Inhalten, die effektivste Methode zur Verbesserung der Website-Performance.

Sie können NGINX zur Beschleunigung lokaler Quellserver verwenden, indem Sie es so konfigurieren, dass Antworten von Upstream-Servern im Cache gespeichert werden, sowie zur Erstellung von Edge-Servern für Content Delivery Networks (CDNs). NGINX unterstützt einige der größten CDNs. NGINX nutzt einen persistenten Festplatten-Cache, der sich irgendwo im lokalen Dateisystem verbirgt. Beginnen Sie also mit der Erstellung eines lokalen Speicherverzeichnisses, in dem die zwischengespeicherten Informationen abgelegt werden.

Statische Inhalte sind Website-Inhalte, die auf verschiedenen Seiten gleich bleiben (sich nicht ändern). Objekte mit statischem Inhalt sind z. B. Dateien wie Bilder, Videos, Dokumente, CSS-Dateien und JavaScript-Dateien. Wenn Ihre Website viele statische Inhalte aufweist, können Sie die Leistung verbessern, indem Sie die clientseitige Zwischenspeicherung optimieren, bei der der Browser Kopien der statischen Inhalte für einen schnelleren Zugriff ablegt.

Einrichtung & weitere Informationen

2. Opcache:

Der OP-Cache ist eine Art Zwischenspeicherung von Operationscode. Diese Art der Cachespeicherung übersetzt den für den Menschen lesbaren PHP-Code in einen Code, den Ihr Server nachvollziehen kann, den sogenannten Operationscode. Dies erfolgt, wenn die PHP-Datei zum ersten Mal auf eine Webseite geladen wird. Sie wird dann im Serverspeicher gehalten, damit sie bei jedem weiteren Besuch der Seite schneller aufgeladen werden kann. Byte-Code-Caching-Mechanismen wie OPCACHE, APC und Xcache führen diesen Prozess beim ersten Aufruf der PHP-Datei durch, ohne ihn ein zweites oder drittes Mal wiederholen zu müssen. Wenn ein PHP-Skript abgerufen wird, wird der Cache Ihres Servers daraufhin untersucht, ob das Skript bereits im Cache liegt. Ist dies nicht der Fall, wird er ausgewertet, was bedeutet, dass der Code geparst wird.

Das Skript wird dann in Operationscode umgewandelt, wodurch die Datei für den Server verständlich wird. Sobald dies geschehen ist, wird der Operationscode im Speicher des Servers hinterlegt. Mit anderen Worten, sie wird im Cache Ihres Servers aufbewahrt. Wenn ein Besucher die Seite das nächste Mal mit einem PHP-Skript lädt, wird der zwischengespeicherte Code ausgeführt und viel schneller geöffnet. Wird das Skript hingegen auf der Seite aufgerufen und der Cache sucht und findet den Operationscode, wird es mit einem Split geladen.

Einrichtung & weitere Informationen

5. PWA Plugin Installieren

Es gibt inzwischen für WordPress eine Vielzahl an Plugins, die die Hauptaufgabe bei der Umwandlung eine Webseite in eine PWA übernehmen. Mit diesen Plugins ist die Umwandlung denkbar einfach und innerhalb sehr kurzer Zeit erledigt, wenn vorher Icons und Beschreibungstexte verbreitet wurden. Man klickt sich kurz durch und gut! Ich möchte zwei der populärsten PWA Plugins kurz vorstellen. Welches man wählt, hängt vor allem von der Ausrichtung der beabsichtigten App und damit mit dem gewünschten Funktionsumfang. 

1. PWAforWP

PWAforWP installiert eine PWA App auf dem Startbildschirm der Nutzer, damit diese sofort auf die Inhalte zugreifen können. Was PWAforWP so außergewöhnlich macht und meine bevorzugtes PWA-Plugin ist, ist der sehr gute Funktionsumfang bereits in der kostenlosen Version. Es gibt aber, wenn man ein paar Taler ausgibt, darüber hinaus noch sehr gute Möglichkeit PWAforWP zu erweitern. Hier könnte man z.B. erst mal die Low Budget Version nehmen, um später weitere Funktionen freizuschalten. Die kostenlose Funktion, die ich nicht missen möchte und ohne die mir eigentlich kein PWA Plugin ins Haus kommt, ist ein individuelles Installbanner. Das googleeigene Installbanner ist schwer nachprüfbar und gefühlt funktioniert es nicht zuverlässig. Hat man bspw. einmal die Installation der PWA abgelehnt merkt sich der Browser da und bietet es nicht mehr an. Komischerweise nützt auch das Löschen von Cookies und Cache nichts, das Banner kommt dann einfach nicht mehr. Bei PWAforWP ist das nicht so, es ist sehr hartnäckig, wenn man das möchte. Dafür fehlt aktuell die Möglichkeit Screenshots darzustellen, was aber aktuell noch kein Plugin kann. Da das sehr ansprechend aussieht, muss man die Manifest ein wenig tunen (#Anker). Machen Sie sich auch keine Sorgen über Plattformkriege – PWAforWP funktioniert sowohl auf Android als auch auf iOS. Mit dem PWA-Generator für APKs können Sie Ihre „App“ sogar in den Google Play-Shop aufnehmen.

PWAforWP speichert Ihre Webseite auch im Cache, sodass sie auch offline verfügbar ist (z.B. wenn der Fahrstuhl nicht richtig funktioniert!). Sie können auch ein individuelles PWA-Installationsbanner an einer beliebigen Stelle Ihrer Website einfügen, damit die Besucher sofort wissen, wie sie die App installieren können Die Erweiterung der Bildlaufanzeige zeigt den App-Nutzern an, wie viel Inhalt sie noch vor sich haben, während die Erweiterung „Herausziehen zum Aktualisieren“ es ihnen ermöglicht, jederzeit weitere Inhalte abzurufen.

PWAforWP bietet eine optimierte Anwendungsschnittstelle, die sicherstellt, dass Sie keinen Traffic durch die Launen der Suchmaschinen-Rankings verlieren. Darüber hinaus lässt sich anhand detaillierter Datenanalysen nachvollziehen, wie viele Nutzer Ihre App installiert haben.

Nachrichtenseiten werden PWAforWP lieben, weil Sie Ihre neuesten Artikel direkt auf mobile Geräte bringen können, ohne dass die Nutzer gezwungen sind, ihren Webbrowser zu starten. Gleichzeitig können sich E-Commerce-Unternehmen langfristige Kunden sichern, indem sie ihre Angebote direkt bei den Kunden bewerben und den Wettbewerb bei der Suche nach Produkten ausschalten. Und die Ersteller von Inhalten können leichter mit ihrer Fangemeinde in Kontakt treten, indem sie ihnen mehr Sendezeit einräumen. Dank der integrierten Unterstützung für Push-Benachrichtigungen werden Ihre PWA-Benutzer außerdem benachrichtigt, sobald neue Inhalte verfügbar sind.

2. Instantify – PWA & Google AMP & Facebook IA

Instantify von DaftPlug ist Quasi der Mercedes der PWA Plugins und es gibt das Plugin leider nicht kostenlos. Es ist ein WordPress-Plugin, das progressive Web-Apps, Google AMP Instant Articles und Facebook miteinander verbindet, um eine erstaunliche Leistung und Benutzererfahrung auf jeder möglichen Plattform zu erreichen. Instantify macht es leicht, die Website mobilfreundlich zu gestalten und die Ladegeschwindigkeit zu erhöhen, so dass es bessere Google-Rankings, mehr kostenlosen Traffic und eine drastische Steigerung der Konversionen mit relativ wenig Arbeit oder technische Kenntnisse ergibt. Sie haben die Kontrolle über alle Einstellungen und ein leistungsstarkes Administrationspanel.

Der Funktionsumfang ist quasi gigantisch. Sehr gut fand ich auch hier die Möglichkeit für individuell Installbanner bzw. gibt es hier noch weitere Möglichkeiten je nach System (IOS, Android). Man kann auch die PWA als Ajax laden, allerdings hat das bei mir in keinem Fall funktioniert ohne Fehler, ich habe es aber auch nur oberflächlich probiert. Was ich dabei gemerkt habe, war aber ein gigantischer Performanceschub. Vermutlich funktioniert das mit einfachen Seiten mit wenigen .js Files besser. Noch ein paar Features:

• Installationsüberlagerungen
• Offline-Verwendung
• Navigations-Tabbar
• Share-Taste.
• Navigation Swipe down
• Swipe Navigation.
• Shke to close
• Preloader
• Ajaxify.
• Hintergrundsynchronisation
• Permanent Cache
• Vibration
• Bildschirmwecksperre

Wer ein paar Taler investieren kann, sollte es mal versuchen. Allerdings bin ich auch ehrlich, ich brauch die ganzen Funktionen nicht wirklich und ich bin wordpresstechnisch Minmalist, jede unnötige Extrafunktion kostet Performance und deshalb nehme ich es nicht. Ich hatte auch das Gefühl es läuft nicht alles rund, aber das kann täuschen. 

3. Super Progressive Web App

SuperPWA ist eine einfache und direkte Lösung für jeden Webseitenbetreiber, der die mobile Erfahrung seiner Nutzer optimieren möchte. Man kann eine WordPress-Webseite im Handumdrehen in eine progressive Web-App verwandeln. Sobald Sie SuperPWA in WordPress mit dem SuperPWA-Plugin installiert und konfiguriert haben, sieht jeder, der die Website auf einem unterstützten Mobilgerät aufruft, die Benachrichtigung „Zum Startbildschirm hinzufügen“ und kann ein Symbol der Website zu seinem Startbildschirm hinzufügen, genau wie bei einer echten mobilen App. Jedes Mal, wenn eine Seite besucht wird, wird sie lokal auf dem Gerät zwischengespeichert und ist auch offline verfügbar. Eine weitere interessante Funktion von Super Progressive Web Apps ist, dass Android-Benutzer Push-Benachrichtigungen erhalten können, wodurch sie die Möglichkeiten einer eigenen App erhalten. Leider ist dies unter iOS nicht möglich.

Der Nachteil von SuperPWA ist, dass es im Gegensatz zu Ihren eigenen mobilen Apps das Aussehen Ihrer Website nicht an Ihr Gerät anpasst. Außerdem werden Sie mit PWA ohnehin keine Präsenz in den App-Stores haben. Wenn Sie SuperPWA verwenden, um Ihre Website in eine progressive Webanwendung umzuwandeln, wird sie weiterhin in Suchmaschinen angezeigt, genau wie eine Website.

Dies ist ein Vorteil von PWA, da reguläre mobile Apps nicht in Google, sondern ausschließlich in den App-Stores angezeigt werden. Für eine PWA ist immer die grundsätzliche Ausrichtung entscheidend. Dafür hab ich einen Begriff. Für PWAs eigenen sich vor allem “Präsenz-Apps” also Apps, die ein Unternehmen, Organisation oder Einzelperson repräsentieren sollen. Weniger geeignet sind PWAs für “Funktions-Apps” und natürlich Spiele, obwohl es natürlich relative einfach Spiele auch als PWA gibt, siehe hier. 

6. Screenshots & neu Installationsroutine in Chrome Dev

Chromium ist die grundlegende Browserarchtektur, die PWA Apps vollständig unterstützt. Das Chromiumprojekt wird vor allem von Google maßgeblich vorangetrieben und Chromiumbrowser sind mit Abstand der am weitesten verbreite Browserurtyp. 

In den Chromiumbrowsern tut sich was, es sehr possitive Entwicklungen und es ist nur eine Frage der Zeit bis diese jedem der “großen” Chromiumbrowser umgesetzt sind. Die bekanntesten sind übrigens inzwischen folgende:

1. Chrome (Standart, Dev, Beta, Canary)
2. Opera
3. Microsoft Edge
4. Vivaldi
5. Puffin Browser

Auch die Browser von Apple und Firefox unterstützen PWA Apps. Microsoft untzerstützt mit Windows PWAs vollumfänglich. Damit gibt es auf jedem erdenklichen Gerät, in allen entscheidenden Betriebsystemen mit nahezu jeder Softwareversion eine Unterstützung für PWA Apps. 

• Screenshots selbst einbauen

Die Installationsroutine ist von Google in den letzten Monaten entscheidend angepasst worden. Im Standard Chrome sind inzwischen Screenshots im Installbanner möglich. In den DEV, Beta und Canery Versionen ist auch die Standardinstallation optisch wesentlich schöner:

Das sieht super toll und hat den Installationsprozess auf eine neues Niveau gehoben. Dummerweise unterstützt noch keiner, der mir bekannten Plugins die Screenshot-Funktion. Es ist mir tatsächlich ein Rätsel, warum das so ist, weil es tatsächlich nur einige Zeilen Code sind, aber das “PWA Erlebnis” entscheidend verbessert. Bleibt nur selbst Hand anzulegen. Das ist so einfach wie Kaffee kochen, einfach die Manifest Datei so anpassen (hier am Beispiel unserer socialshops APP):

{
    "name": "Socialshops",
    "short_name": "Socialshops",
    "description": "Onlineshop + Soziales Netzwerk = Social Shopping = Socialshops",
    "icons": [
        {
            "src": "https:\/\/socialshops.de\/wp-content\/uploads\/2021\/08\/pwa_button_v3_192-2.png",
            "sizes": "192x192",
            "type": "image\/png",
            "purpose": "any"
        },
        {
            "src": "https:\/\/socialshops.de\/wp-content\/uploads\/2021\/08\/pwa_button_v3_192-2.png",
            "sizes": "192x192",
            "type": "image\/png",
            "purpose": "maskable"
        },
        {
            "src": "https:\/\/socialshops.de\/wp-content\/uploads\/2021\/08\/pwa_button_v3-1.png",
            "sizes": "512x512",
            "type": "image\/png",
            "purpose": "any"
        },
        {
            "src": "https:\/\/socialshops.de\/wp-content\/uploads\/2021\/08\/pwa_button_v3-1.png",
            "sizes": "512x512",
            "type": "image\/png",
            "purpose": "maskable"
        }
    ],
    "background_color": "rgb(17,17,17)",
    "theme_color": "rgb(17,17,17)",
    "display": "standalone",
    "orientation": "portrait",
    "start_url": "https:\/\/socialshops.de\/",
    "scope": "https:\/\/socialshops.de\/",
	
	"screenshots": [
   {
    "src": "pwa/start.jpg",
     "sizes": "375x812",
     "type": "image/jpg"
   },
		{
    "src": "pwa/menu.jpg",
     "sizes": "375x805",
     "type": "image/jpg"
   },
				{
    "src": "pwa/product.jpg",
     "sizes": "375x812",
     "type": "image/jpg"
   },
				{
    "src": "pwa/blog.jpg",
     "sizes": "375x805",
     "type": "image/jpg"
   }
]
}

7. Grafik erstellen, Maskable machen

Zum Erstellen einer Grafik sollte man schon ein Standard Grafikprogram verwenden. Ohne neue Photoshop, Illustrator oder ähnliche Lizenz bleiben kostenlose Programme wie:

• Gimp
• Photoshop 2 (eigentlich völlig ausreichend)
• Paint.Net
• Photopea (selbst eine PWA)

GANZ WICHTIG! Ist es übrigens, dass die erstellten Grafiken in den Größen 512x512px, sowie 192x192px ALLERDINGS maskable (maskierbar) vorhanden sind. Maskierbar bedeutet, dass die Grafiken von dem verschieden Betriebssystemen und in Android von den Launchern standardisiert in verschienden Formen gebracht werden kann ohne unschön auszusehen. Wenn man bis hierher gekommen ist und eine Top PWA gebaut hat, sollte man dies nicht vernachlässigen. Ich hab viel zu lange das überhaupt nicht für erst genommen und mich jedes mal gewundert, warum die ICON nie ordentlich auf dem Smartphone dargestellt worden sind. Auf ein hässliches ICON klickt man aber ungern.  

Für das maskable machen gibt es eine wunderbare PWA: 

Ich rate dringend die Maskierung auf „Padding 25%“ zu stellen, auch wenn das optisch kleiner aussieht als eigentlich benötigt, aber manche Adroid Distribution oder Launcher machen es notwenig noch ein wenig mehr zu maskieren. Dort witrd von Icon sonst zu viel wegeschnitten. Muss ich erwähnen, dass man eine .svg oder .png Datei ohne Hintergrund nehmen sollte? Hiermit erledigt.

8. PWA – Installationsroutine, Manifest & Icons überprüfen

So fast am Ende der Transformation angekommen bleibt natürlich noch das Testen der PWA. Ich muss zugeben, dass dies trotz massig Tools immer noch nicht zufriedenstellend funktioniert, aber ich bin der Sache schon ein entscheidendes Stück näher gekommen. 

Als Erstes muss man das mobile Design der Webseite testen. Das geht entweder in der Chrome Console (auch DEVTools genannt) oder um einiges besser mit der wunderbaren Browsererweiterung “Responsitive Viewer”. Mit letzterer seht ihr auf Knopfdruck alle voreingestellten Ansichten verschiedener Systeme und Geräte zoombar auf einer Seite, ich wüsste nicht, was ich ohne machen würde… 

Ebenfalls kommt man nicht drum herum die PWA mit Lighthouse (DEVTools, Chrome Plugin oder Webseite). Hier ist vor allem die Performance, die Grafiken, sowie Fehler in Manifest und den .js Dateien zu überprüfen. 

Zu guter Letzt ist eine Überprüfung auf dem Smartphone selbst notwendig. Bedenkt bitte, dass dies nur so lange funktioniert bis ihr die PWA entweder Installiert oder weggeklickt habt. Danach ist die Installationsroutine verschwunden. Nicht mal Cache und Cookies löschen holt sie dann wieder her (ich weiß, ich wiederhole mich). Damit man nicht ständig vom Computer weg muss, gibt es noch ein grandioses Tool, mit dem man das Smartphone auf dem Computer spiegeln kann und das auf simpelste, schnellste Art und Weise ohne Installation. Einfach Smartie per USB Kabel an dem Compi anschließen und Programm aufrufen: 

Vorher bitte ADB am Smartphoe aktivieren.

9. PWA in APK umwandeln und in Play, App & Microsoft Store einstellen

Also für mich persönlich braucht es eigentlich keine PlayStore oder App Store mehr, aber das wird noch deine Weile dauern bis sich das vollständig herumgesprochen hat. Bis dahin sind die Stores natürlich eine wunderbare Traffic Quelle und man sollte die sehr einfache Möglichkeit seine App in den Play oder App Store einzustellen auch nutzen. 

Neben vielen Varianten genau dies zu tun hat sich bei mir der PWABuilder quasi festgesetzt. Im Agenturalltag ist Geschwindigkeit ein nicht zu unterschätzender Vorteil und es geht nicht so schnell als mit dem PWABuilder.

Jeder einzelne Schritt ist Idiotensicher erklärt. Ihr braucht allerdings auf jeder Plattform Developer Accounts, was bei Apple gleich mal mit 400$ zu Buche schlägt. Auch bei Microsoft und Google braucht ihr mindestens ein Kreditkarte, ich glaube, bei Google waren es 25$ Gebühr. Hier die direkt Links zu Beschreibungen für die Plattformen und die einzelnen Schritte:

• PWA to the iOS App Store
• Android Platform
• Windows Platform

TATATA … Willkommen bei Ihrer neuen App

Zugegeben, die Überschrift dieses Artikel verspricht auf den ersten Blick etwas nicht Haltbares. Schon das Lesen dieses Artikels dauert wesentlich mehr als 10 Minuten. Allerdings ist die Überschrift auch keine hohle Phrase, denn im Alltag, wenn Sie regelmäßig PWAs erstellen, alle Tools und Grafiken installiert und designt, die Beschreibung vorbereitet haben, geht die Erstellung einer PWA App tatsächlich in 10 Minuten. Es ist kein Hexenwerk und Google hat hier eine Möglichkeit geschaffen, die für viele Apps zu erstellen überhaupt erst möglich macht. Ich beschäftige mich auch mit der nativen App Entwicklung, aber: 

Für das, was ich so mache, stellt sich mir immer wieder die Frage: WOZU? 

Sehr bald ist die Welt mit 5g ausgestattet und spätestens dann fühlen sich PWA Apps wie echte Apps an. Zugegeben, aktuell ist hier die Entwicklung noch nicht abgeschlossen, aber schon jetzt ist das App Erlebnis bei Top-Performance Optimierung mehr als brauchbar und es gibt regelmäßige Neuerungen. 

Wir als PRGRSV WEB /nd APP :Agentur haben inzwischen ein ganz simple Logik: 

• APP + WEB = 1

Es gibt keinen Grund “nur” noch Webseiten zu bauen, bei der _PRGRSV WEB /nd APP :Agentur ist jede Webseite automatisch eine PWA und umgekehrt. Wenn Sie es wünschen, stellen wir Ihre App auch in die Stores ein.

Tom Scharlock