Op zoek naar een eenvoudige manier om PWA-pushmeldingen toe te voegen?
Progressive Web Apps (PWA's) zijn apps die op elk apparaat werken. Maar er is altijd enige conflict met het verzenden van web-pushmeldingen. Meestal is het grootste probleem de afleveringspercentages. U kunt web-push toevoegen aan uw PWA op vele manieren. Maar hoe verzendt u web-pushmeldingen die daadwerkelijk worden afgeleverd vanuit uw PWA?
Geen zorgen! In dit artikel laten we u stap voor stap zien hoe u PWA-pushmeldingen kunt verzenden met betrouwbare afleveringspercentages in minder dan 10 minuten.
Laten we beginnen.
TL;DR — Wat is PWA-push? Progressive Web App (PWA) pushmeldingen zijn standaard web-pushberichten die worden geleverd via de geregistreerde service worker van een PWA, waardoor apps die vanaf het web zijn geïnstalleerd pushberichten kunnen ontvangen, zelfs wanneer de webpagina gesloten is.
Verzend PWA-pushmeldingen vandaag nog!
Pushmeldingen zijn een super effectief, goedkoop marketinginstrument om je terugkerende verkeer, betrokkenheid en verkopen op de automatische piloot te laten groeien.
Hoe PWA-pushmeldingen te installeren
Het toevoegen van pushmeldingen aan een Progressive Web App is vrij eenvoudig. Volg gewoon de stappen in dit artikel. Als u elke stap volgt, zou u aan het einde van dit artikel pushmeldingen moeten kunnen verzenden zoals deze:
- Registreer een service worker op de site root die PWA-logica en push-afhandeling combineert.
- Installeer het PushEngage-script en kopieer de installatiecode naar de
<head>. - Configureer de opt-in-modal en maak een campagne aan in het PushEngage-dashboard.
De belangrijkste uitdaging is dat alle web push-notificatiesoftware een Javascript-bestand gebruikt dat service_worker.js heet. De service worker helpt u pushmeldingabonnees te verzamelen via pop-upmodals. Maar alle PWA's hebben al een service worker-bestand dat een ander doel dient. En tegelijkertijd kan uw PWA slechts één service worker gebruiken.
In simpele woorden, web push-services verwarren uw PWA. Dus soms verzamelt het pushmeldingabonnees en soms niet. Soms kunt u meldingen verzenden en soms niet. U kunt zelfs eindigen met het verzenden van pushberichten naar uw volledige abonneelijst en deze slechts aan enkele abonnees laten bezorgen.
We raden aan om PushEngage te gebruiken om PWA-pushmeldingen te verzenden. PushEngage is de nummer 1 pushmelding-software ter wereld. U weet dus dat uw campagnes in veilige handen zijn.
Natuurlijk worden PWA-bouwers zoals Mendix geleverd met hun eigen pushmeldingsysteem. Maar wat als u wilt migreren naar een andere pushmeldingservice? Wat als u meer flexibiliteit en controle wilt over uw pushmeldingscampagnes? Bovendien geven deze services u doorgaans een API om pushcampagnes te maken. Maar met PushEngage krijgt u een eenvoudig te gebruiken dashboard waarmee u pushcampagnes kunt maken, plannen, verzenden en beheren.
En ja, je kunt Firebase Cloud Messaging (FCM) gebruiken om pushmeldingen voor Android-apps te verzenden. Maar met PushEngage kun je pushmeldingen voor Android-apps en web, pushmeldingen voor iOS en iPadOS web en apps, en browserpushmeldingen verzenden.
Het beste deel? Je kunt zelfs krachtige eCommerce pushmeldingen versturen met een paar klikken.
| Feit | Waarde |
|---|---|
| Primair leveringsmechanisme | Service worker (pushabonnement) |
| Typische insteltijd | ~10 minuten (basis) |
| Veelvoorkomende vereiste | Root-scoped service_worker.js + manifest.json |
| Werkt op | De meeste desktopbrowsers en Android (varieert per platform) |
Laten we beginnen.
Stap #1: Stel Je PushEngage Account In
Ga naar de PushEngage homepage en klik op de knop Get Started :
U kunt PushEngage gratis proberen. Als u een kleine blog runt die herhaaldelijk verkeer en betrokkenheid nodig heeft, is dat waarschijnlijk goed genoeg. Maar als u serieus bent over verkopen, moet u het Enterprise-pakket aanschaffen en de geautomatiseerde campagnes ontgrendelen.
Nadat je je hebt aangemeld voor je PushEngage-account, ga je naar je PushEngage-dashboard en ga je naar Site-instellingen » Sitegegevens:
Je kunt hier je logo, sitenaam en site-URL instellen. Het is erg belangrijk om deze zaken nu meteen te regelen, zodat je later je volledige setup kunt testen.
Stap #2: Haal de Installatiecode van PushEngage
Om pushmeldingen te installeren, moet je een installatiecode verkrijgen. Scroll op je Site-instellingen-scherm naar beneden en klik op de knop Klik Hier Voor Installatie-instructies:
Klik vervolgens op het tabblad Elke Site:
Je kunt de Javascript-code gebruiken om pushmeldingen te gaan versturen.
Stap #3: Voeg de Service Worker-code toe voor PWA-pushmeldingen
Het meest lastige deel van het proces is eindelijk hier. In het PushEngage-dashboard onder Setup Instructies ziet u ook een optie om het service worker-bestand te downloaden.
BELANGRIJK: Een PWA kan slechts één actieve service worker-scope tegelijk hebben — voeg pushcode samen in je bestaande service worker. Standaard vereist een PWA geen service worker-bestand. Alles wat je nodig hebt om van elke site een Progressive Web App te maken, is een manifestbestand. Dus, als je PWA geen service worker-bestand heeft, kun je eenvoudig de PushEngage service worker toevoegen aan de hoofdmap van je website of web-app.
Maar als je PWA al een service worker heeft, upload dan NIET rechtstreeks het PushEngage pushmeldingen service worker-bestand zoals het is. Open de PushEngage service worker in een teksteditor zoals Kladblok en kopieer de code uit het PushEngage service worker-bestand. Zoek vervolgens het service worker-bestand van je PWA en voeg eenvoudig de PushEngage service worker-code toe aan het bestand.
Als u deze stap overslaat, kunt u geen abonnees voor pushmeldingen verzamelen.
Stap #4: Configureer de PushEngage Opt-In
Ga nu terug naar je PushEngage-dashboard. Ga naar Ontwerp » Popup-modals en selecteer de opt-in van je keuze:
Het idee hier is om uw bezoekers een goede reden te geven om zich te abonneren. Als u daarbij hulp nodig heeft, bekijk dan ons artikel over hoe u een aangepaste opt-in voor pushmeldingen maakt.
En als u sjablonen wilt om mee te beginnen, moet u dit artikel over hoog converterende pushmelding-opt-ins bekijken.
Stap #5: Maak uw eerste campagne
Nu je PWA pushmeldingen kan verzenden, moet je een daadwerkelijke campagne maken.
Een campagne voor verlaten winkelwagens helpt extra inkomsten te genereren door verlaten winkelwagens te converteren. Het is een eenvoudige herinnering die veel producten automatisch verkoopt. Het is dus een geweldige campagne om elke landingspagina te ondersteunen die directe verkopen oplevert.
Ga gewoon naar uw PushEngage-dashboard en ga naar Campagnes » Geactiveerde campagnes » Maak een nieuwe geactiveerde campagne:
En selecteer vervolgens de campagnetemplate Verlaten winkelwagentje:
Als u nieuw bent met het maken van geautomatiseerde marketingcampagnes, kunt u gewoon ons artikel volgen over hoe u een pushmeldingcampagne voor verlaten winkelwagens instelt. Volg elke stap en u kunt pushmeldingen zoals deze instellen:
En voor het geval u zich afvraagt, u hoeft geen bekende merknaam te zijn om uw pushmeldingcampagnes effectief te laten zijn. Sterker nog, PushEngage is ontwikkeld om kleine bedrijven te helpen groeien met behulp van pushmeldingen.
Maar voordat u uw site gaat promoten, moet u eventuele problemen met uw pushmeldingsabonnementsproces oplossen. Bekijk dit artikel over het testen van uw pushmeldingen. Als alles perfect werkt, bent u klaar!
Veelgestelde vragen
V: Vereist PWA push een service worker?
A: Ja. PWA pushberichten worden geleverd door de geregistreerde service worker, die push-eventafhandeling moet bevatten.
V: Kan ik PWA push op iOS verzenden?
A: iOS-ondersteuning voor op service workers gebaseerde web push is beperkt; Android en desktopbrowsers ondersteunen PWA push breed. (Als je precieze iOS-status hebt, vervang deze dan door de huidige korte verklaring en citeer.)
V: Wat is de meest voorkomende integratiefout?
A: Het uploaden van een aparte Push service worker naar de root zonder deze samen te voegen met de bestaande service worker van de PWA — wat resulteert in conflicten en gemiste abonnementen.
Wat te doen na het toevoegen van PWA-pushmeldingen?
Dat is alles voor deze keer, mensen!
Je kunt nu PWA pushmeldingen verzenden. Tegen die tijd heb je ook een krachtige webpushmeldingscampagne gemaakt om je groei te stimuleren. Dat alles, in minder dan 10 minuten!
Bekijk hoe u ook andere geautomatiseerde pushmeldingscampagnes kunt maken. De meeste pushcampagnes zijn eenvoudig en effectief. We raden daarom aan om meerdere campagnes voor uw site in te stellen. Hier zijn een paar geweldige om mee te beginnen:
- Hoe automatisch RSS-pushmeldingen te verzenden
- Hoe Cart Abandonment Pushmeldingen in te stellen met GTM
- Hoe pushmeldingen eenvoudig te plannen [Gids van 5 minuten]
En als je dat nog niet hebt gedaan, begin dan met PushEngage. PushEngage is de nummer 1 pushmeldingssoftware ter wereld. Je campagnes zijn dus in veilige handen.
