SW Shopware 6 Shopware Gemiddeld

DfPwaPush: complete gids

Uw Shopware-shop omvormen tot een installeerbare PWA en zelfgehoste Web Push-notificaties versturen (VAPID, zonder Firebase en zonder Composer-afhankelijkheid) voor Shopware 6.5, 6.6 en 6.7.

Bijgewerkt Moduleversie 1.0.2

DfPwaPush combineert twee functies in één Shopware-plugin: het maakt van uw storefront een installeerbare Progressive Web App (manifest, service worker, offlinepagina, installatiebanner) en stelt u in staat uw klanten opnieuw te bereiken met volledig zelfgehoste Web Push-notificaties. Geen externe dienst (geen Firebase, geen OneSignal), geen Composer-afhankelijkheid: de Web Push-versleuteling (RFC 8291) en de VAPID-handtekening (RFC 8292) zijn native geïmplementeerd met de extensies OpenSSL en cURL die Shopware toch al vereist. Alle abonnementsgegevens blijven op uw server. Deze gids behandelt de installatie, de PWA- en Push-configuratie, het genereren van de VAPID-sleutels, het aanmaken en versturen van campagnes, de uitvoering op de achtergrond en de probleemoplossing.

Installatie

  1. Download het archief DfPwaPush-1.0.2.zip vanuit uw DataFirefly-account.
  2. Installeer het via Administration → Extensies → Mijn extensies → Extensie uploaden, of kopieer de uitgepakte map DfPwaPush naar custom/plugins/.
  3. Start de installatie en de activering: 
    bin/console plugin:refresh
bin/console plugin:install --activate DfPwaPush
bin/console cache:clear
  4. Bij de installatie maakt de plugin zijn twee tabellen aan (df_push_subscription en df_push_campaign) en registreert hij zijn ScheduledTask voor de verzending.

Compatibel met Shopware 6.5.x, 6.6.x en 6.7.x op één codebase. De administratiemodule wordt vooraf gecompileerd geleverd en de JavaScript van de storefront wordt via Twig ingevoegd: er is geen build nodig, noch build-administration.sh noch een storefront-build. Vereiste PHP-extensies: openssl en curl, beide al vereist door Shopware. Geen extra Composer-afhankelijkheden.

HTTPS-vereiste

Service workers en de Web Push API bestaan alleen op een beveiligde oorsprong. Uw shop moet via HTTPS worden geserveerd (alleen localhost is een uitzondering tijdens ontwikkeling). Op een shop via HTTP blijft de plugin aan de voorkant stil en registreert hij dat in de console van de browser.

Waar u de plugin vindt in de administration

Na de activering verschijnt er een item Pushcampagnes in het menu Marketing van de administration. Daar maakt u uw campagnes aan, plant u ze en volgt u ze op. De volledige PWA- en Push-configuratie gebeurt in de configuratie van de plugin, per verkoopkanaal, via Extensies → Mijn extensies → DfPwaPush → ⋯ → Configureren.

Verschijnt het menu-item na een update niet, voer dan bin/console assets:install && bin/console cache:clear uit en herlaad de administration met een geforceerde verversing (Ctrl+Shift+R).

De VAPID-sleutels genereren

Web Push steunt op een VAPID-sleutelpaar (norm RFC 8292) dat uw server authenticeert bij de pushdiensten van de browsers. Genereer ze met één commando:

bin/console df:pwa-push:vapid:generate

De sleutels worden rechtstreeks in de configuratie van de plugin weggeschreven. Gebruik de optie --force om ze opnieuw te genereren. U kunt ook bestaande VAPID-sleutels in de configuratievelden plakken.

Het opnieuw genereren van de VAPID-sleutels maakt alle bestaande abonnementen ongeldig: reeds geabonneerde browsers kunnen geen notificaties meer ontvangen en moeten zich opnieuw abonneren. Doe dit alleen met kennis van zaken.

PWA-configuratie

De kaart PWA van de configuratie (in te stellen per verkoopkanaal) stuurt de installeerbaarheid van uw shop aan:

  • PWA activeren: serveert het manifest en de service worker.
  • Naam en korte naam van de applicatie: getoond op het startscherm na installatie.
  • Themakleur en achtergrondkleur: standaard #0f172a voor het thema.
  • Weergavemodus: standalone, minimal-ui, fullscreen of browser.
  • Pictogrammen van 192 px en 512 px: PNG-uploads, onmisbaar voor de installeerbaarheid.
  • Installatiebanner: activeert de melding “Toevoegen aan startscherm”.

Zonder de twee pictogrammen van 192 px en 512 px beschouwt Chrome de site niet als installeerbaar en verschijnt de installatiebanner nooit. Dat is oorzaak nummer één van een PWA die aan de voorkant “niets doet”.

Push-configuratie

De kaart Push stuurt de notificaties aan:

  • Web Push activeren: activeert de opt-inbanner en de abonnementsendpoints. Standaard ingeschakeld.
  • Publieke en private VAPID-sleutel: gegenereerd met het bovenstaande commando.
  • VAPID-onderwerp: een mailto:-adres of de URL van uw site.
  • Opt-invertraging: aantal seconden voordat de toestemmingsbanner verschijnt (standaard 8).

De service worker en de endpoints van de storefront

Alle PWA-bronnen worden dynamisch door een controller geserveerd, waardoor ze ongevoelig zijn voor de overstap van webpack naar Vite in 6.7:

  • GET /df-pwa/manifest.json: het PWA-manifest, gegenereerd per verkoopkanaal.
  • GET /df-pwa/sw.js: de service worker (header Service-Worker-Allowed: / om de hele oorsprong te beheren).
  • GET /df-pwa/icon/{192|512}: de PWA-pictogrammen.
  • GET /df-pwa/offline: de offline terugvalpagina, door de service worker in cache gezet.
  • POST /df-pwa/subscribe en POST /df-pwa/unsubscribe: registreren en verwijderen van een abonnement (XHR).

