Notifications API og håndtering av tillatelser

Notification.permission er en statisk streng som gjenspeiler gjeldende tillatelsestilstand. Den kan være "granted" (brukeren har tillatt), "denied" (brukeren har blokkert) eller "default" (det er aldri blitt spurt). Sjekk denne egenskapen før De prøver å vise varsler, slik at unødvendige feil unngås.

Notification.requestPermission() returnerer et Promise som løses med den nye tillatelsesstrengen. Kall den bare som svar på en tydelig brukerhandling, ikke ved innlasting av siden. Nettlesere ignorerer eller undertrykker tillatelsesforespørsler som vises umiddelbart ved innlasting, og brukerne opplever dem som plagsomme når de vises uten kontekst.

Det mest effektive mønsteret er å vise en melding i appen som forklarer fordelen, og deretter la brukeren klikke på «Aktiver varsler» før De kaller requestPermission(). Dette gir kontekst, øker andelen som godtar, og hindrer at nettleseren oppfatter nettstedet som søppelpost. Be aldri om tillatelse ved innlasting av siden.

new Notification(title, options) oppretter og viser et systemvarsel. Det første argumentet er tittelstrengen. options-objektet er det andre argumentet og støtter egenskaper som body (undertekst), icon (URL til bilde) og tag for å unngå duplikater. Dette fungerer bare hvis tillatelsen er "granted".

Viktige alternativer for varsler omfatter: body for beskrivende tekst under tittelen, icon for et lite bilde, badge for det lille monokrome ikonet som vises i operativsystemets varslingsområde, image for et stort innebygd bilde, tag for å erstatte et tidligere varsel med samme tag, og requireInteraction: true for å beholde varslet til brukeren foretar en handling.

Notification-instansen utløser flere hendelser: onclick utløses når brukeren klikker på varslet (bruk den til å fokusere vinduet og navigere), onclose utløses når varslet lukkes, og onerror utløses hvis det oppstår et problem med å opprette det. Knytt behandlere til den returnerte instansen etter at De har kalt new Notification().

Lagre den returnerte Notification-instansen i en variabel, og kall notification.close() for å lukke varslet programmatisk. Dette er nyttig for tidskritiske varsler som blir irrelevante etter en stund. Kombiner med setTimeout for å lukke varslet automatisk etter noen sekunder.

Notifications API krever en sikker kontekst. På HTTP-sider er typeof Notification === 'undefined', eller API-et er fullstendig deaktivert, avhengig av nettleseren. Dette er et sikkerhetstiltak for å hindre ondsinnede nettsteder i å oversvømme brukerne med falske systemmeldinger. Sjekk alltid om API-et er tilgjengelig før De bruker det.

En useNotifications-hook kan eksponere to metoder: requestPermission() og showNotification(title, options). Den holder internt oversikt over gjeldende tillatelsestilstand og oppdaterer den etter en forespørsel. Komponentene kaller showNotification uten å måtte bekymre seg for tillatelsessjekker, siden hooken håndterer dette internt.

Page Visibility API eksponerer document.hidden og hendelsen visibilitychange. Varsler gir mest mening når brukeren ikke allerede ser på fanen. Sjekk document.hidden === true før De viser et varsel, slik at De unngår overflødige varsler når siden allerede er i forgrunnen.

Notifications API-et som vises her, brukes til varsler som utløses lokalt fra selve siden. For push-varsler som kommer selv når siden er lukket, trenger De Push API kombinert med en service worker. Service workeren mottar push-hendelsen og kaller self.registration.showNotification() i bakgrunnen.

Notification.permission kan være granted, denied eller default. Be alltid om tillatelse etter en brukerhandling, ikke ved innlasting av siden. Bruk new Notification(title, options) for å opprette varsler, og håndter onclick for å fokusere vinduet. Kombiner med Visibility API for å vise varsler bare når fanen er skjult.