Super Progressive Web Apps

Progressive Web Apps (PWA) ist eine neue Technologie, die das Beste aus dem mobilen Web und das Beste aus mobilen Apps kombiniert, um ein überlegenes mobiles Web-Erlebnis zu schaffen. Sie werden wie normale Apps (Web-Apps) auf dem Telefon installiert und können vom Startbildschirm aus aufgerufen werden.

„Startseite | Dokumentation | Hilfe | Premium-Version Funktionen„

Benutzer können auf Ihre Website zurückkehren, indem sie die App von ihrem Startbildschirm aus starten und über eine app-ähnliche Oberfläche mit Ihrer Website interagieren. Ihre wiederkehrenden Besucher werden nahezu sofortige Ladezeiten erleben und von den großartigen Leistungsvorteilen Ihrer PWA profitieren!

Super Progressive Web Apps macht es dir leicht, deine WordPress-Website sofort in eine Progressive Web App umzuwandeln!

Sobald SuperPWA installiert ist, werden Benutzer, die Ihre Website von einem unterstützten Mobilgerät aus durchsuchen, eine „Zum Startbildschirm hinzufügen“ -Benachrichtigung (von unten auf dem Bildschirm) sehen und Ihre Website auf dem Startbildschirm ihres Geräts ‚installieren‘ können. Jede besuchte Seite wird lokal auf ihrem Gerät gespeichert und kann auch im Offline-Modus gelesen werden!

SuperPWA lässt sich einfach konfigurieren und es dauert weniger als eine Minute, um deine Progressive Web App einzurichten! SuperPWA führt eine saubere Deinstallation durch, indem es jeden Datenbankeintrag und jede Datei entfernt, die es erstellt hat. Tatsächlich werden keine der Standard-Einstellungen in der Datenbank gespeichert, bis du sie das erste Mal manuell speicherst. Probiere es einfach aus.

Und das Beste? Wenn du jemals stecken bleibst, sind wir hier, um auf dich aufzupassen! Öffne ein Support-Ticket, wenn du eine Frage hast oder eine Funktion benötigst. Wir sind super begeistert, dein Feedback zu hören, und wir möchten dir wirklich dabei helfen, die beste Progressive Web App für deine WordPress-Website zu erstellen!

Schnelle Demo?

• Öffne SuperPWA.com auf einem unterstützten Gerät.
• Füge die Webseite entweder von der „Zum Startbildschirm hinzufügen“-Aufforderung (Chrome für Android) oder vom Browser-Menü auf deinen Startbildschirm hinzu.
• Öffne die App auf deinem Startbildschirm und du wirst den Splashscreen sehen.
• Schalte deine Daten und dein WLAN aus, um offline zu gehen und öffne die App. Du wirst immer noch in der Lage sein, die App zu sehen und die Seiten zu durchsuchen, die du bereits besucht hast.
• Öffne eine Seite, die du bisher noch nicht besucht hast. Die Offline-Seite wird angezeigt.

Danke PWA-Enthusiasten!

Wir sind dem Feedback aus der Community sehr dankbar. Danke an alle, die an uns geglaubt haben und unser Plugin ausprobiert haben. Euer Feedback war von unschätzbarem Wert und wir haben viel aus euren Erfahrungen gelernt. Vielen Dank für eure Liebe und Unterstützung und wir hoffen, diese Liebe zurückzugeben, indem wir unser Bestes geben, um euch das beste Progressive Web Apps Plugin für WordPress zu bieten!

Was wird mitgeliefert?

Hier sind die aktuellen Funktionen von Super Progressive Web Apps:

• Erstellt ein Manifest für deine Website und fügt es dem Kopf-Bereich deiner Website hinzu.
• Lege das Anwendungssymbol für deine Progressive Web App fest.
• Stelle die Hintergrundfarbe für den Startbildschirm deiner Progressiven Web App ein.
• Deine Website wird die Benachrichtigung „Zum Startbildschirm hinzufügen“ anzeigen, wenn sie in einem unterstützten Browser aufgerufen wird.
• Aggressives Caching von Seiten mithilfe der CacheStorage API.
• Einmal zwischengespeicherte Seiten werden auch dann angezeigt, wenn der Benutzer offline ist.
• Lege eine benutzerdefinierte Offline-Seite fest: Wähle die Seite aus, die der Benutzer sehen soll, wenn eine Seite, die nicht im Cache ist, aufgerufen wird und der Benutzer offline ist.
• Neu in Version 1.2: Unterstützung für das theme-color-Meta-Element. Ändere die Farbe der Browser-Adressleiste von Chrome, Firefox OS und Opera, um zu deiner Website-Farbe zu passen.
• Neu in Version 1.2: Jetzt kannst du den Anwendungsnamen und den Anwendungskurznamen bearbeiten.
• Neu in Version 1.2: Lege die Startseite deiner PWA fest.
• Neu in Version 1.2: Setze Beschleunigte Mobile Seiten (AMP) Version der Startseite. Unterstützte Plugins: AMP für WordPress, AMP für WP, Besser AMP, AMP Überlegenheit, WP AMP.
• Neu in Version 1.3: Unterstützung für hochwertige Startbildschirme hinzugefügt. Du kannst nun das 512×512 Icon für den Startbildschirm deiner Progressive Web App festlegen.
• Neu in Version 1.3: Super Progressive Web Apps berücksichtigen jetzt Inhaltsaktualisierungen und aktualisieren den Cache, während du die Webseite aktualisierst.
• Neu in Version 1.3: Verbesserte Behandlung von Aktualisierungen des Service Workers im Browser.
• Neu in Version 1.4: Du kannst jetzt die Standardausrichtung deiner PWA festlegen. Wähle zwischen „beliebig“ (Folge der Geräteausrichtung), „Hochformat“ und „Querformat“.
• Neu in Version 1.4: Du kannst jetzt die theme_color-Eigenschaft im Manifest festlegen.
• Neu in Version 1.5: Integration von OneSignal für Push-Benachrichtigungen.
• Neu in Version 1.6: WordPress Multisite Netzwerk-Kompatibilität.
• Neu in Version 1.7: Die Add-Ons für SuperPWA sind da! Lieferung mit UTM Tracking Add-On zur Verfolgung der Besuche über deren PWA.
• Neu in Version 1.8: Kompatibilitätsprobleme mit OneSignal sind jetzt behoben!
• Neu in Version 1.8: Neues Add-On: Apple Touch Icons, das deine App-Symbole als Apple Touch Icons festlegt
• Neu in Version 2.0: SuperPWA ist jetzt kompatibel mit WordPress, das in einem Unterordner installiert ist.
• Neu in Version 2.0: Du kannst nun die Anzeige-Eigenschaft über die SuperPWA-Einstellungen festlegen.
• Neu in Version 2.1.1: SuperPWA unterstützt jetzt maskierbare Icons.
• Neu in Version 2.1.15: SuperPWA unterstützt jetzt monochromes Icon.
• Vollständige Änderungsliste

Kommende Funktionen

• Mitteilung über den Offline-Status.

Die PRO Version unterstützt zusätzliche erweiterte Funktion * Call To Action (CTA) Mehr Infos * Android APK APP Generator Mehr Infos * Datenanalyse Weitere Infos * Vorlader Weitere Infos * App-Verknüpfungen Weitere Infos * QR-Code-Generator Weitere Infos

Mindestanforderungen für Progressive Web Apps

Progressive Web Apps erfordern, dass deine WordPress-Website von einem sicheren Ursprung aus geladen wird, das heißt, deine Website sollte HTTPS und nicht HTTP nutzen. Wenn deine Website nicht HTTPS ist, kontaktiere bitte deinen Anbieter diesbezüglich. Du kannst uns auch gerne fragen, wenn du Hilfe benötigst.

Geräte und Browser-Unterstützung für PWA

Progressive Web-Apps benötigen Browser, die Manifeste und Service Worker unterstützen. Derzeit unterstützen Google Chrome (Version 57+), Chrome für Android (62), Mozilla Firefox (57) und Firefox für Android (58) PWA, welche die wichtigsten Browser sind.

Die Liste wächst schnell und wird höchstwahrscheinlich bis Ende dieses Jahres von den meisten gängigen Browsern unterstützt.

Wie du deine WordPress-Website in eine Progressive Web App umwandelst

WordPress Installation

• Besuche WordPress Admin-Bereich > Plugins > Installation
• Suche nach ‚Super Progressive Web Apps‘.
• Klicke auf „Jetzt installieren“ und dann auf „Aktivieren“ für Super Progressive Web Apps.

Manuell installieren:

• Lade den Ordner „super-progressive-web-apps“ in das Verzeichnis „/wp-content/plugins/“ auf deinem Server hoch.
• Gehe zum WordPress Admin-Bereich > Plugins.
• Aktiviere das Super Progressive Web Apps-Plugin aus der Liste.

