Herzlich willkommen zu diesem WordPress-Tipp der Woche.
Diese Woche geht es um progressive Web-Apps bzw. in Kurz PWAs und wie Sie diese auf Ihrer
WordPress-Seite aktivieren können.
Eine progressive Web-App ist nichts weiter als eine kleine Applikation, also ein Programm,
das sich der Besucher runterladen kann und auch offline dann benutzen kann, um Ihre Webseite
zu betrachten.
Damit Sie das vielleicht näher verstehen, probieren wir das einfach einmal aus.
Und zwar kann ich hier in der Adresszeile eine Seite aufrufen, die das zum Beispiel
schon aktiv hat.
Zum Beispiel unsere Anleitungsseite.
Und jetzt gibt es verschiedene Browser, die dann hier oben rechts schon signalisieren
App verfügbar und wenn ich hier dann drauf klicke, dann wird mir der Browser entsprechend
vorschlagen, installieren Sie RZE WordPress Dokumentation.
Diese Webseite kann als Anwendung installiert werden.
Zum Vergleich zeige ich das noch einmal in einem weiteren Browser, und zwar in Google
Chrome.
Hier kann ich, wenn ich WordPress.rzd.fau.de aufrufe, eine entsprechende Web-Applikation
herunterladen und auch hier signalisiert der Browser kurz, dass es eine App gibt.
Man hat hier kurz das Installieren gesehen, das hier aufgeploppt ist und wenn ich hier
jetzt auch drauf klicke, dann kann ich hier auch sehen, dass mich der Browser fragt, ob
ich die App installieren möchte.
Was ist jetzt mit einer App gemeint?
Wenn ich hier jetzt auf installieren klicke, dann installiert mir der Computer das als
eigenes Programm.
Man sieht das dann hier unten in dem entsprechenden Doc bei mir, dass es dann hier eine neue App
gibt, mit dem Bild, also mit einem Bild, einem App-Icon und dann RZE WordPress Dokumentationen.
Zum Vergleich, wenn ich das Launchpad öffne und auch hier die entsprechende App aufrufe,
dann kann ich hier ein neues Icon sehen, wie bei den anderen Programmen, die ich installiert
habe.
Und ich kann dieses Programm natürlich auch nehmen und zum Beispiel in mein Doc ziehen,
also in meine Menüleiste ziehen.
Bei Windows verhält sich das Ganze natürlich ähnlich.
Auch dort haben Sie dann eine Desktop-Verknüpfung und wenn Sie diese Seite immer aufrufen möchten,
dann können Sie ab sofort das Icon einfach anklicken und die Seite wird sich öffnen.
Egal ob Sie mit dem Internet verbunden sind oder nicht, normalerweise haben Sie dann hier
die Inhalte parat.
Das ist also der Vorteil von einer progressiven Web-App, auch wenn man offline ist und vorher
der Computer die Seite geladen hat, können Sie auf die Seite navigieren und die Seite
verwenden wie eine normale App, wie ein eigenes Programm.
Was ist jetzt vielleicht noch der Unterschied zu einem normalen Internet-Browser?
Und zwar ist das einfach der Unterschied, dass man keine Adresszeile hat in dieser App.
Stattdessen kann man sich auf der Seite natürlich durch klicken bewegen.
Man kann aber auch auf die Überseiten navigieren, wenn man zum Beispiel dann darauf klickt.
Man sieht hier schon, man hat die Möglichkeit immer über dieses X am oberen linken Rand
dann einfach wieder zurück auf die Hauptnavigation, Ihre Internetseite zu gelangen.
Aktuell unterstützen nicht alle Internet-Browser diese progressiven Web-Apps.
Ich bin mir allerdings sicher, dass dieses Feature in den kommenden Jahren natürlich
von den verschiedenen Internet-Browsern dann auch komplett unterstützt wird.
Wie bei jedem WordPress-Tipp der Woche kommt jetzt auch die Frage, gut, das ist ein schönes
Feature, aber wie setzt man es auf der eigenen Webseite um?
Und das ist diesmal einfacher als bei allen anderen Tipps.
Zuerst meldet man sich an auf der eigenen Internetseite.
Im Anschluss bin ich im Dashboard und navigiere auf die Plugin-Übersichtseite.
Auf der Übersichtseite suche ich jetzt das Plugin PWA.
RZE PWA.
Sobald das Plugin aktiviert ist, wird es blau hinterlegt.
Und jetzt finde ich unter Einstellungen PWA die Möglichkeit die Web-Applikation zu aktivieren.
Hierfür setze ich unter Aktiviert einen Haken, wie man das hier auch auf der Anleitungsseite
sieht.
Im Anschluss vergebe ich einen App-Namen, der sollte idealerweise kurz sein.
Zum Beispiel könnte ich hier vielleicht noch das RZE WordPress zu einem WP und das Dokumentation
zu einem Doku benennen, wenn ich das möchte.
Ich lasse es allerdings in der Langform, da ich auch hier unten noch mal die Möglichkeit
habe einen Kurznamen zu hinterlegen.
Dann kann ich eine kurze Beschreibung vergeben und auch auswählen, was die Startseite meiner
Applikation ist.
Das muss nicht die Startseite selbst sein, sondern ich könnte zum Beispiel auch eine
bestimmte Themenseite auswählen, wenn mir das lieber ist.
Oder eine bestimmte andere Startseite vielleicht für eine PWA extra nochmal erstellen.
Ich lasse es einfach auf der Startseite, da ich denke, dass dort die wichtigsten Beiträge
immer erscheinen.
Ich habe auch die Möglichkeit eine Offline-Seite bereitzustellen.
Das könnte eine Inhaltsseite sein, die entsprechend einen Kommentar enthält, dass die Seite zur
Zeit offline ist.
Ich lasse das Ganze auf Standard und das bedeutet nichts anderes als im Standard-Modus, dass
dann die klassische Startseite auch verwendet wird, wie man das hier unten sieht.
Jetzt gibt es hier die Möglichkeit, ein App-Icon zu hinterlegen und ein Splash-Screen-Icon.
Was heißt das jetzt?
Das ist einfach das Icon, das man hier gesehen hatte in dieser Applikation.
Also hier unten im Doc sieht man jetzt diese Frau, die gerade am Lesen ist und das kann
man hier entsprechend aus der WordPress-Mediathek auswählen.
Hierfür kann man also ein Icon in der entsprechenden Größe hochladen, einmal 192 x 192 Pixel
und einmal 512 x 512 Pixel.
Unter diesem Beitrag finden Sie auch ein paar Beispiel-Icons, die Sie auch gerne benutzen
können.
Diese sind von ManyPixels.co und zwar bieten die immer ein paar gratis Illustrationen an,
die sehr schön sind, wo man auch theoretisch dann sich sein eigenes Icon basteln kann,
wer da Lust und Laune hat.
Nachdem Sie also ein Icon dann in die Mediathek hochgeladen haben und auch ausgewählt haben,
können Sie einfach auf Änderungen speichern klicken und diese progressive Web-Applikation
steht für Ihre Seitenbesucher ab sofort zur Verfügung.
Hier auch nochmal der Hinweis, wenn Ihnen Fehler auffallen oder falls Sie doch mal einen
Fehler entdecken, dann schreiben Sie uns an webmaster.fau.de.
Wir freuen uns natürlich immer über Feedback und auch Fehlermeldungen, damit wir diese
dann für die nächsten Nutzer beheben können.
Nach dem Speichern steht Ihre Web-Applikation dann zur Verfügung, das heißt Sie können
dann natürlich auch Ihre eigene Seite entsprechend als Web-Applikation herunterladen über den
entsprechenden Button, den es hier oben im Chrome oder Edge Browser eben gibt.