Web push obavijesti: kako rade i kako ih dobro koristiti

Web push obavijesti jedini su marketinški kanal u kojem vas jedna loša odluka o dizajnu može trajno zaključati izvan dosega kupca. Zatražite dopuštenje u krivom trenutku, posjetitelj klikne Blokiraj i taj vam je preglednik zauvijek zatvoren. Nema ponovnog upita, nema druge kampanje, nema e-poruke za povratak. Ta asimetrija razlog je zašto se mehanizam isplati razumjeti prije nego što napišete i jednu poruku.

Što su web push obavijesti

Web push obavijest je poruka poslana s vašeg poslužitelja u preglednik pretplatnika, koju prikazuje centar za obavijesti operativnog sustava i koja se isporučuje čak i kada je vaša stranica zatvorena. Taj zadnji dio je cijela poanta: za razliku od skočnog prozora na stranici, web push doseže nekoga tko trenutno ne gleda vašu web stranicu.

Izgrađen je od tri web platform API-ja koji rade zajedno, a podjela među njima objašnjava većinu ponašanja ovog kanala: Service Worker API, Push API i Notifications API.

Kako web push radi ispod haube

Service worker

Service worker je JavaScript worker koji djeluje kao posrednik između vaše web aplikacije, preglednika i mreže. Radi u vlastitoj dretvi, nema pristup DOM-u i nastavlja postojati nakon što se stranica koja ga je registrirala zatvori. Ta trajnost mu omogućuje da primi push poruku i prikaže obavijest kada nitko nema otvorenu vašu karticu. Service workeri rade samo u sigurnim kontekstima, što znači HTTPS, uz http://localhost koji se za razvoj tretira kao siguran.

Pretplata: krajnja točka plus dva ključa

Kada je service worker aktivan, stranica poziva registration.pushManager.subscribe(). Preglednik razgovara s push servisom svog proizvođača i vraća PushSubscription koji sadrži:

• endpoint, jedinstveni URL sposobnosti na kojem push servis prima poruke
• keys.p256dh, javni ključ za Elliptic Curve Diffie-Hellman na krivulji P-256
• keys.auth, tajnu za autentifikaciju

Vaš poslužitelj pohranjuje sva tri i krajnju točku tretira kao tajnu, jer svatko tko je ima može slati tom pretplatniku. Ključevi postoje jer je sadržaj enkriptiran s kraja na kraj. RFC 8291 propisuje kako: ECDH razmjena na P-256 uspostavlja zajedničku tajnu, HKDF iz nje izvodi ključeve, a sadržaj se zapečati s AES-128-GCM pod kodiranjem sadržaja aes128gcm. Push servis prosljeđuje šifrat koji ne može pročitati.

Push servis

Push poruke ne šaljete izravno na uređaj. Šaljete ih push servisu koji vodi proizvođač preglednika: Googleove FCM krajnje točke za Chrome, Mozillin autopush za Firefox, Appleov push servis za Safari. RFC 8030, „Generic Event Delivery Using HTTP Push”, definira protokol. Vaš poslužitelj šalje POST na krajnju točku pretplate, a push servis rješava teške dijelove mobilne isporuke: jednu vezu prema uređaju koja štedi bateriju, stavljanje u red dok je uređaj izvan mreže, buđenje preglednika kada poruka stigne. To je i razlog zašto se isporuka ne može jamčiti. Ako je uređaj dovoljno dugo isključen, poruke isteknu prema svom TTL-u i odbacuju se.

VAPID: dokazivanje tko šalje

To što je krajnja točka tajna slaba je sigurnost. RFC 8292 dodaje Voluntary Application Server Identification, odnosno VAPID, kako bi push servis mogao znati s kojeg je aplikacijskog poslužitelja poruka došla.