Anpassen deiner Progressiven Web-App

Deine Progressive Web App sollte mit den Standard-Einstellungen bereit zum Testen sein, wenn diese aktiviert wird. Du kannst sie weiter anpassen und dir zu eigen machen.

• Gehe zu WordPress Admin > SuperPWA
• Lege eine Hintergrundfarbe für den Startbildschirm fest, der angezeigt wird, wenn deine PWA auf einem mobilen Gerät geöffnet wird.
• Lege das Anwendungssymbol fest. Dies wird das Symbol deiner PWA sein, wenn sie auf dem Startbildschirm auf einem mobilen Gerät hinzugefügt wird. Das Symbol muss ein PNG-Bild sein und genau 192 x 192 Pixel groß sein.
• Stelle die Offline-Seite ein. Diese Seite wird angezeigt, wenn der Benutzer offline ist und die angeforderte Seite noch nicht zwischengespeichert ist. Am besten erstellst du eine dedizierte WordPress-Seite und legst sie hier fest. Innerhalb der von dir erstellten Seite könntest du eine Notiz hinzufügen, die besagt: „Es scheint, dass du offline bist und die von dir angeforderte Seite gerade nicht verfügbar ist. Bitte versuche es erneut, sobald du online bist.“
• Klicke auf „Einstellungen speichern“.

Teste deine Progressive Web App.

• Öffne einen unterstützten Browser auf einem unterstützten Gerät (zum Beispiel Chrome für Android (62 oder höher) auf einem Android-Handy).
• Gib deine Webseite ein und warte, bis sie vollständig geladen ist.
• Du solltest ein Pop-up sehen, das dein Anwendungssymbol und einen Button mit der Aufschrift „ZUM STARTBILDSCHIRM HINZUFÜGEN“ hat.
• Klicke darauf und deine PWA wird deinem Startbildschirm hinzugefügt. Warte bis die Installation abgeschlossen ist.
• Gehe auf deinen Startbildschirm und öffne deine PWA. Durchsuche ein paar Seiten, wenn du möchtest. Schließe die App.
• Trenne dich vom Internet und öffne nun erneut deine PWA. Du solltest in der Lage sein, alle Seiten zu sehen, die du zuvor durchsucht hast.
• Versuche, eine Seite zu besuchen, die du zuvor noch nicht besucht hast. Du solltest die Seite sehen, die du als deine „Offline-Seite“ in den Einstellungen von SuperPWA festgelegt hast.

Fehlerbehebung für deine Progressive Web App

Uh, oh. Deine PWA hat nicht wie erwartet funktioniert? Du siehst die Benachrichtigung „Zum Startbildschirm hinzufügen“ nicht?

• Stelle sicher, dass deine Webseite über ein installiertes SSL-Zertifikat verfügt. Das bedeutet, deine Webseite sollte https anstatt http verwenden (wie zum Beispiel https://your-domain.com).
• Stelle sicher, dass du ein unterstütztes Gerät und einen unterstützten Browser verwendest. Beachte die „Geräte- und Browserunterstützung für PWA“-Liste oben.
• Stelle sicher, dass dein Anwendungsicon und dein Startbildschirmicon im PNG-Format vorliegen und jeweils eine Größe von 192px x 192px bzw. 512px x 512px haben
• Leere den Browser-Cache und versuche es erneut. In Chrome für Android gehe zu Einstellungen > Datenschutz > „Browserdaten löschen“.
• Wenn das Anwendungs-Symbol sich nach der ersten Installation nicht aktualisiert, lösche die PWA von deinem Telefon, leere den Browser-Cache und installiere erneut. (Wir arbeiten daran, es zu verbessern.)
• Erstelle eine neue Supportanfrage und teile einen Link zu deiner Webseite. Wir schauen uns das an und finden eine Lösung für dich.

Funktionsanfragen, Probleme, Pull-Anfragen

Hier ist unser Repository auf Github. Sende uns gerne deine Pull Requests, Feature Requests oder Probleme, wenn du welche hast.

Über uns

Wir sind ein Duo, das von der Idee begeistert ist. Unsere Mission ist einfach: Dir dabei zu helfen, eine großartige PWA aufzubauen, die deine Benutzer auf ihrem Startbildschirm haben möchten.

Als wir zum ersten Mal von PWAs gehört haben, wollten wir alles darüber lernen. Wir haben unzählige Stunden damit verbracht, zu lernen und möchten es gerne mit der Welt teilen.

Bitte gib uns dein konstruktives Feedback und deine Unterstützung.