Webpushmeldingen uitgelegd

Webpushmeldingen

Webpushmeldingen: wat ze zijn en hoe ze werken | We.Inc

Wat pushmeldingen op het web zijn, de drie browser-API's erachter, de regel voor het iPhone-beginscherm en een toestemmingsdemo die u in uw browser kunt proberen.

Een pushmelding is een kort bericht dat een website of app naar uw apparaat stuurt en dat verschijnt, zelfs als de site gesloten is. Op het web zijn daar drie browserfuncties voor nodig: een service worker die op de achtergrond draait, de Push API om het bericht te ontvangen en de Notifications API om het te tonen, zodra de bezoeker toestemming geeft.

De onderdelen van web push

Onderdeel
Wat het doet

Service worker
Een script dat de browser voor uw site bewaart en dat wakker kan worden als er een bericht binnenkomt

Push API
Meldt de browser aan en ontvangt berichten die uw server pusht

Notifications API
Vraagt toestemming en tekent de melding op het scherm

Uw server
Bewaart elk abonnement en verstuurt berichten via de pushdienst van de browser

Met push laat een winkel een klant weten dat de bestelling is verzonden, of herinnert een boekingssite iemand aan de afspraak van morgen, zonder e-mail. Goed gedaan is het welkom; te vroeg gevraagd wordt het voorgoed geblokkeerd. De demo hieronder toont de toestemmingsstatussen met alleen een lokale melding.

Uw site registreert een service worker, een achtergrondscript, op een HTTPS-pagina.
Als de bezoeker op een knop zoals Houd me op de hoogte tikt, roept u Notification.requestPermission() aan.
Staat de bezoeker het toe, dan roept de service worker pushManager.subscribe() aan met de publieke sleutel van uw server en krijgt een abonnement.
U slaat dat abonnement op uw server op. Later stuurt uw server er een bericht naartoe, ontvangt de service worker een push-event en toont hij een melding.

Vraag het na een duidelijk moment van interesse, zoals het plaatsen van een bestelling, niet bij het eerste laden van de pagina.
Toon eerst uw eigen kleine vraag; roep de browserprompt alleen aan als ze ja zeggen. Een blokkade in de browser is voor bezoekers lastig ongedaan te maken.
Zeg wat u gaat sturen en hoe vaak, en houd u daaraan.
Gebruik een tag zodat een nieuwe update de oude vervangt in plaats van zich op te stapelen.
Bied binnen uw site een manier om meldingen uit te zetten, niet alleen in de browserinstellingen.

Veelgestelde vragen

Werken webpushmeldingen op de iPhone?

Ja, sinds iOS en iPadOS 16.4, voor webapps die aan het beginscherm zijn toegevoegd. WebKit zegt dat zo'n app om toestemming kan vragen, en dat het verzoek moet voortkomen uit een directe handeling van de gebruiker, zoals op een knop tikken.

Moet de site open zijn om een push te ontvangen?

Nee. MDN beschrijft dat een webapp met de Push API berichten kan ontvangen, ongeacht of hij op de voorgrond staat of zelfs geladen is. De service worker handelt het bericht af.

Wat zijn de drie toestemmingsstatussen?

granted (de bezoeker stond het toe), denied (de bezoeker blokkeerde het) en default (nog niet beslist). In de status default gedraagt de browser zich alsof het denied is.

Heb ik HTTPS nodig?

Ja. MDN geeft aan dat het toestemmingsverzoek voor meldingen alleen in beveiligde contexten beschikbaar is, en dat service workers ook alleen in beveiligde contexten beschikbaar zijn (http://localhost telt mee tijdens het ontwikkelen).

Wat is userVisibleOnly?

Een optie van pushManager.subscribe() die belooft dat elke push iets oplevert wat de gebruiker kan zien. MDN merkt op dat Chrome en Edge het abonnement weigeren als die niet op true staat.

Push, in-app-berichten en e-mail

Push komt in het meldingengebied van het apparaat terecht, en is daarom geschikt voor zaken die tijdgevoelig en persoonlijk zijn: een levering vandaag, een tafel die klaarstaat, een betalingsprobleem.
Alles wat lang is, of wat iemand later terug moet kunnen vinden, hoort in e-mail. Een dagelijkse uitverkoop hoort nergens in de buurt van push.

Toestemming krijgt u maar één kans

Nadat een bezoeker meldingen heeft geblokkeerd, staat de toestemming op denied en stopt het eigen voorbeeld van MDN gewoon met vragen; ze weer aanzetten is aan de bezoeker, in de site-instellingen van de browser. Daarom is een zachte vraag gebruikelijk: uw eigen banner vóór de echte prompt.
MDN merkt ook op dat Chrome en Firefox het toestemmingsverzoek vanuit een cross-origin iframe niet meer toestaan, dus vraag het vanaf uw eigen pagina op het hoogste niveau.

De code, stap voor stap

Op de pagina: vragen, dan abonneren

Draait alleen als de bezoeker op uw knop tikt. De publieke sleutel komt uit het VAPID-sleutelpaar van uw server.

In sw.js: het bericht tonen

De service worker wordt wakker bij een push-event en moet daarvoor een melding tonen.

Probeer de toestemmingsflow

Dit controleert wat uw browser ondersteunt en laat u uzelf één lokale melding tonen. Er wordt geen abonnement aangemaakt en er komt geen server aan te pas.

Wat deze browser ondersteunt

Functie
Hier beschikbaar

Notifications API

Service workers

Push API (PushManager)

Beveiligde pagina (HTTPS)

Nee

Toestemming voor meldingen op dit moment:

Nog niet gevraagd (default)

Toegestaan (granted)

Geblokkeerd (denied)

Niet ondersteund in deze browser

Toestemming vragen

Een testmelding tonen

Uw bestelling staat klaar

Dit is een lokale test uit de gids van we.inc. Er is geen server die hem stuurde.

Naar uw systeem gestuurd. Verscheen er niets, controleer dan de meldingsinstellingen van uw apparaat.

Deze browser wilde geen paginamelding tonen. Op veel telefoons komen meldingen alleen via een service worker binnen.

U hebt meldingen voor deze site geblokkeerd. Alleen u kunt dat ongedaan maken, via de site-instellingen naast de adresbalk.

Een bericht ontvangen als uw bestelling is verzonden?

We sturen alleen verzendupdates. U kunt ze altijd uitzetten.

Ja, houd me op de hoogte

Niet nu

Er werd geen browserprompt getoond, dus u kunt het later opnieuw vragen zonder geblokkeerd te worden.

Webpushmeldingen uitgelegd