API ArcadeISSUE #6 of 23

notifications · the browser notification api

ApiaVSLegacy Larry

Apia saysThe Notifications API shows OS-level notifications after the user grants permission.

Ask once with Notification.requestPermission(); if "granted", fire new Notification("Title", { body, icon }). For background/push notifications you combine this with a service worker and the Push API. Request permission in response to a user action, not on page load, or users (and browsers) will reject it.

Power-ups you unlock

Notification.requestPermission() (once)
new Notification(title, { body, icon })
Background push needs a service worker
Ask on a user action, never on load

Legacy Larry attacks — common mistakes

Requesting permission immediately on page load
Assuming permission without checking
Confusing local notifications with push (needs SW)

Boss battleSketch requesting permission then firing a notification on a button click.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>btn.onclick = async () => {
  const perm = await Notification.requestPermission();
  if (perm === 'granted') new Notification('Hi', { body: 'from 7slf' });
};</pre></body></html>

▶ Open the interactive comic issue

‹ Media Devices · GetUserMedia Geolocation · GetCurrentPosition · WatchPosition ›