De service worker zet de offlinepagina bij de installatie in cache, serveert een terugval bij mislukte navigaties, en toont de ontvangen notificaties via het event push met bij een klik een doorverwijzing naar de URL van de campagne.

Een campagne aanmaken en versturen

  1. Ga naar Marketing → Pushcampagnes → Campagne aanmaken.
  2. Vul de titel, het bericht en eventueel een doel-URL en een pictogram in.
  3. Beperk de campagne zo nodig tot een verkoopkanaal (anders worden alle abonnees bereikt).
  4. U stelt een planningsdatum in en slaat op, of u klikt op Nu versturen.

“Nu versturen” zet de campagne direct in de wachtrij (status scheduled met een verzenddatum op dit moment); de geplande taak pakt ze binnen enkele minuten op. Een campagne doorloopt de statussen draft → scheduled → sending → sent (of failed), en de kaart toont de tellers voor geslaagde verzendingen en mislukkingen.

Verzending op de achtergrond: ScheduledTask en CLI

Het versturen van de campagnes wordt verzorgd door de ScheduledTask df_pwa_push.send_campaigns, die elke 300 seconden draait. Die haalt de geplande campagnes op waarvan het tijdstip is bereikt en verstuurt ze in batches. U kunt de verzending ook handmatig starten:

bin/console df:pwa-push:send

Zoals elke Shopware ScheduledTask hangt de verzending af van een actieve worker. Zorg dat er een Messenger-consumer draait (bin/console messenger:consume) of dat de Shopware-scheduler regelmatig wordt gestart, anders vertrekken de geplande campagnes niet.

Native Web Push, zonder afhankelijkheden

DfPwaPush implementeert de volledige Web Push-stack in pure PHP, zonder externe bibliotheek:

  • VAPID / ES256 (RFC 8292): genereren van P-256-sleutels via OpenSSL en JWT ES256-handtekening om de server te authenticeren.
  • aes128gcm-versleuteling (RFC 8291): efemere ECDH, HKDF-afleiding en AES-128-GCM-versleuteling van het bericht voor elke abonnee.
  • Parallelle verzending via curl_multi in batches, met verwerking van de retourcodes van de pushdiensten.

De implementatie is byte voor byte gevalideerd tegen de officiële testvector van RFC 8291, wat de interoperabiliteit met Chrome, Firefox, Edge en Safari waarborgt.

Automatische opschoning van de abonnementen

Wanneer een pushdienst antwoordt dat een abonnement niet meer bestaat (HTTP-codes 404 of 410), wordt het betreffende abonnement automatisch gedeactiveerd. Abonnementen die herhaaldelijk mislukken (5 opeenvolgende fouten) worden eveneens gedeactiveerd. Uw abonneebestand blijft zo vanzelf schoon.

Compatibiliteit met iOS en Safari

Op iOS vereist Web Push iOS 16.4 of hoger en dat de PWA op het startscherm is geïnstalleerd: Safari levert geen pushnotificaties aan een gewoon tabblad. De plugin verwerkt dit netjes, want de opt-inbanner verschijnt alleen wanneer de Push API daadwerkelijk beschikbaar is, zodat uw iOS-bezoekers geen loze belofte krijgen.

FAQ en probleemoplossing

De ZIP-installatie mislukt met “package minishlink/web-push ontbreekt”. Die fout betrof eerdere versies. Sinds 1.0.1 is Web Push native en heeft de plugin geen enkele Composer-afhankelijkheid meer: de huidige versie installeert op elke hosting, ook op gedeelde hosting.

Er verschijnt niets om campagnes aan te maken in de backoffice. De administratiemodule wordt sinds 1.0.1 vooraf gecompileerd geleverd. Voer na de update bin/console assets:install && bin/console cache:clear uit en herlaad de administration met een geforceerde cacheverversing (Ctrl+Shift+R). Het item staat onder Marketing → Pushcampagnes.

De URL /df-pwa/manifest.json geeft een 500-fout. Opgelost in 1.0.2: de methode setTwig() van de bovenliggende controller is in Shopware 6.7 verwijderd, waardoor alle routes /df-pwa/* mislukten. Werk bij naar 1.0.2 of hoger.

Er gebeurt niets in de storefront. Open de console van de browser: de plugin registreert elke beslissing met het voorvoegsel [DfPwaPush] (service worker al dan niet geregistreerd, ontbrekende VAPID-sleutel, geweigerde toestemming, iOS zonder geïnstalleerde PWA en dergelijke). Controleer ook of de shop via HTTPS draait.

De PWA-installatiebanner verschijnt niet. Chrome vuurt het event beforeinstallprompt alleen af als de site installeerbaar is, wat de pictogrammen van 192 px en 512 px in de configuratie en een actieve service worker vereist. Zonder pictogrammen geen banner.

De notificatiebanner verschijnt niet. Controleer of de VAPID-sleutels zijn gegenereerd, of Web Push is geactiveerd en of de gebruiker de notificaties niet al heeft geweigerd. De console toont de precieze reden.

Wat gebeurt er bij het verwijderen? Met de optie om de gegevens te wissen worden de tabellen df_push_subscription en df_push_campaign verwijderd. Zonder die optie blijven ze bewaard, zodat uw abonnees en de campagnegeschiedenis behouden blijven.

Was deze pagina nuttig?

Loopt u nog vast? Neem contact op met support