Veb push obaveštenja: kako rade i kako ih dobro koristiti

Veb push obaveštenja su jedini marketinški kanal u kome jedna loša odluka u dizajnu može trajno da vam zaključa vrata ka kupcu. Zatražite dozvolu u pogrešnom trenutku, posetilac klikne na Block i taj pregledač vam je zatvoren zauvek. Bez ponovnog pitanja, bez druge kampanje, bez imejla za povratak. Ta asimetrija je razlog zašto vredi razumeti mehanizam pre nego što napišete i jednu poruku.

Šta su veb push obaveštenja

Veb push obaveštenje je poruka poslata sa vašeg servera pregledaču pretplatnika, koju prikazuje centar za obaveštenja operativnog sistema i koja stiže i kada je vaš sajt zatvoren. Taj poslednji deo je cela poenta: za razliku od iskačućeg prozora na stranici, veb push dopire do nekoga ko trenutno ne gleda vaš sajt.

Sagrađen je od tri veb platformska API-ja koja rade zajedno, a podela između njih objašnjava najveći deo ponašanja ovog kanala: Service Worker API, Push API i Notifications API.

Kako veb push radi ispod haube

Servisni radnik

Servisni radnik je JavaScript radnik koji se ponaša kao posrednik između vaše veb aplikacije, pregledača i mreže. Radi u sopstvenoj niti, nema pristup DOM-u i nastavlja da postoji nakon što se zatvori stranica koja ga je registrovala. Ta postojanost je ono što mu omogućava da primi push poruku i prikaže obaveštenje kada niko nema otvorenu vašu karticu. Servisni radnici rade samo u bezbednim kontekstima, što znači HTTPS, uz http://localhost koji se za razvoj tretira kao bezbedan.

Pretplata: endpoint plus dva ključa

Kada je servisni radnik aktivan, stranica poziva registration.pushManager.subscribe(). Pregledač komunicira sa push servisom svog proizvođača i vraća PushSubscription koji sadrži:

• endpoint, jedinstveni URL sposobnosti na kome push servis prima poruke
• keys.p256dh, javni Diffie-Hellman ključ nad eliptičkom krivom P-256
• keys.auth, tajnu za autentifikaciju

Vaš server čuva sva tri i tretira endpoint kao tajnu, jer svako ko ga ima može da šalje tom pretplatniku. Ključevi postoje jer je sadržaj šifrovan s kraja na kraj. RFC 8291 propisuje kako: ECDH razmena nad P-256 uspostavlja deljenu tajnu, HKDF iz nje izvodi ključeve, a sadržaj se zapečaćuje pomoću AES-128-GCM pod kodiranjem sadržaja aes128gcm. Push servis prosleđuje šifrat koji ne može da pročita.

Push servis

Push poruke ne šaljete direktno uređaju. Šaljete ih push servisu koji vodi proizvođač pregledača: Google FCM endpointi za Chrome, Mozilla autopush za Firefox, Apple push servis za Safari. RFC 8030, „Generic Event Delivery Using HTTP Push”, definiše protokol. Vaš server šalje POST na endpoint pretplate, a push servis rešava teške delove mobilne isporuke: jednu vezu prema uređaju koja štedi bateriju, red čekanja dok je uređaj van mreže, buđenje pregledača kada poruka stigne. To je i razlog zašto isporuka ne može da se garantuje. Ako je uređaj isključen dovoljno dugo, poruke ističu prema svom TTL-u i odbacuju se.

VAPID: dokazivanje ko šalje

To što je endpoint tajna slaba je zaštita. RFC 8292 dodaje Voluntary Application Server Identification, odnosno VAPID, kako bi push servis mogao da utvrdi sa kog je aplikacionog servera poruka stigla.

Jednom generišete ECDSA par ključeva nad NIST P-256 krivom. Javni ključ ide u applicationServerKey kada se pregledač pretplaćuje, čime se pretplata vezuje za vaš server. Za svaki push vaš server šalje JWT potpisan odgovarajućim privatnim ključem uz ES256, sa aud tvrdnjom za poreklo push servisa, exp tvrdnjom ne dužom od 24 sata i opciono sub tvrdnjom sa kontakt podacima. Push servis proverava potpis, pa ukraden endpoint sam po sebi više nije dovoljan da neko zaspe vaše pretplatnike.

Put isporuke, od početka do kraja

