Notifications

This feature is not (yet) supported on your device

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 mean time 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 notification = document.querySelector('#notification'); const sendButton = document.querySelector('#send'); const registration = await navigator.serviceWorker.getRegistration(); const sendNotification = async () => { if(Notification.permission === 'granted') { showNotification(notification.value); } else { if(Notification.permission !== 'denied') { const permission = await Notification.requestPermission(); if(permission === 'granted') { showNotification(notification.value); } } } }; const showNotification = body => { const title = 'What PWA Test'; const payload = { body }; if('showNotification' in registration) { registration.showNotification(title, payload); } else { new Notification(title, payload); } }; sendButton.addEventListener('click', sendNotification);

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