Jednom generirate ECDSA par ključeva na NIST P-256 krivulji. Javni ključ ide u applicationServerKey kada se preglednik pretplaćuje, čime se pretplata veže uz vaš poslužitelj. Za svaki push vaš poslužitelj šalje JWT potpisan odgovarajućim privatnim ključem koristeći ES256, koji nosi aud tvrdnju za domenu push servisa, exp tvrdnju ne dalju od 24 sata i po izboru sub tvrdnju s kontaktnim podacima. Push servis provjerava potpis, pa ukradena krajnja točka sama više nije dovoljna da zaspe vaše pretplatnike.

Put isporuke, s kraja na kraj

1. Stranica registrira service worker i, nakon što je dopuštenje odobreno, poziva subscribe() s vašim javnim VAPID ključem.
2. Vaš poslužitelj pohranjuje vraćenu krajnju točku i ključeve uz zapis pretplatnika.
3. Za slanje, vaš poslužitelj enkriptira sadržaj s p256dh i auth, potpisuje VAPID JWT i šalje POST na krajnju točku.
4. Push servis autentificira zahtjev i isporučuje enkriptiranu poruku.
5. Preglednik budi service worker push događajem, koji dekriptira sadržaj i poziva ServiceWorkerRegistration.showNotification().
6. Klik pokreće notificationclick u service workeru, gdje otvarate odredišni URL.

Zašto je model dopuštenja tako strog

Pogledajte što pretplata omogućuje: pozadinski proces koji radi bez da je vaša stranica otvorena, plus mogućnost crtanja po površini za obavijesti operativnog sustava. Preglednici to zato stavljaju iza izričitog dopuštenja koje korisnik daje po domeni, a većina zahtijeva da zahtjev slijedi stvarnu korisničku gestu.

Drugo ograničenje ljude iznenađuje. Chrome i Edge zahtijevaju userVisibleOnly: true pri pretplati, što je obećanje da će svaki push proizvesti obavijest vidljivu korisniku, pa tihi pozadinski push nije podržana upotreba API-ja. Firefox također primjenjuje kvotu na push poruke koje ne generiraju obavijest.

Podrška preglednika i platformi

Prema MDN-u, Push API je široko dostupan kao Baseline od ožujka 2023., što znači da radi u aktualnim verzijama preglednika Chrome, Edge, Firefox i Safari na računalima te u Chromeu i Firefoxu za Android. Dvije napomene važnije su od naslova.

Prvo, Notifications API nije ujednačeno dostupan. MDN ga označava kao ograničeno dostupan jer konstruktor Notification() baca TypeError u većini mobilnih preglednika. Za sve što mora raditi na mobitelima koristite trajne obavijesti kroz ServiceWorkerRegistration.showNotification(), što je ionako put preko service workera na kojem već jeste.

Drugo, opcije obavijesti neujednačeno su implementirane. Gumbi za akcije, značke, slike i requireInteraction razlikuju se među preglednicima i operativnim sustavima, pa dizajnirajte obavijesti koje se ispravno čitaju i samo s naslovom, tekstom i ikonom.

Zahtjev za iOS i iPadOS

Ova napomena odlučuje je li web push održiv za publiku koja je pretežno na mobitelima, a gotovo posvuda se navodi pogrešno.

Apple je dodao Web Push u iOS i iPadOS 16.4 i radi samo za web aplikacije koje su dodane na početni zaslon. Kako je WebKit napisao, „we are adding support for Web Push to Home Screen web apps” i „a web app that has been added to the Home Screen can request permission to receive push notifications”. Korisnik je dodaje kroz izbornik dijeljenja i „Add to Home Screen”, a dopuštenje se zatim mora zatražiti kao odgovor na izravnu interakciju korisnika, primjerice dodir gumba za pretplatu.

Stranica otvorena u običnoj Safari kartici na iPhoneu ne može stvoriti push pretplatu. To je stvarna prepreka: tražite korak instalacije prije nego što uopće možete zatražiti dopuštenje. Na macOS-u je lakše, jer je Safari 16.1 na macOS Ventura dodao standardizirani Web Push za obične web stranice bez koraka instalacije.

