Declarative Web Push

This feature is not (yet) supported on your device

This feature is only available on installed web apps

Declarative Web Push enables web apps to receive and display push notifications without a service worker, even when the app is in the background or not running at all.

The benefit of this approach is that the web app doesn't have to take care of showing the notification so it will still be displayed, even when the app doesn't implement functionality to display it or when there is an error in this code.

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.

You can send a notification through the form below.

const pushSubscription = await pushManager.getSubscription(); 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 = (publicKey) => pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: base64UrlToUint8Array(publicKey) }); const unsubscribeFromPushMessages = subscription => subscription.unsubscribe(); const getPushSubscription = () => pushManager.getSubscription(); const apiUrl = '...'; const sendPushMessage = async ({title, message, delay}) => { 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 }) }); };

Documentation

Declarative Web Push explainer on GitHub .

Notification error

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

Browser support

Declarative Web Push is supported in Safari 18.4 on iOS for web apps added to the Home Screen