Desktop & Mobile

The following examples are known to work on both Desktop and Mobile in Chrome.

If you just want to see what a notification looks like in your browser with all the UI options set, click the button below.

Title & Body

Basic example of a notification with a basic title and body.

Notification Icon

The icon on a notification is the image to the left of the title and body text.

Notification Image

A notification image should be used to display a larger image in the the main body of the notification. At the time of writing this is behind the experimental web platform feature in Chrome and the results vary between Android and Desktop.

Action Buttons

Actions allow you to add buttons to a notification so multiple actions can be performed by your user.

Silent

When a new notification arrives, by default, it plays a sound, vibrates and wakes up the screen. Setting the silent parameter means that the notification is displayed, but there is none of the default behaviors like sound, vibration and screen wake.

ONLY MOBILE

These fields aren't strictly mobile only. A desktop browser could use these fields if it want to, but at the moment they don't. For this reason, you'll need to use a mobile device to see what the options do.

Notification Badge

Notification badges are only being used on mobile, at least at the time of writing. It's used to replace the browser icon that is shown by default.

Vibration

You can define a pattern of vibrations to make a tune. This only applies to mobile devices since laptops tend not to vibrate.