Notification Examples

Notification Options

This page contains a set of example notifications that you can interact with to see what is possible with notifications.

Clicking on the buttons below will show one notification to demonstrate a particular options in the notification API.

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

The buttons will be enabled if the browser has support for the feature being demonstrated. If the button is grey, then it's not supported on your browser.

Desktop & Mobile

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

Title & Body

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

Details & Code

Notification Icon

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

Details & Code

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.

Details & Code

Action Buttons

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

At the time of writing, Android will make the icons (if defined) a color that matches the current UI. Desktop Chrome will display the icon as is.

Details & Code

Language Direction

You can set a "dir" option to indicate if the test should be displayed "left-to-right" or "right-to-left".

Details & Code

Tag

Defining a tag for a notification means that when a new Notification is shown with the same tag, any old notifications with that tag are removed before the new notification is shown.

Details & Code

Renotify

When you use the tag option, the default behavior of a new notification replacing an existing one is that there is no sound, vibration and the screen is kept asleep.

With `renotify: true` a new notification will play a sound, vibrate and wake up the users device. This means replacing notifications have the same behavior as a completely new notification.

Note: There is no visible affect on desktop, but on mobile, vibration and sound will be affected.

Details & Code

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.

Details & Code

Require Interaction

On desktop, a notification is only displayed for a short period of time. On Android, notifications are shown until the user interacts with it.

To get the same behaviour on desktop and mobile you can set the "require-interaction" option to true, which means the user must click or dismiss the notification.

Details & Code

Mobile Only

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.

Details & Code

Vibration

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

Details & Code

Other Options

Timestamp

At the time of writing, there is no visible affect to notifications with a custom timestamp.

Details & Code

Sound

The sound option has been defined, but at the time of writing no browser has implemented it yet.

Details & Code

Notification Common Practices

The following links are examples of common patterns on the web. For example, a common use case is for a web page to be opened when a user clicks on a notification.

Open a Window

This example simply demonstrates opening a URL after the user has clicked on a notification.

Details & Code

Focus a Window or Open

This example is similar to "Open a Window", except that it checks if there is already a window open at that URL and if not, it opens it.

To see this, try clicking the button below, then clicking the notification to open a new window. Repeat clicking the button and notification and notice that the originally open window will be focused rather than open a new window.

Details & Code

Adding Data to a Notification

This is a trivial example. When the notification is shown it is given a data parameter in the showNotification() options. When the notification is clicked, it prints this data to the console.

This data attribute is incredibly useful for passing information from the time when a notification is shown, to when a notification is clicked.

Details & Code

Merging Notifications Programmatically

In the tag example above, we saw how it affects multiple notifications being shown (i.e. replacing notifications with the same tag). But there may be scenarios where you want to manage the merging / collapsing of notifications with custom logic.

This example demonstrates how notifications can be iterated over and then have their data collapsed.

Click the button multiple times and close / click the notifications to see what it does.

Details & Code

Must show a Notification

Throughout the Web Push Book there are references to "having to show a notification". This is almost completely true. The one scenario where you don't need to show a notification is if the user is currently looking at your site.

This example waits for 4 seconds and then iterates over the current windows for this site, checking to see if one of them is focused. If one is, we print a message to the console, otherwise we show a notification.

Details & Code

Send a Message to the Page

Once a notification is received you may want to send data to any of pages that are currently open. This example will wait 4s before triggering a fake push event. Then the push event will post a message to the page, which is printed to the console.

Details & Code