Super progressive Web -Apps
Super progressive Web -Apps
Superpwa hilft dabei, Ihre WordPress -Website progressive Web -Apps progressiv umzuwandeln.
Website besuchen »
BEFRAGE BEGEBNET · WordPress -Plugin · Bewertungen · FAQ · Beiträge
Willkommen im Super PWA Github Repository
⚡️ Demo: Superpwa.com Überprüfen Sie die Videos, um zu wissen, wie es funktioniert
Was sind progressive Web -Apps
Progressive Web Apps (PWA) ist eine neue Technologie, die einen Mittelweg zwischen einer Website und einer mobilen App erstellt. Sie werden wie eine normale App (Web -App) auf dem Telefon installiert und können vom Startbildschirm aufgerufen werden.
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 Rückkehrbesucher erleben fast instantierte Ladezeiten und genießen die großartigen Leistungsvorteile Ihrer PWA!
Super Progressive Web Apps erleichtert es Ihnen, Ihre WordPress -Website einfach in eine progressive Web -App umzuwandeln!
Unterstützen Sie das Projekt
Wenn Sie sich super aufgeregt fühlen und uns auf kleine Weise unterstützen möchten, sollten Sie die Hauptrolle und/oder das Repo teilen! Dies hilft uns, sich bekannt zu machen und die Gemeinschaft auszubauen.
Sie können uns auch durch Folgen in den sozialen Medien unterstützen und über uns teilen.
? Installation
Sobald Superpwa ⚡️ installiert ist, werden Benutzer, die Ihre Website aus einem unterstützten mobilen Gerät stöbern, einen "Hinzufügen zum Startbildschirm" (vom Ende des Bildschirms) und in der Lage sein, Ihre Website auf dem Startbildschirm ihres Geräts zu installieren. Jede besuchte Seite wird lokal auf ihrem Gerät gespeichert und kann auch dann gelesen werden, wenn sie offline sind!
Superpwa ist einfach zu konfigurieren, es dauert weniger als eine Minute, um Ihre progressive Web-App einzurichten! Superpwa führt eine saubere Deinstallation durch, indem sie jeden Datenbankeintrag und jede Datei entfernen, die sie erstellt hat. Tatsächlich wird keine der Standardeinstellungen in der Datenbank gespeichert, bis Sie sie beim ersten Mal manuell speichern. Probieren Sie es aus.
Progressive Web -App -Mindestanforderungen
Videos darüber, wie Sie zum Startbildschirm und progressiven Web -Apps hinzufügen, funktioniert auf verschiedenen Browsern
Google Chrome für Android |
Mozilla Firefox für Android |
Microsoft Edge für Android |
Samung Internet für Android |
PWA auf iOS - Safari -Browser |
|---|
Detaillierte Dokumentationen zum Testen von PWA auf Browsern
- PWA auf Chrome für Android
- PWA auf Desktop - Chrom
- PWA auf iOS -Gerät - Safari -Browser
- PWA auf Microsoft Edge Browser für Android
- PWA auf Samsung Internet Browser für Android
? Was ist in der Box?
Hier sind die aktuellen Funktionen von Super Progressive Web Apps:
- Generieren Sie ein Manifest für Ihre Website und fügen Sie es dem Leiter Ihrer Website hinzu.
- Legen Sie das Anwendungssymbol für Ihre progressive Web -App fest.
- Stellen Sie die Hintergrundfarbe für den Begrüßungsbildschirm Ihrer progressiven Web -App ein.
- Ihre Website zeigt den Hinweis "zum Startbildschirm hinzufügen", wenn er in einem unterstützten Browser zugegriffen wird.
- Aggressives Zwischenspeichern von Seiten mit Cachestorage -API.
- Seiten, sobald zwischengespeichert wird, werden auch dann serviert, wenn der Benutzer offline ist.
- Stellen Sie die benutzerdefinierte Offline -Seite fest: Wählen Sie die Seite aus, auf der der Benutzer feststellt, wann auf eine Seite, auf die sich im Cache befindet, zugegriffen wird und der Benutzer offline ist.
- Neu in Version 1.2: Unterstützung für Themenfarben.
- Neu in Version 1.2: Jetzt können Sie den Anwendungsnamen und den Anwendungsnamen bearbeiten.
- Neu in Version 1.2: Setzen Sie die Startseite Ihrer PWA.
- Neu in Version 1.2: AMP -Version (AMP) der Beschleunigung der Startseite festlegen. Unterstützte Plugins: AMP für WordPress, AMP für WP, Better AMP, Amp Supremacy, WP Amp.
- Neu in Version 1.3: Unterstützung für einen hochwertigen Begründungsbildschirm hinzugefügt. Sie können jetzt das 512x512 -Symbol für den Begrüßungsbildschirm Ihrer progressiven Web -App festlegen.
- Neu in Version 1.3: Super progressive Web -Apps sind jetzt für Inhaltsaktualisierungen und aktualisiert den Cache, während Sie die Website aktualisieren.
- Neu in Version 1.3: Verbesserte In-Browser-Servicearbeiter-Update-Handhabung.
- Neu in Version 1.4: Sie können jetzt die Standardausrichtung Ihrer PWA festlegen. Wählen Sie aus "Any" (Folgen Sie Geräteorientierung), "Porträt" und "Landschaft".
- Neu in Version 1.4: Sie können jetzt die Eigenschaft themen_color im Manifest festlegen.
- Neu in Version 1.5: Onesignal Integration für Push -Benachrichtigungen.
- Neu in Version 1.6: WordPress Multisite -Netzwerkkompatibilität.
- Neu in Version 1.7: Add-Ons for Superpwa ist da! Schiffe mit UTM-Tracking-Add-On, um Besuche von Ihrer PWA zu verfolgen.
- Neu in Version 1.8: Kompatibilitätsprobleme mit Onesignal sind jetzt gelöst!
- Neu in Version 1.8: Neues Add-On: Apple Touch-Symbole, das Ihre App-Symbole als Apple Touch-Symbole festlegt.
- Neu in Version 2.0: Superpwa ist jetzt mit WordPress kompatibel, die in einem Unterordner installiert sind.
- Neu in Version 2.0: Sie können jetzt die Anzeigeeigenschaft aus Superpwa -Einstellungen festlegen.
- Neu in Version 2.1.1: Unterstützung für Maskabale -Symbole.
? Bevorstehende Funktionen:
- Offline -Indikator -Hinweis.
Geräte- und Browserunterstützung für PWA
| Chrom | Firefox | Rand | Oper | Safari | Samsung | UC -Browser | Mutig |
|---|
| Zum Startbildschirm hinzufügen | | | | | | | | |
| Servicearbeiter | | | | | | | | |
| Web -Push & Benachrichtigungen | | | | | | | | |
| Zahlungsanforderung API | | | | | | | - - | - - |
| Meta -Themenfarbe | | - - | - - | - - | - - | | - - | |
Unterstützte Beta oder teilweise Unterstützung in der Entwicklung
Progressive Web -Apps benötigen Browser, die Manifeste und Servicearbeiter unterstützen. Derzeit sind Google Chrome (Version 57+), Chrome für Android (62), Mozilla Firefox (57), Firefox für Android (58) die wichtigsten Browser, die PWA unterstützen.
Die Liste wächst schnell und wird wahrscheinlich bis Ende dieses Jahres in den meisten großen Browsern unterstützt.
Warum progressive Web -Apps erstellen?
So konvertieren Sie Ihre WordPress -Website in eine progressive Web -App
WordPress -Installation
- Besuchen Sie WordPress Admin> Plugins > Neu hinzufügen
- Suchen Sie nach super progressiven Web -Apps
- Klicken Sie auf " Jetzt installieren " und dann " aktivieren " super progressive Web -Apps
Manuell installieren:
- Laden Sie den Ordner Super-Progressive-Web-Apps auf/wp-content/plugins/verzeichnis auf Ihrem Server hoch.
- Gehen Sie zu WordPress Admin> Plugins
- Aktivieren Sie das Super -Progressive -Web -Apps -Plugin aus der Liste.
Anpassen Ihrer progressiven Web -App
Ihre progressive Web -App sollte bereit sein, mit den Standardeinstellungen nach Aktivierung zu testen. Sie können es weiter anpassen und es wirklich zu Ihrem eigenen machen.
- Gehen Sie zu WordPress Admin> " Superpwa "> Einstellungen
- Stellen Sie eine Hintergrundfarbe ein, damit der Begrüßungsbildschirm angezeigt wird, wenn Ihre PWA auf einem mobilen Gerät geöffnet wird.
- Stellen Sie das Anwendungssymbol ein. Dies ist das Symbol Ihrer PWA, wenn es dem Homescreen in einem mobilen Gerät hinzugefügt wird. Das Symbol muss ein PNG -Bild und genau 192 x 192 Pixel Größe sein.
- Stellen Sie die Offline -Seite ein. Diese Seite wird angezeigt, wenn der Benutzer offline ist und die von ihm angeforderte Seite nicht bereits zwischengespeichert wird. Idealerweise sollten Sie eine dedizierte WordPress -Seite erstellen und hier festlegen. In der von Ihnen erstellten Seite können Sie eine Notiz hinzufügen, die lautet: "Es sieht so aus, als wären Sie offline und die von Ihnen angeforderte Seite ist momentan nicht verfügbar. Bitte schauen Sie erneut nach, sobald Sie online sind."
- Klicken Sie auf "Einstellungen speichern".
Testen Sie Ihre progressive Web -App
- Öffnen Sie einen unterstützten Browser in einem unterstützten Gerät (für EG: Chrom für Android (62 oder höher) in einem Android -Gerät)
- Geben Sie Ihre Website ein und warten Sie, bis sie voll belastet ist
- Sie sollten ein Pop-up mit Ihrem Anwendungssymbol und einer Schaltfläche mit der Aufschrift "Hinzufügen zum Startbildschirm" sehen.
- Klicken Sie darauf und Ihre PWA wird Ihrem Startbildschirm hinzugefügt. Warten Sie, bis die Installation abgeschlossen ist.
- Gehen Sie zu Ihrem Startbildschirm und öffnen Sie Ihre PWA. Suchen Sie in ein paar Seiten, wenn Sie möchten. Schließen Sie die App.
- Trennen Sie das Internet und öffnen Sie jetzt Ihre PWA erneut. Sie sollten in der Lage sein, alle Seiten zu sehen, die Sie zuvor durchsucht haben.
- Besuchen Sie eine Seite, die Sie zuvor nicht besucht haben. Sie sollten die Seite, die Sie als "Offline -Seite" in den Einstellungen von Superpwa festgelegt haben.
? Über uns
Wir sind ein Duo, das über die Idee begeistert war. Unsere Mission ist einfach: Helfen Sie Ihnen, eine fantastische PWA aufzubauen, die Ihre Benutzer auf ihrem Startbildschirm haben möchten. Als wir zum ersten Mal von PWA hörten, wollten wir alles darüber lernen. Wir haben unzählige Stunden gelernt und wollen es mit der Welt teilen. Bitte geben Sie uns Ihr konstruktives Feedback und Ihre Unterstützung.
⛷️ Unterstützung
Dies ist ein Entwicklerportal für super progressive Web -Apps und sollte nicht zur Unterstützung verwendet werden. Bitte besuchen Sie die Support -Foren.
? Meldung von Fehler
Wenn Sie jemals stecken bleiben, sind wir hier, um Ihren Rücken zu beobachten! Öffnen Sie ein neues Support -Thema, wenn Sie eine Frage haben oder eine Funktion benötigen. Wir freuen uns sehr, Ihr Feedback zu hören, und wir möchten Ihnen helfen, die beste progressive Web -App für Ihre WordPress -Website zu erstellen!
? Beiträge
Jeder ist herzlich eingeladen, zu Super PWA beizutragen, um es super zu machen.
Es gibt verschiedene Möglichkeiten, wie Sie einen Beitrag leisten können:
- Sprüche ein Problem auf Github.
- Folgen Sie uns in den sozialen Medien und beschäftigen Sie sich mit uns
Auf Twitter teilen
Auf Facebook teilen
Teilen auf linkedIn
? Changelog
superpwa.com/changelog/.
Emoji Credits: Emojipedia Social Media Ikon -Credits: Flaticon
⬆ Zurück nach oben
