Leder du efter en enkel måde at tilføje PWA push-notifikationer på?
Progressive Web Apps (PWA'er) er apps, der fungerer på enhver enhed. Men der er altid en vis konflikt med at sende web push-notifikationer. Normalt er det største problem leveringsraterne. Du kan tilføje web push til din PWA på mange måder. Men hvordan sender du web push-notifikationer, der rent faktisk bliver leveret fra din PWA?
Bare rolig! I denne artikel vil vi vise dig trin for trin, hvordan du kan sende PWA push-notifikationer med pålidelige leveringsrater på mindre end 10 minutter.
Lad os dykke ned.
TL;DR — Hvad er PWA push? Progressive Web App (PWA) push-notifikationer er standard web push-beskeder leveret via en PWA's registrerede service worker, hvilket giver apps installeret fra nettet mulighed for at modtage push-beskeder, selv når websiden er lukket.
Send PWA Push-notifikationer i dag!
Push-notifikationer er et supereffektivt, billigt marketingværktøj, der hjælper dig med at øge din gentagne trafik, engagement og salg automatisk.
Sådan installeres PWA Push-notifikationer
Det er ret simpelt at tilføje push-notifikationer til en Progressive Web App. Følg blot trinene i denne artikel. Hvis du følger hvert trin, bør du i slutningen af denne artikel kunne sende push-notifikationer som denne:
- Registrer en service worker på webstedets rod, der kombinerer PWA-logik og push-håndtering.
- Installer PushEngage-scriptet og kopier installationskoden ind i
<head>. - Konfigurer opt-in-modalen og opret en kampagne i PushEngage-dashboardet.
Den største udfordring er, at al web push-notifikationssoftware bruger en Javascript-fil kaldet service_worker.js. Service worker hjælper dig med at indsamle push-notifikationsabonnenter via popup-modaler. Men alle PWA'er har allerede en service worker-fil, der tjener et andet formål. Og på et tidspunkt kan din PWA kun bruge én service worker.
Med simple ord forvirrer web push-tjenester din PWA. Så nogle gange vil den indsamle push-notifikationsabonnenter, og nogle gange vil den ikke. Nogle gange kan du sende notifikationer, og nogle gange kan du ikke. Du kan endda ende med at sende push-beskeder til hele din abonnentliste og kun få dem leveret til få abonnenter.
Vi anbefaler at bruge PushEngage til at sende PWA push-notifikationer. PushEngage er den førende push-notifikationssoftware i verden. Så du ved, at dine kampagner er i sikre hænder.
Selvfølgelig kommer PWA-byggere som Mendix med deres eget push-notifikationssystem. Men hvad hvis du vil migrere til en anden push-notifikationstjeneste? Hvad hvis du ønsker mere fleksibilitet og kontrol over dine push-notifikationskampagner? Hvad mere er, at disse tjenester typisk giver dig en API til at oprette push-kampagner. Men med PushEngage får du et brugervenligt dashboard, hvorfra du kan oprette, planlægge, sende og administrere push-kampagner.
Og ja, du kan bruge Firebase Cloud Messaging (FCM) til at sende push-notifikationer til Android-apps. Men med PushEngage kan du sende push-notifikationer til Android-apps og web, push-notifikationer til iOS og iPadOS web og apps, og browser push-notifikationer.
Det bedste? Du kan endda sende kraftfulde eCommerce push-notifikationer med få klik.
| Faktum | Værdi |
|---|---|
| Primær leveringsmekanisme | Service worker (push-abonnement) |
| Typisk opsætningstid | ~10 minutter (grundlæggende) |
| Almindeligt krav | Root-scoped service_worker.js + manifest.json |
| Fungerer på | De fleste desktop-browsere og Android (varierer efter platform) |
Lad os komme i gang.
Trin #1: Opsæt din PushEngage-konto
Gå til PushEngage hjemmeside og klik på knappen Kom i gang :
Du kan prøve PushEngage gratis. Hvis du driver en lille blog, der har brug for gentagen trafik og engagement, er det sandsynligvis godt nok. Men hvis du er seriøs omkring salg, bør du få Enterprise-pakken og låse op for de automatiserede kampagner.
Når du har tilmeldt dig din PushEngage-konto, skal du gå til dit PushEngage-dashboard og gå til Sideindstillinger » Sideoplysninger:
Du kan indstille dit logo, sidenavn og side-URL her. Det er virkelig vigtigt at få styr på disse ting lige nu, så du kan teste hele din opsætning senere.
Trin #2: Hent installationskoden fra PushEngage
For at installere push-notifikationer skal du have en installationskode. På din Sideindstillinger-skærm skal du rulle ned og klikke på knappen Klik her for opsætningsinstruktioner:
Klik derefter på fanen Enhver side:
Du kan bruge Javascript-koden til at begynde at sende push-notifikationer.
Trin #3: Tilføj Service Worker-koden til PWA Push-notifikationer
Den mest tricky del af processen er endelig her. I PushEngage-dashboardet under Opsætningsinstruktioner vil du også se en mulighed for at downloade service worker-filen.
VIGTIGT: En PWA kan kun have ét aktivt service worker-scope ad gangen — flet push-kode ind i din eksisterende service worker. Som standard kræver en PWA ikke en service worker-fil. Alt, hvad du behøver for at omdanne ethvert websted til en Progressive Web App, er en manifestfil. Så hvis din PWA ikke har en service worker-fil, kan du blot tilføje PushEngage service worker til rodmappen på dit websted eller din webapp.
Men hvis din PWA allerede har en service worker på plads, så upload IKKE direkte PushEngage push-notifikations service worker-filen som den er. Åbn PushEngage service worker i en teksteditor som Notesblok, og kopier koden i PushEngage service worker-filen. Find derefter service worker-filen til din PWA, og tilføj simpelthen PushEngage service worker-koden til filen.
Hvis du forsømmer dette trin, vil du ikke kunne indsamle push-notifikationsabonnenter.
Trin #4: Konfigurer PushEngage Opt-In
Gå nu tilbage til dit PushEngage-dashboard. Gå til Design » Popup Modals og vælg den optin, du ønsker:
Idéen her er at give dine besøgende en solid grund til at abonnere. Hvis du har brug for hjælp til det, kan du se vores artikel om hvordan man opretter en brugerdefineret push-notifikations-opt-in.
Og hvis du ønsker nogle skabeloner til at komme i gang, bør du tjekke denne artikel om konverteringsdygtige push-notifikations-opt-ins.
Trin #5: Opret din første kampagne
Nu hvor din PWA kan sende push-notifikationer, bør du oprette en faktisk kampagne.
En kampagne for forladt indkøbskurv hjælper med at generere ekstra indtægter ved at konvertere forladte indkøbskurve. Det er en simpel påmindelse, der sælger mange produkter automatisk. Så det er en god kampagne til at understøtte enhver landingsside, der giver direkte salg.
Gå blot til dit PushEngage dashboard og gå til Kampagner » Udløste Kampagner » Opret En Ny Udløst Kampagne:
Og vælg derefter skabelonen Kurv Forladt kampagne:
Hvis du er ny til at oprette automatiserede marketingkampagner, kan du blot følge vores artikel om hvordan man opsætter en push-notifikationskampagne for forladt indkøbskurv. Følg hvert trin, og du kan opsætte push-notifikationer som denne:
Og bare for en sikkerheds skyld, du behøver ikke at være et kendt mærke for, at dine push-notifikationskampagner er effektive. Faktisk blev PushEngage bygget til at hjælpe små virksomheder med at vokse ved hjælp af push-notifikationer.
Men før du begynder at markedsføre dit websted, bør du rette eventuelle problemer med din push-notifikationsabonnementsproces. Se denne artikel om test af dine push-notifikationer. Hvis alt fungerer perfekt, er du færdig!
Ofte stillede spørgsmål
Spørgsmål: Kræver PWA push en service worker?
Svar: Ja. PWA push-beskeder leveres af den registrerede service worker, som skal inkludere håndtering af push-hændelser.
Spørgsmål: Kan jeg sende PWA push på iOS?
Svar: iOS-understøttelse for service-worker-baseret web push er begrænset; Android og desktop-browsere understøtter PWA push bredt. (Hvis du har præcis iOS-status, erstat med nuværende korte udtalelse og citer.)
Spørgsmål: Hvad er den mest almindelige integrationsfejl?
Svar: Upload af en separat Push service worker til roden uden at flette den med PWAs eksisterende service worker — hvilket resulterer i konflikter og mistede abonnementer.
Hvad skal du gøre efter at have tilføjet PWA Push-notifikationer?
Det var alt for denne gang, folkens!
Du kan nu sende PWA push-notifikationer. Indtil nu har du også oprettet en kraftfuld web push-notifikationskampagne for at øge din vækst. Alt dette på mindre end 10 minutter!
Se, hvordan du også opretter andre automatiserede push-notifikationskampagner. De fleste push-kampagner er enkle og effektive. Så vi anbefaler at opsætte flere kampagner til dit websted. Her er et par gode til at starte med:
- Sådan sendes RSS push-notifikationer automatisk
- Sådan opsætter du push-notifikationer for forladte indkøbskurve ved hjælp af GTM
- Sådan planlægger du push-meddelelser på den nemme måde [5-min. guide]
Og hvis du ikke allerede har gjort det, kom i gang med PushEngage. PushEngage er den #1 push-meddelelsessoftware i verden. Så dine kampagner er i sikre hænder.