1. Stranica registruje servisnog radnika i, nakon što je dozvola data, poziva subscribe() sa vašim javnim VAPID ključem.
2. Vaš server čuva vraćeni endpoint i ključeve uz zapis o pretplatniku.
3. Da bi poslao, vaš server šifruje sadržaj pomoću p256dh i auth, potpisuje VAPID JWT i šalje POST na endpoint.
4. Push servis autentifikuje zahtev i isporučuje šifrovanu poruku.
5. Pregledač budi servisnog radnika push događajem, koji dešifruje sadržaj i poziva ServiceWorkerRegistration.showNotification().
6. Klik pokreće notificationclick u servisnom radniku, gde otvarate odredišni URL.

Zašto je model dozvola tako strog

Pogledajte šta pretplata omogućava: pozadinski proces koji radi bez da je vaš sajt otvoren, plus mogućnost crtanja po površini za obaveštenja operativnog sistema. Pregledači to zato zaključavaju iza izričite dozvole po poreklu koju daje korisnik, a većina zahteva da zahtev usledi nakon stvarnog korisničkog pokreta.

Drugo ograničenje ljude iznenađuje. Chrome i Edge zahtevaju userVisibleOnly: true pri pretplati, što je obećanje da će svaki push proizvesti obaveštenje vidljivo korisniku, pa tihi pozadinski push nije podržana upotreba ovog API-ja. Firefox takođe primenjuje kvotu na push poruke koje ne proizvedu obaveštenje.

Podrška pregledača i platformi

Prema MDN-u, Push API je široko dostupan po Baseline standardu od marta 2023, što znači da radi u aktuelnim verzijama pregledača Chrome, Edge, Firefox i Safari na računarima, i u pregledačima Chrome i Firefox na Androidu. Dve ograde su važnije 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 pregledača. Za sve što mora da radi na telefonima koristite trajna obaveštenja preko ServiceWorkerRegistration.showNotification(), što je ionako put preko servisnog radnika na kome već jeste.

Drugo, opcije obaveštenja neujednačeno su implementirane. Dugmad akcija, bedževi, slike i requireInteraction razlikuju se između pregledača i operativnih sistema, pa dizajnirajte obaveštenja koja se i dalje ispravno čitaju sa samo naslovom, telom i ikonom.

Zahtev za iOS i iPadOS

Ova ograda odlučuje da li je veb push uopšte održiv za publiku koja pretežno koristi mobilne uređaje, a gotovo svuda je pogrešno navedena.

Apple je dodao Web Push u iOS i iPadOS 16.4, i to radi samo za veb aplikacije koje su dodate na početni ekran. Kako je WebKit rekao, „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 meni za deljenje i opciju „Add to Home Screen”, a dozvola potom mora da se zatraži kao odgovor na neposrednu interakciju korisnika, na primer dodir dugmeta za pretplatu.

Sajt otvoren u običnoj Safari kartici na iPhone uređaju ne može da kreira push pretplatu. To je stvarna prepreka: tražite korak instalacije pre nego što uopšte možete da zatražite dozvolu. Na macOS-u je lakše, jer je Safari 16.1 na macOS Ventura doneo Web Push po standardu za obične sajtove, bez koraka instalacije.

Minimalan primer pretplate

Ovo je ceo tok na strani klijenta. Pripada u rukovalac klika, a ne u učitavanje stranice.

async function subscribeToPush(vapidPublicKey) {
  // Push i servisni radnici zahtevaju bezbedan kontekst (HTTPS).
  if (!("serviceWorker" in navigator) || !("PushManager" in window)) return null;

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

  // Mora se pozvati iz korisničkog pokreta, 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
  });

  // Sačuvajte endpoint + ključeve na serveru; tretirajte endpoint 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 da biste otvorili odredišni URL.

UX dozvole: gde većina programa pada

Nikada ne pitajte pri učitavanju stranice

Lighthouse ima poseban test za ovo: „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 da ponudite određenu vrstu obaveštenja i zatražite dozvolu tek nakon što se korisnik prijavi na tu vrstu. Safari 12.1 i drugi pregledači otišli su dalje i zahtevaju interakciju sa stranicom pre nego što zahtev uopšte može da se uputi.

Koristite blagi pred-upit

Prvo prikažite sopstveni poziv unutar stranice. On imenuje vrednost koju nudite, može da se odbaci bez trajne štete, a samo klik na njega pokreće pravi upit pregledača. Neko ko danas ignoriše vaš blagi upit može ponovo da bude pitan sledećeg meseca. Neko ko klikne na Block ne može. Dva pravila čine da to radi: opišite šta ćete zaista slati umesto „primajte novosti” i nikada ne navlačite na pogrešan klik, jer slučajno prihvatanje odmah proizvodi odjavu.

Pitajte u kontekstu