Minimalan primjer pretplate

Ovo je cijeli tijek na strani klijenta. Pripada u rukovatelj klika, a ne u učitavanje stranice.

async function subscribeToPush(vapidPublicKey) {
  // Push i service workeri zahtijevaju siguran kontekst (HTTPS).
  if (!("serviceWorker" in navigator) || !("PushManager" in window)) return null;

  const registration = await navigator.serviceWorker.register("/sw.js");

  // Mora se pozvati iz korisničke geste i samo jednom po korisniku.
  const permission = await Notification.requestPermission();
  if (permission !== "granted") return null;

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: vapidPublicKey, // javni P-256 ključ kodiran u base64url
  });

  // Pohranite krajnju točku i ključeve na poslužitelju; krajnju točku tretirajte kao tajnu.
  await fetch("/api/push/subscribe", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(subscription),
  });

  return subscription;
}

Unutar sw.js obrađujete push događaj, pozivate self.registration.showNotification(title, options) i obrađujete notificationclick kako biste otvorili odredišni URL.

Korisničko iskustvo dopuštenja: gdje većina programa pada

Nikad ne pitajte pri učitavanju stranice

Lighthouse ima poseban test za to: „if your page asks for permission to send notifications on page load, those notifications may not be relevant to your users or their needs”. Preporuka je ponuditi određenu vrstu obavijesti i zatražiti dopuštenje tek nakon što se korisnik prijavi na tu vrstu. Safari 12.1 i drugi preglednici otišli su dalje, zahtijevajući interakciju sa stranicom prije nego što se zahtjev uopće može uputiti.

Koristite blagi prethodni upit

Prvo prikažite vlastiti poziv unutar stranice. On imenuje vrijednost koju nudite, može se odbaciti bez trajne cijene, a tek klik na njega pokreće pravi upit preglednika. Nekoga tko danas ignorira vaš blagi upit možete pitati ponovno sljedeći mjesec. Nekoga tko klikne Blokiraj ne možete. Dva pravila to čine djelotvornim: opišite što ćete stvarno slati umjesto „primajte novosti” i nikad ne izazivajte pogrešan klik, jer slučajno prihvaćanje proizvodi trenutačnu odjavu.

Pitajte u kontekstu

Chromeova vlastita preporuka je da „let your users take the initiative and turn on notifications at their own pace” tako da prekidače diskretno smjestite unutar postojećih površina sučelja, te da izbjegavate „showing prompts and/or overlays without context or immediately after a user lands on the site”.

Trenuci koji funkcioniraju u trgovini vrlo su konkretni: kontrola „obavijesti me kada bude ponovno dostupno” na rasprodanom proizvodu, stranica potvrde narudžbe koja nudi obavijesti o dostavi, prekidač za praćenje cijene na često gledanom proizvodu. Dopuštenje se razmjenjuje za imenovanu korist, a ne skuplja usput.

Odbijanje je praktički trajno

Kada netko blokira obavijesti, preglednik pohranjuje tu odluku za vašu domenu. Kasniji pozivi Notification.requestPermission() razrješavaju se u pohranjenu vrijednost denied bez ikakvog prikaza, zbog čega MDN-ov vlastiti primjer provjerava Notification.permission prije nego što uopće pozove requestPermission(). Poništavanje blokade znači kopanje po postavkama stranice, što praktički nitko ne radi.

Što preglednici rade kada pogriješite

Posljedice više nisu samo niska stopa prihvaćanja.

