Letar du efter ett enkelt sätt att lägga till PWA push-notiser?
Progressive Web Apps (PWA) är appar som fungerar på alla enheter. Men det finns alltid en viss konflikt med att skicka webb push-notiser. Vanligtvis är det största problemet leveransfrekvensen. Du kan lägga till webb push till din PWA på många sätt. Men hur skickar du webb push-notiser som faktiskt levereras från din PWA?
Oroa dig inte! I den här artikeln kommer vi att visa dig steg för steg hur du kan skicka PWA push-notiser med pålitlig leveransfrekvens på mindre än 10 minuter.
Låt oss dyka in.
TL;DR — Vad är PWA push? Progressive Web App (PWA) push-notiser är standard webb push-meddelanden som levereras via en PWAs registrerade service worker, vilket gör att appar installerade från webben kan ta emot push-meddelanden även när webbsidan är stängd.
Skicka PWA Push-notiser Idag!
Push-notiser är ett super effektivt, billigt marknadsföringsverktyg som hjälper dig att öka din återkommande trafik, ditt engagemang och din försäljning automatiskt.
Hur man installerar PWA Push-notiser
Att lägga till push-notiser till en Progressive Web App är ganska enkelt. Följ bara stegen i den här artikeln. Om du följer varje steg, i slutet av den här artikeln, bör du kunna skicka push-notiser som denna:
- Registrera en service worker vid webbplatsens rot som kombinerar PWA-logik och push-hantering.
- Installera PushEngage-skriptet och kopiera installationskoden till
<head>. - Konfigurera opt-in-modulen och skapa en kampanj i PushEngage-instrumentpanelen.
Den största utmaningen är att all webb push-notisprogramvara använder en Javascript-fil som heter service_worker.js. Service workern hjälper dig att samla push-notisabonnenter genom popup-moduler. Men alla PWA:er har redan en service worker-fil som tjänar ett annat syfte. Och vid en tidpunkt kan din PWA bara använda en service worker.
Enkelt uttryckt, webb push-tjänster förvirrar din PWA. Så ibland kommer den att samla push-notisabonnenter och ibland inte. Ibland kan du skicka meddelanden och ibland kan du inte. Du kan till och med hamna med att skicka push-meddelanden till hela din abonnentlista och bara leverera dem till några få abonnenter.
Vi rekommenderar att använda PushEngage för att skicka PWA push-notiser. PushEngage är den främsta push-notisprogramvaran i världen. Så du vet att dina kampanjer är i trygga händer.
Naturligtvis kommer PWA-byggare som Mendix med sitt eget push-notissystem. Men vad händer om du vill migrera till någon annan push-notistjänst? Vad händer om du vill ha mer flexibilitet och kontroll över dina push-notiskampanjer? Dessutom ger dessa tjänster dig vanligtvis ett API för att skapa push-kampanjer. Men med PushEngage får du en lättanvänd instrumentpanel från vilken du kan skapa, schemalägga, skicka och hantera push-kampanjer.
Och ja, du kan använda Firebase Cloud Messaging (FCM) för att skicka push-meddelanden till Android-appar. Men med PushEngage kan du skicka push-meddelanden till Android-appar och webben, push-meddelanden till iOS och iPadOS webb och appar, samt push-meddelanden till webbläsare.
Det bästa? Du kan till och med skicka kraftfulla eCommerce push-meddelanden med några få klick.
| Faktum | Värde |
|---|---|
| Primär leveransmekanism | Service worker (push-prenumeration) |
| Typisk installationstid | ~10 minuter (grundläggande) |
| Vanligt krav | Root-scoped service_worker.js + manifest.json |
| Fungerar på | De flesta stationära webbläsare och Android (varierar beroende på plattform) |
Låt oss börja.
Steg #1: Konfigurera ditt PushEngage-konto
Gå till PushEngage startsida och klicka på knappen Kom igång :
Du kan prova PushEngage gratis. Om du driver en liten blogg som behöver återkommande trafik och engagemang, är det förmodligen tillräckligt bra. Men om du menar allvar med försäljning bör du skaffa Enterprise-paketet och låsa upp de automatiserade kampanjerna.
När du har registrerat dig för ditt PushEngage-konto, gå till din PushEngage-instrumentpanel och gå till Webbplatsinställningar » Webbplatsdetaljer:
Du kan ställa in din logotyp, webbplatsnamn och webbplats-URL här. Det är verkligen viktigt att ordna dessa saker nu så att du kan testa hela din installation senare.
Steg #2: Hämta installationskoden från PushEngage
För att installera push-notiser behöver du en installationskod. På din skärm för Webbplatsinställningar, scrolla ner och klicka på knappen Klicka här för installationsinstruktioner:
Klicka sedan på fliken Vilken webbplats som helst:
Du kan använda Javascript-koden för att börja skicka push-notiser.
Steg #3: Lägg till Service Worker-koden för PWA Push-notiser
Den mest knepiga delen av processen är äntligen här. I PushEngage-instrumentpanelen under Inställningsinstruktioner ser du också ett alternativ för att ladda ner service worker-filen.
VIKTIGT: En PWA kan bara ha ett aktivt service worker-omfång åt gången — slå samman push-koden i din befintliga service worker. Som standard kräver en PWA ingen service worker-fil. Allt du behöver för att förvandla vilken webbplats som helst till en Progressive Web App är en manifestfil. Så, om din PWA inte har en service worker-fil, kan du helt enkelt lägga till PushEngage service worker i rotkatalogen på din webbplats eller webbapp.
Men om din PWA redan har en service worker på plats, ladda DÅ INTE upp PushEngage push-meddelande service worker-filen direkt som den är. Öppna PushEngage service worker i en textredigerare som Anteckningar och kopiera koden i PushEngage service worker-filen. Hitta sedan service worker-filen för din PWA och lägg helt enkelt till PushEngage service worker-koden i filen.
Om du försummar detta steg kommer du inte att kunna samla prenumeranter på pushmeddelanden.
Steg #4: Konfigurera PushEngage Opt-In
Gå nu tillbaka till din PushEngage-instrumentpanel. Gå till Design » Popup-modaler och välj det opt-in du väljer:
Tanken här är att ge dina besökare en solid anledning att prenumerera. Om du behöver hjälp med det, kolla in vår artikel om hur man skapar en anpassad opt-in för push-notiser.
Och om du vill ha några mallar att komma igång med, bör du kolla in den här artikeln om högkonverterande opt-ins för pushmeddelanden.
Steg #5: Skapa din första kampanj
Nu när din PWA kan skicka push-meddelanden bör du skapa en faktisk kampanj.
En kampanj för övergivna kundvagnar hjälper till att generera extra intäkter genom att konvertera övergivna kundvagnar. Det är en enkel påminnelse som säljer många produkter automatiskt. Så det är en utmärkt kampanj för att stödja vilken landningssida som helst som genererar direkta försäljningar.
Gå bara till din PushEngage-instrumentpanel och gå till Kampanjer » Utlösande kampanjer » Skapa en ny utlösande kampanj:
Och välj sedan mallen för kampanjen Övergivna kundvagnar:
Om du är ny på att skapa automatiserade marknadsföringskampanjer kan du helt enkelt följa vår artikel om hur du ställer in en pushmeddelandekampanj för övergivna kundvagnar. Följ varje steg, så kan du ställa in pushmeddelanden som detta:
Och bara om du undrar, du behöver inte vara ett känt varumärke för att dina pushmeddelandekampanjer ska vara effektiva. Faktum är att PushEngage byggdes för att hjälpa småföretag att växa med hjälp av pushmeddelanden.
Men innan du börjar marknadsföra din webbplats bör du åtgärda eventuella problem med din prenumerationsprocess för pushmeddelanden. Kolla in den här artikeln om att testa dina pushmeddelanden. Om allt fungerar perfekt är du klar!
Vanliga frågor
F: Kräver PWA push en service worker?
S: Ja. PWA push-meddelanden levereras av den registrerade service workern som måste inkludera hantering av push-händelser.
F: Kan jag skicka PWA push på iOS?
S: iOS-stöd för service worker-baserad webb-push är begränsat; Android och stationära webbläsare stöder PWA push brett. (Om du har exakt iOS-status, ersätt med aktuell kortfattad information och ange källa.)
F: Vad är det vanligaste integrationsfelet?
S: Att ladda upp en separat Push service worker till roten utan att slå samman den med PWAs befintliga service worker — vilket resulterar i konflikter och missade prenumerationer.
Vad ska man göra efter att ha lagt till PWA Push-notiser?
Det var allt för den här gången, gott folk!
Du kan nu skicka PWA push-meddelanden. Vid det här laget har du också skapat en kraftfull webb push-meddelandekampanj för att öka din tillväxt. Allt detta, på mindre än 10 minuter!
Kolla in hur du skapar andra automatiserade pushmeddelandekampanjer också. De flesta pushkampanjer är enkla och effektiva. Så vi rekommenderar att du ställer in flera kampanjer för din webbplats. Här är några bra att börja med:
- Hur man automatiskt skickar RSS push-meddelanden
- Hur man ställer in varukorgsavbrotts push-meddelanden med GTM
- Så här schemalägger du pushmeddelanden på det enkla sättet [5 min. guide]
Och om du inte redan har gjort det, kom igång med PushEngage. PushEngage är den främsta pushmeddelandeprogramvaran i världen. Så dina kampanjer är i trygga händer.