Sam Chrome preporučuje da „let your users take the initiative and turn on notifications at their own pace” tako što prekidače postavljate diskretno unutar postojećih površina interfejsa i izbegavate „showing prompts and/or overlays without context or immediately after a user lands on the site”.

Trenuci koji rade u prodaji vrlo su konkretni: kontrola „obavesti me kada bude ponovo na stanju” na rasprodatom proizvodu, stranica potvrde porudžbine koja nudi obaveštenja o dostavi, prekidač za praćenje cene na proizvodu koji se često gleda. Dozvola se razmenjuje za imenovanu korist umesto da se skuplja.

Odbijanje je praktično trajno

Kada neko blokira obaveštenja, pregledač čuva tu odluku za vaše poreklo. Kasniji pozivi Notification.requestPermission() razrešavaju se na sačuvanu vrednost denied bez ikakvog prikaza, i zato sam MDN primer proverava Notification.permission pre nego što uopšte pozove requestPermission(). Poništavanje blokade znači kopanje po podešavanjima sajta, što praktično niko ne radi.

Šta pregledači rade kada pogrešite

Posledice više nisu samo niska stopa prijava.

• Chrome automatski uvodi porekla sa vrlo niskim stopama prihvatanja u tiši interfejs za dozvole, odvojeno po tipu uređaja, čime potiskuje upit za sve.
• Chrome ograničava broj poruka sajtovima koji kombinuju veliki obim pusha sa malim angažovanjem i vraća HTTP 429. Eskalacija traje jedan dan, pa sedam, pa četrnaest, a poništava se tek posle 42 uzastopna dana bez ometanja.
• Chrome sada automatski ukida dozvolu za obaveštenja sajtovima sa kojima korisnik nedavno nije komunicirao, tamo gde postoji „very low user engagement and a high volume of notifications being sent”. Google to obrazlaže oštro: „Less than 1% of all notifications receive any interaction from users.”

Možete da izgubite pretplatnike koje ste već zaradili prosto tako što loše šaljete.

Veb push u poređenju sa imejlom i SMS-om

Razlika u vlasništvu koja menja strategiju

Push pretplata je URL sposobnosti vezan za jedan profil pregledača na jednom uređaju. To nije osoba. Isti kupac koji koristi Chrome na laptopu i Firefox na telefonu jesu dve nepovezane pretplate, i ne možete da znate da je reč o istom čoveku ako se sam ne identifikuje.

Nije ni prenosiva. Imejl listu možete da izvezete i sutra učitate u drugu platformu. Push pretplate ne možete da premestite između proizvođača, jer su ključevi i VAPID vezivanje kreirani prema određenom ključu aplikacionog servera.

Zato veb push tretirajte kao ubrzivač kanala koji posedujete, nikada kao zamenu. Iskoristite push trenutak da zaradite imejl adresu ili broj telefona, a ne obrnuto. Kompletan vodič kroz marketinšku automatizaciju pokriva povezivanje više kanala u jedno putovanje.

Slučajevi upotrebe koji zaista rade

Kanal nagrađuje poruke koje su vremenski osetljive, lično relevantne i izvodljive jednim dodirom.

• Napuštena korpa. Push u roku od sat vremena, pojačan imejlom kasnije. Vodič kroz imejlove za napuštenu korpu pokriva raspored slanja.
• Obaveštenja o povratku na stanje. Najjači slučaj, jer je korisnik izričito tražio da bude obavešten.
• Padovi cena na praćenim artiklima. Ista logika, sam korisnik bira relevantnost.
• Status dostave i porudžbine. Visoka namera otvaranja, mali rizik od žalbi.
• Hitne novosti u temi na koju je korisnik pretplaćen. Vesti, rezultati, prozori dostupnosti.

Ono što ne uspeva podjednako je jasno: uopštene objave „objavili smo novi tekst”, nediferencirane dnevne ponude, sve što traži više od naslova i jednog reda, kampanje za ponovno angažovanje pretplatnika koji su ignorisali poslednjih dvadeset obaveštenja i transakcioni sadržaj kome treba trajan zapis.

Učestalost, tajming i segmentacija

Krenite konzervativno: jedno do tri obaveštenja po pretplatniku nedeljno, uz povećanje samo ako se stope odjave i klikova drže. Zamor se pojavljuje brže nego kod imejla, jer utišavanje košta jedan dodir na obaveštenju koje je operativni sistem već izneo pred korisnika.

Tajming je i prednost i opasnost. Push stiže odmah, pa poruka poslata u 02.00 stiže u 02.00. Sačuvajte ili zaključite vremensku zonu pretplatnika u trenutku pretplate i držite slanja unutar definisanog prozora.

