DataFirefly PWA — Komplettanleitung
Installieren, konfigurieren und betreiben Sie die PWA: installierbarer Shop, Web-Push-Benachrichtigungen, Warenkorb-Rückgewinnung per Cron und Offline-Modus für PrestaShop 8 und 9.
Übersicht
Das Modul DataFirefly PWA (dfpwa) verwandelt Ihren PrestaShop-Shop in eine Progressive Web App: Ihre Kunden können ihn auf dem Home-Bildschirm installieren, Web-Push-Benachrichtigungen empfangen und auch offline weiter stöbern. Das Modul ist vollständig eigenständig: Die Verschlüsselung der Benachrichtigungen erfolgt in nativem PHP, ohne Composer, ohne Drittanbieterdienst und ohne Abonnement.
Drei Säulen: ein installierbarer Shop (Symbol auf dem Home-Bildschirm), Push-Benachrichtigungen (Kampagnen, Bestellverfolgung, Warenkorb-Rückgewinnung) und ein Offline-Modus (Service Worker + Fallback-Seite).
Kompatibilität
- PrestaShop 8.0 bis 9.x
- Einzelshop und Multishop
- 5 Sprachen: FR, EN, ES, DE, IT
- Keine Abhängigkeit (weder Composer noch Framework)
Voraussetzungen
- HTTPS erforderlich: PWAs und Web-Push funktionieren nur in einem über HTTPS ausgelieferten Shop. Nahezu jeder Produktivshop verfügt bereits darüber.
- PHP-openssl-Erweiterung: wird für die VAPID-Verschlüsselung der Benachrichtigungen verwendet. Das Modul prüft ihre Verfügbarkeit bei der Installation.
Sind openssl oder die Kurve prime256v1 auf Ihrem Server nicht verfügbar, wird die Installation mit einer eindeutigen Meldung blockiert. Wenden Sie sich an Ihren Hoster, um die Erweiterung zu aktivieren.
Installation
- Öffnen Sie im Back-Office Module > Modul-Manager.
- Klicken Sie auf Modul hochladen und wählen Sie die Datei
dfpwa.zip. - Klicken Sie nach der Installation auf Konfigurieren.
Bei der Installation erzeugt das Modul automatisch Ihre VAPID-Schlüssel (öffentlich und privat) sowie ein Cron-Token, legt die Tabellen für Abonnements und das Versandprotokoll an und registriert die Seite zur Kampagnenkonfiguration im Administrationsmenü.
Konfiguration
Anwendung (PWA)
- App-Name und Kurzname: werden nach der Installation des Shops unter dem Symbol angezeigt.
- Designfarbe und Hintergrundfarbe: werden für die Systemleiste und den Startbildschirm verwendet.
- Anzeigemodus: standalone (Vollbild, empfohlen), fullscreen oder minimal-ui.
- Start-URL: Seite, die beim Start der installierten App geöffnet wird.
- Symbole 192 und 512 px: Laden Sie Ihre eigenen Symbole hoch (PNG oder WebP). Andernfalls wird automatisch das Shop-Logo verwendet.
Installationsbanner
- Banner anzeigen: bietet berechtigten Besuchern die Installation an.
- Anzeigeverzögerung: Anzahl der Sekunden, bevor das Banner erscheint, um die Ankunft auf der Website nicht zu stören.
- iOS-Hinweis: zeigt eine Schritt-für-Schritt-Anleitung „Zum Home-Bildschirm hinzufügen“ für Safari-Nutzer auf iPhone und iPad.
Auf iOS kann die Installation nicht automatisch von der Website ausgelöst werden: Sie erfolgt zwingend über das Teilen-Menü von Safari. Die integrierte Anleitung erklärt dem Besucher jeden Schritt.
Push-Benachrichtigungen
- Push aktivieren: erlaubt Anmeldung und Versand von Benachrichtigungen.
- Vorherige Einwilligung: zeigt eine ausdrückliche Meldung vor der nativen Browser-Aufforderung an, DSGVO-konform.
- Verzögerung vor der Aufforderung: Wartezeit, bevor die Push-Anmeldung angeboten wird.
- VAPID-Betreff: Kontaktadresse (mailto oder URL), die gemäß Spezifikation an die Push-Server übermittelt wird.
- Benachrichtigung bei Bestellstatusänderung: informiert den Kunden automatisch (z. B. Bestellung versendet).
- Warenkorb-Rückgewinnung und Rückgewinnungsverzögerung: lösen eine Benachrichtigung aus, nachdem ein Warenkorb ohne Bestellung zurückgelassen wurde.
Offline-Modus
- Offline-Modus aktivieren: registriert den Service Worker und die Fallback-Seite.
- Cache-Strategie: stale-while-revalidate (sofortige Anzeige, dann Aktualisierung im Hintergrund, empfohlen), Network-First oder Cache-First.
- Titel und Offline-Meldung: Texte, die auf der Fallback-Seite angezeigt werden.
- Pre-Cache: Liste der URLs, die zwischengespeichert werden, sobald der Service Worker installiert wird.
Sensible Seiten (Warenkorb, Kasse, Kundenkonto) werden stets vom Cache ausgeschlossen, damit niemals veraltete Inhalte mit personenbezogenen oder transaktionalen Daten ausgeliefert werden.
Teilen
Aktivieren Sie die native Teilen-Schaltfläche, damit Ihre Kunden eine Produktseite über das Teilen-Fenster ihres Geräts teilen können (Web Share API). Fügen Sie das Attribut data-dfpwa-share zu einem beliebigen Element Ihres Themes hinzu, um es zu einem Teilen-Auslöser zu machen.
Push-Benachrichtigungen: Funktionsweise
Das Modul implementiert Standard-Web-Push (VAPID + Verschlüsselung gemäß RFC 8291 und 8188), vollständig in PHP über openssl. Keine Abonnementdaten verlassen Ihren Server.
Eine Kampagne versenden
- Öffnen Sie die Seite Push-Kampagnen im Administrationsmenü.
- Geben Sie einen Titel, eine Nachricht und eine Ziel-URL ein.
- Richten Sie nach Sprache und Kundengruppe aus, falls erforderlich.
- Nutzen Sie den Testmodus, um sich die Benachrichtigung vor einem Massenversand selbst zuzusenden, und bestätigen Sie dann.
Die Benachrichtigungen werden parallel in Stapeln versendet, und abgelaufene Abonnements (Codes 404 / 410) werden automatisch bereinigt. Jeder Versand wird im Protokoll mit der Anzahl der Empfänger, Zustellungen und Klicks erfasst.
Automatische Auslöser
- Bestellverfolgung: Bei jeder Statusänderung erhält der angemeldete Kunde eine Benachrichtigung (sofern er dem Push zugestimmt hat).
- Abgebrochener Warenkorb: Eine Cron-Aufgabe erkennt Warenkörbe mit Artikeln, die einem angemeldeten Kunden zugeordnet und ohne Bestellung sind, innerhalb des konfigurierten Rückgewinnungsfensters.
Die Warenkorb-Rückgewinnung läuft über eine token-geschützte Cron-Aufgabe. Holen Sie die vollständige Cron-URL von der Konfigurationsseite und fügen Sie sie Ihrem Planer hinzu (z. B. stündlich). Das Token verhindert jeden unbefugten Aufruf.
Offline-Modus: Funktionsweise
Der Service Worker wird dank des Headers Service-Worker-Allowed im Stammbereich des Shops registriert, sodass er alle Seiten steuern kann. Je nach gewählter Strategie liefert er Seiten aus dem Cache, dem Netzwerk oder beidem aus. Wenn die Verbindung vollständig verloren geht und keine zwischengespeicherte Version verfügbar ist, wird eine eigenständige Fallback-Seite in den Farben Ihres Shops angezeigt, mit einer Schaltfläche „Erneut versuchen“ und einem Link zurück zur Startseite.
Dashboard
Die Konfigurationsseite zeigt auf einen Blick die Anzahl der Push-Abonnenten, die Anzahl der versendeten Benachrichtigungen und die Klickrate Ihrer Kampagnen. Da abgelaufene Abonnements automatisch bereinigt werden, bleiben diese Statistiken zuverlässig.
FAQ und Fehlerbehebung
Das Installationsbanner erscheint nicht
Prüfen Sie, dass der Shop über HTTPS ausgeliefert wird, das Modul aktiviert ist und die PWA nicht bereits installiert ist. In Desktop-Browsern erfolgt die Installation oft über das dedizierte Symbol in der Adressleiste. Verwenden Sie auf iOS die Anleitung „Zum Home-Bildschirm hinzufügen“.
Benachrichtigungen werden nicht versendet
Stellen Sie sicher, dass Push aktiviert ist, die VAPID-Schlüssel vorhanden sind (andernfalls wird im Dashboard ein Hinweis angezeigt) und sich Kunden tatsächlich angemeldet haben. Der Testmodus ermöglicht es, die gesamte Versandkette von Anfang bis Ende zu prüfen.
Die Warenkorb-Rückgewinnung wird nicht ausgelöst
Prüfen Sie, dass die Cron-URL tatsächlich von Ihrem Planer aufgerufen wird und das richtige Token enthält. Prüfen Sie außerdem die konfigurierte Rückgewinnungsverzögerung und das Vorhandensein angemeldeter Kunden mit einem berechtigten Warenkorb.
Funktioniert Push auf dem iPhone?
Ja, ab iOS 16.4, aber nur, sobald der Shop auf dem Home-Bildschirm installiert ist. Die iOS-Installationsanleitung ist daher entscheidend, um Push auf diesen Geräten zu aktivieren.