• Chrome automatski uvrštava domene s vrlo niskom stopom prihvaćanja u tiše sučelje za dopuštenja, odvojeno po vrsti uređaja, čime potiskuje upit za sve.
• Chrome ograničava zahtjeve stranicama koje kombiniraju veliku količinu pusha s niskim angažmanom i vraća HTTP 429. Eskalacija traje jedan dan, zatim sedam, zatim četrnaest, a resetira se tek nakon 42 uzastopna dana bez ometanja.
• Chrome sada automatski oduzima dopuštenje za obavijesti stranicama s kojima korisnik nedavno nije komunicirao, ondje gdje postoji „very low user engagement and a high volume of notifications being sent”. Googleovo je obrazloženje oštro: „Less than 1% of all notifications receive any interaction from users.”

Pretplatnike koje ste već zaslužili možete izgubiti jednostavno tako da loše šaljete.

Web push u usporedbi s e-poštom i SMS-om

Razlika u vlasništvu koja mijenja strategiju

Push pretplata je URL sposobnosti vezan uz jedan profil preglednika na jednom uređaju. Nije osoba. Isti kupac koji koristi Chrome na prijenosnom računalu i Firefox na mobitelu su dvije nepovezane pretplate i ne možete znati da je riječ o istom čovjeku osim ako se sam ne identificira.

Nije ni prenosiva. Popis e-pošte možete izvesti i sutra učitati u drugu platformu. Push pretplate ne možete premjestiti između dobavljača, jer su ključevi i VAPID vezanje stvoreni prema određenom ključu aplikacijskog poslužitelja.

Zato web push tretirajte kao ubrzivač kanala koji posjedujete, nikad kao zamjenu. Iskoristite push trenutak da zaradite adresu e-pošte ili broj telefona, a ne obrnuto. Potpuni vodič kroz marketinšku automatizaciju pokriva spajanje više kanala u jedno putovanje.

Primjene koje uistinu rade

Kanal nagrađuje poruke koje su vremenski osjetljive, osobno relevantne i izvedive jednim dodirom.

• Napuštena košarica. Push unutar sat vremena, pojačan e-poštom kasnije. Vodič kroz e-poštu za napuštenu košaricu pokriva redoslijed.
• Obavijesti o povratku na zalihu. Najjači slučaj, jer je korisnik izričito tražio da mu se javi.
• Pad cijene na praćenim artiklima. Ista logika, samoodabrana relevantnost.
• Status dostave i narudžbe. Visoka namjera otvaranja, nizak rizik od pritužbi.
• Hitne novosti u pretplaćenoj temi. Vijesti, rezultati, prozori dostupnosti.

Jednako je jasno što ne uspijeva: generičke objave „objavili smo novi članak”, nediferencirane dnevne ponude, sve što traži više od naslova i jednog retka, kampanje za ponovni angažman prema pretplatnicima koji su ignorirali zadnjih dvadeset obavijesti i transakcijski sadržaj kojemu treba trajni zapis.

Učestalost, vrijeme i segmentacija

Počnite konzervativno: jedna do tri obavijesti po pretplatniku tjedno, uz širenje samo ako stope odjave i klikova ostanu zdrave. Zamor se pojavljuje brže nego kod e-pošte jer utišavanje košta jedan dodir na obavijesti koju je operativni sustav ionako prikazao.

Vrijeme je i prednost i opasnost. Push stiže odmah, pa poruka poslana u 02:00 stiže u 02:00. Pohranite ili zaključite vremensku zonu pretplatnika u trenutku pretplate i zadržite slanja unutar definiranog prozora.

Segmentacija je ograničena onime što znate o pretplati, a ne o osobi, pa su upotrebljive dimenzije bihevioralne: pregledane stranice, praćeni proizvodi, stanje košarice, koliko je nedavno kupio, platforma. Vodič kroz segmentaciju kupaca ide dublje.

Mjerenje web pusha

Važne su četiri metrike i ne mjere se sve na isti način.

