How does one use Chrome desktop notifications? I'd like that use that in my own code.
Update: Here's a blog post explaining webkit notifications with an example.
This means the browser can have no windows open, and you'll still receive the push message in your service worker, because the browser in running in the background. The only time a push won't be received is when the browser is completely closed, i.e. not running at all (no marking).
Go to Settings > Privacy and Security > Site Settings, then scroll down to Notifications in the pop-up window that appears. From there, you can toggle the Sites Can Ask to Send Notifications switch that turns website notification prompts on or off.
Chrome notifications usually appear during your browsing experience. It alerts you whenever a site or app is sending you a notification. If users accept the notifications from a website, they start getting notifications. Google Chrome is a popular browser.
In modern browsers, there are two types of notifications:
The API call takes the same parameters (except for actions - not available on desktop notifications), which are well-documented on MDN and for service workers, on Google's Web Fundamentals site.
Below is a working example of desktop notifications for Chrome, Firefox, Opera and Safari. Note that for security reasons, starting with Chrome 62, permission for the Notification API may no longer be requested from a cross-origin iframe, so we can't demo this using StackOverflow's code snippets. You'll need to save this example in an HTML file on your site/application, and make sure to use localhost://
or HTTPS.
// request permission on page load document.addEventListener('DOMContentLoaded', function() { if (!Notification) { alert('Desktop notifications not available in your browser. Try Chromium.'); return; } if (Notification.permission !== 'granted') Notification.requestPermission(); }); function notifyMe() { if (Notification.permission !== 'granted') Notification.requestPermission(); else { var notification = new Notification('Notification title', { icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png', body: 'Hey there! You\'ve been notified!', }); notification.onclick = function() { window.open('http://stackoverflow.com/a/13328397/1269037'); }; } }
<button onclick="notifyMe()">Notify me!</button>
We're using the W3C Notifications API. Do not confuse this with the Chrome extensions notifications API, which is different. Chrome extension notifications obviously only work in Chrome extensions, and don't require any special permission from the user.
W3C notifications work in many browsers (see support on caniuse), and require user permission. As a best practice, don't ask for this permission right off the bat. Explain to the user first why they would want notifications and see other push notifications patterns.
Note that Chrome doesn't honor the notification icon on Linux, due to this bug.
Notification support has been in continuous flux, with various APIs being deprecated over the last years. If you're curious, check the previous edits of this answer to see what used to work in Chrome, and to learn the story of rich HTML notifications.
Now the latest standard is at https://notifications.spec.whatwg.org/.
As to why there are two different calls to the same effect, depending on whether you're in a service worker or not - see this ticket I filed while I worked at Google.
See also notify.js for a helper library.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With