This page contains a set of example notifications that you can interact with to see what is possible with the notifications API.
If you’d like to try out these examples please enable notifications for this page.
Enable Notifications
Note: This is used for local testing only and you’ll never receive a push notification from us
Examples
Clicking on the buttons below will show one or notifications demonstrating different options in the notification API.
Some buttons will be disabled (greyed out) indicating that the current browser does not support that feature.
All Common Options
This example demonstrates a notification with all of the common options confirgured.
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.
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.
Language Direction
You can set a “dir” option to indicate if the test should be displayed “left-to-right” or “right-to-left”.
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.
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.
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.
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.
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.
Timestamp
This will display an age for the notification different to the time the notification was created.
Sound
The sound option has been defined, but at the time of writing no browser has implemented it yet.
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.
Focus or open a window
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.
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.
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.
Must show a Notification
Throughout the [Web Push Book]({{ $.Site.Permalink }}) there are references to “having to show a notification”. This is almost 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.
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.