Segmentacija je ograničena onim što znate o pretplati a ne o osobi, pa su upotrebljive dimenzije bihevioralne: pregledane stranice, praćeni proizvodi, stanje korpe, skorašnjost kupovine, platforma. Vodič kroz segmentaciju kupaca ulazi dublje u to.

Merenje veb pusha

Bitne su četiri metrike, i ne mere se sve na isti način.

• Isporuka. Da li je push servis prihvatio zahtev. Odgovor 201 znači prihvaćeno, a ne isporučeno. Odgovor 404 ili 410 znači da je pretplata mrtva.
• Prikaz. Da li je obaveštenje prikazano. To znate samo ako servisni radnik javi nazad kada se showNotification() razreši.
• Stopa klikova. Klikovi podeljeni prikazima. To je broj koji vredi optimizovati.
• Stopa odjave. Odjave i ukidanja dozvole po slanju. Pratite je pažljivije od stope klikova, jer je vodeći pokazatelj smrti kanala.

Zamke atribucije

Push atribucija sama sebi laska. Obaveštenje stiže na uređaj koji pretplatnik već drži u ruci, pa često uzima zasluge za sesiju koja bi se ionako dogodila. Radite sa kontrolnim grupama umesto da pretpostavljate inkrementalnost. Prikazi se podbrojavaju dok se svaki klik beleži, pa stopa klikova računata prema poslatim porukama precenjuje učinak. A pošto je pretplata pregledač a ne osoba, push kliknut na telefonu koji se završi kupovinom na računaru izgleda kao dva nepovezana događaja. Vodič kroz metrike imejl marketinga pokriva higijenu merenja kroz kanale.

Saglasnost, GDPR i odjava

Upit za dozvolu u pregledaču jeste tehnička kapija. On automatski nije potpun pravni osnov za marketing.

Kada radite marketing prema ljudima u EU ili Ujedinjenom Kraljevstvu, tretirajte push kao imejl. Objasnite šta ćete slati pre nego što se upit pojavi, da bi saglasnost bila informisana i određena. Zabeležite kada je i gde pretplata kreirana i nikada ne pakujte saglasnost za push uz nepovezanu radnju. Ako pretplate vezujete za identifikovane kupce, ti podaci ulaze u vaše obaveze prema ličnim podacima, uključujući zahteve za brisanje.

Higijena odjave jednako je bitna. Ponudite kontrolu preferencija na sajtu, tako da ljudi mogu da smanje učestalost umesto da blokiraju, pozovite PushSubscription.unsubscribe() i obrišite zapis na serveru kada to urade, i uklonite pretplate kod odgovora 404 ili 410. Uputstvo MDN-a je kratko i tačno: korisnicima treba biti „offered an easy way to opt out of getting more in the future”.

Gde veb push stoji u skupu kanala

Veb push je dobar treći kanal i loš prvi: brz, marginalno besplatan i nenadmašan za vremenski kritična obaveštenja, ali vezan za uređaj, neprenosiv i jedan klik udaljen od trajnog gubitka.

Zbog toga je pravi problem orkestracija. Koja poruka ide na koji kanal, kako da potisnete imejl kada je push već konvertovao i kako da zadržite jedinstven pogled na kupca kroz površine koje ljude identifikuju različito. Brevo nudi veb i mobilni push uz imejl i SMS, a Tajo stoji iznad platforme Brevo i koordinira tu logiku kroz kanale za Shopify prodavnice. Za SMS stranu pogledajte vodič kroz SMS automatizaciju.

Ključne poruke

• Veb push su tri API-ja koja sarađuju: servisni radnik za izvršavanje u pozadini, Push API za pretplatu i transport, Notifications API za prikaz. Pretplata je endpoint plus p256dh ključ i auth tajna, sadržaj je šifrovan s kraja na kraj, a VAPID dokazuje pošiljaoca.
• Push je široko dostupan po Baseline standardu od marta 2023, ali na iOS-u i iPadOS-u radi samo za veb aplikacije dodate na početni ekran.
• Nikada ne tražite dozvolu pri učitavanju stranice. Koristite blagi pred-upit, pitajte u kontekstu i zapamtite da je blokada trajna za to poreklo.
• Chrome sada sprovodi tiše upite, ograničenja broja poruka i automatsko ukidanje dozvole, pa vas loše slanje košta pretplatnika koje već imate.
• Pretplata je pregledač, a ne osoba, i ne može da se izveze. Prvo izgradite imejl listu, a push koristite da je ubrzate.