Notifications

This feature is not (yet) supported on your device

This feature is only available on installed web apps

The Push API and Notifications API enable web apps to receive and display push notifications from a server, even when the app is in the background or not running at all.

Demo

Click the "Subscribe" button below to subscribe to notifications. Once subscribed, you will send a notification to yourself by filling out the form below. You can specify a delay in seconds so you can schedule a notification and close the app in the meantime to check it is delivered while the app is not running.

The "require interaction" checkbox will make the notification persistent on supporting devices, which means it will not disappear until the user interacts with it.

You can send a notification through the form below.

Require interaction const registration = await navigator.serviceWorker.getRegistration(); const base64UrlToUint8Array = base64UrlData => { const padding = '='.repeat((4 - base64UrlData.length % 4) % 4); const base64 = (base64UrlData + padding) .replace(/\-/g, '+') .replace(/_/g, '/'); const rawData = atob(base64); const buffer = new Uint8Array(rawData.length); for(let i = 0; i < rawData.length; ++i) { buffer[i] = rawData.charCodeAt(i); } return buffer; }; const subscribeToPushMessages = (registration, publicKey) => registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: base64UrlToUint8Array(publicKey) }); const unsubscribeFromPushMessages = subscription => subscription.unsubscribe(); const getPushSubscription = () => registration.pushManager.getSubscription(); const apiUrl = '...'; const sendPushMessage = async ({title, message, delay, interaction}) => { const pushSubscription = await getPushSubscription(); const delayTime = !Number.isInteger(parseInt(delay, 10)) ? 0 : delay > 5 ? 5 : delay; fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pushSubscription, title, message, delay: delayTime * 1000, interaction }) }); }; // in service worker self.addEventListener('push', async e => { const data = e.data.json(); const {title, message, interaction} = data; const options = { body: message, icon: '/src/img/icons/icon-512x512.png', vibrate: [100, 50, 100], data: { dateOfArrival: Date.now() }, actions: [ { action: 'confirm', title: 'OK' }, { action: 'close', title: 'Close notification' }, ], requireInteraction: interaction }; e.waitUntil( self.registration.showNotification(title, options) .then(hasActiveClients) .then((activeClients) => { if(!activeClients) { self.numBadges += 1; navigator.setAppBadge(self.numBadges); } }) .catch(err => sendMessage(err)) ) });

Documentation

ServiceWorkerRegistration.showNotification on MDN which is required by Chrome.

Notifications API on MDN

Notification error

Your device does not have permission to show notifications. Please enable this in your device's settings.

Browser support

Web Notification on caniuse.com