• Isporuka. Je li push servis prihvatio zahtjev. 201 znači prihvaćeno, ne isporučeno. 404 ili 410 znači da je pretplata mrtva.
• Prikaz. Je li obavijest prikazana. To znate samo ako service worker javi natrag kada se showNotification() razriješi.
• Stopa klikova. Klikovi podijeljeni s prikazima. To je broj koji se isplati optimizirati.
• Stopa odjave. Odjave i oduzimanja dopuštenja po slanju. Pratite je pomnije od stope klikova, jer je vodeći pokazatelj smrti kanala.

Zamke atribucije

Push atribucija sama sebi laska. Obavijest stiže na uređaj koji pretplatnik već drži u ruci, pa često preuzima zaslugu za sesiju koja bi se svejedno dogodila. Provodite kontrolne skupine umjesto da pretpostavljate inkrementalnost. Prikazi su podbrojeni, a svaki je klik zabilježen, pa stopa klikova izračunata prema poslanim porukama precjenjuje uspješnost. A budući da je pretplata preglednik, a ne osoba, push kliknut na mobitelu koji završi kupnjom na računalu izgleda kao dva nepovezana događaja. Vodič kroz metrike email marketinga pokriva higijenu mjerenja kroz kanale.

Privola, GDPR i odjava

Upit preglednika za dopuštenje tehnička je brana. Nije automatski potpuna pravna osnova za marketing.

Kada radite marketing prema ljudima u EU ili Ujedinjenoj Kraljevini, push tretirajte kao e-poštu. Objasnite što ćete slati prije nego što se upit pojavi, kako bi privola bila informirana i određena. Zabilježite kada i gdje je pretplata stvorena i nikad ne vežite privolu za push uz nepovezanu radnju. Ako pretplate vežete uz identificirane kupce, ti podaci ulaze u vaše obveze prema osobnim podacima, uključujući zahtjeve za brisanje.

Higijena odjave jednako je važna. Ponudite kontrolu postavki unutar stranice kako bi ljudi mogli smanjiti učestalost umjesto da blokiraju, pozovite PushSubscription.unsubscribe() i obrišite zapis na poslužitelju kada to učine te uklonite pretplate na 404 ili 410. MDN-ova je uputa kratka i točna: korisnicima treba biti „offered an easy way to opt out of getting more in the future”.

Gdje web push pripada u skupu kanala

Web push je dobar treći kanal i loš prvi: brz, granično besplatan i nenadmašan za vremenski kritična upozorenja, ali vezan uz uređaj, neizvoziv i jedan klik od trajnog gubitka.

Zbog toga je pravi problem orkestracija. Koja poruka ide na koji kanal, kako potisnuti e-poštu kada je push već konvertirao i kako zadržati jedan pogled na kupca kroz površine koje ljude identificiraju različito. Brevo nudi web i mobilni push uz e-poštu i SMS, a Tajo sjedi iznad platforme Brevo i koordinira tu logiku kroz kanale za Shopify trgovine. Za SMS stranu pogledajte vodič kroz SMS automatizaciju.

Ključne poruke

• Web push su tri API-ja koja surađuju: service worker za pozadinsko izvođenje, Push API za pretplatu i prijenos, Notifications API za prikaz. Pretplata je krajnja točka plus p256dh ključ i auth tajna, sadržaj je enkriptiran s kraja na kraj, a VAPID dokazuje pošiljatelja.
• Push je široko dostupan kao Baseline od ožujka 2023., ali na iOS-u i iPadOS-u radi samo za web aplikacije dodane na početni zaslon.
• Nikad ne tražite dopuštenje pri učitavanju stranice. Koristite blagi prethodni upit, pitajte u kontekstu i zapamtite da je blokada trajna za tu domenu.
• Chrome sada provodi tiše upite, ograničenja zahtjeva i automatsko oduzimanje dopuštenja, pa vas loše slanje košta pretplatnika koje već imate.
• Pretplata je preglednik, a ne osoba, i ne može se izvesti. Prvo izgradite popis e-pošte i push koristite da ga ubrzate.