Notification: navigate property
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Note: This feature is available in Web Workers.
The navigate read-only property of the Notification interface contains the URL the user agent will navigate to when the user activates the notification.
This is the resolved value of the URL, if any, that was specified in the navigate option of the Notification() constructor or ServiceWorkerRegistration.showNotification().
Normally, activating a non-persistent notification fires the click event on its Notification object, and activating a persistent notification fires the notificationclick event on the ServiceWorkerGlobalScope.
When a notification with a navigation URL is activated by the user, the user agent navigates to the specified URL instead of firing either of these events. This allows notifications to direct users to a specific page without requiring an event handler.
Value
A string containing a URL, or an empty string if no navigation URL has been set.
Examples
Reading the navigate property value
The navigate property returns the resolved URL string when a navigation URL has been set, or an empty string otherwise.
const notification = new Notification("New message from Alice", {
body: "Hey, are you free for lunch?",
navigate: "/messages/alice",
});
// The property contains the resolved absolute URL
console.log(notification.navigate); // e.g. "https://example.com/messages/alice"
// Without a navigate option, the property is an empty string
const basic = new Notification("Hello!");
console.log(basic.navigate); // ""
Using navigate with a service worker
When using persistent notifications through a service worker, the navigate option allows the notification to open a page when activated, without needing to handle the notificationclick event.
// Inside a service worker
self.registration.showNotification("Order shipped!", {
body: "Your order #1234 has been shipped.",
navigate: "/orders/1234",
});
Specifications
| Specification |
|---|
| Notifications API # dom-notification-navigate |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
navigate
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.