{"id":339,"date":"2014-10-18T22:38:42","date_gmt":"2014-10-18T22:38:42","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=339"},"modified":"2025-05-04T22:15:30","modified_gmt":"2025-05-04T22:15:30","slug":"state-web-notifications-api","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2014\/10\/18\/state-web-notifications-api\/","title":{"rendered":"The State of the Web Notifications API"},"content":{"rendered":"<p>Today I was reviewing my <a href=\"https:\/\/github.com\/AurelioDeRosa\/HTML5-API-demos\" target=\"_blank\" rel=\"noopener\"><q>HTML5 API demos<\/q><\/a> repository to keep its information updated and relevant. In the last two weeks <a href=\"https:\/\/blog.chromium.org\/2014\/08\/chrome-38-beta-new-primitives-for-next.html\" target=\"_blank\" rel=\"noopener\">Google has released Chrome 38<\/a>, Opera has released Opera 25, and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Firefox\/Releases\/33\" target=\"_blank\" rel=\"noopener\">Mozilla has released Firefox 33<\/a>. Every time a new version of a browser is available, it may introduce support for new APIs or change an already supported API to accommodate changes in the specifications. For these reasons, a general check was much needed.<\/p>\n<p>In this article I&#8217;ll discuss what&#8217;s the current state of the Web Notifications API, what browsers support it, and what versions of the specifications. I&#8217;ll use this post also to summarize some inconsistencies I&#8217;ve found along the way.<br \/>\n<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"804\" data-permalink=\"https:\/\/www.audero.it\/blog\/2014\/10\/18\/state-web-notifications-api\/push-notifications\/\" data-orig-file=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg\" data-orig-size=\"600,400\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg\" src=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg\" alt=\"push notifications\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-804\" srcset=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg 600w, https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications-300x200.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2>Introductory notes<\/h2>\n<p>First of all, if you&#8217;re reading this article and you need an introduction to the Web Notifications API, I suggest you to read my article <a href=\"https:\/\/www.sitepoint.com\/introduction-web-notifications-api\/\" target=\"_blank\" rel=\"noopener\"><q>An Introduction to the Web Notifications API<\/q><\/a>.<\/p>\n<p>The second important point is that the Web Notifications API have two specifications: <a href=\"https:\/\/notifications.spec.whatwg.org\/\" target=\"_blank\" rel=\"noopener\">the <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> specifications<\/a> and <a href=\"https:\/\/notifications.spec.whatwg.org\/\" target=\"_blank\" rel=\"noopener\">the <abbr title=\"Web Hypertext Application Technology Working Group\">WHATWG<\/abbr> specifications<\/a>. The last version of the W3C specifications dates back to latter is more the 12 September 2013, while the last update of the WHATWG specifications was made the 12 October 2014. The freshness of the last update isn&#8217;t the only difference and I&#8217;ll highlight some of them in the remainder of this article.<\/p>\n<p><ins>Thanks to <a href=\"https:\/\/annevankesteren.nl\/\" target=\"_blank\" rel=\"noopener\">Anne van Kesteren<\/a>, now I have an even better understanding on what&#8217;s going on in regard of the Web Notifications API and the <abbr title=\"Web Hypertext Application Technology Working Group\">WHATWG<\/abbr> specifications, so I&#8217;ve updated this article. The main point I discovered is that only very recently the <abbr title=\"Web Hypertext Application Technology Working Group\">WHATWG<\/abbr> specifications have dropped the <code>onclose<\/code> and the <code>onshow<\/code> event.<\/ins><\/p>\n<p>As a final note, all the assertions I&#8217;ll made are based on my tests using the <a href=\"https:\/\/www.audero.it\/demo\/web-notifications-api-demo.html\" target=\"_blank\" rel=\"noopener\">demo page<\/a> I&#8217;ve build for <q>HTML5 API demos<\/q>.<\/p>\n<p>With these brief notes in mind, let&#8217;s now go back to the main topic. Please note that I will not cover Safari because I don&#8217;t (and will never) have a Mac.<\/p>\n<h2>Chrome 38<\/h2>\n<p>At the moment it&#8217;s hard to say for me if Chrome implements the W3C or the <abbr title=\"Web Hypertext Application Technology Working Group\">WHATWG<\/abbr> specifications. My understanding is that up to Chrome 37, the browser supported the <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> specifications, and starting from version 38 it supports the WHATWG specifications. However, because I&#8217;m analyzing only the last version of every browser, I&#8217;ll focus on Chrome 38 and its adherence to the WHATWG specifications. Said that, I see the following issues:<\/p>\n<ul>\n<li>Chrome exposes four properties to manage events (<code>onclick<\/code>, <code>onclose<\/code>, <code>onerror<\/code>, <code>onshow<\/code>) but the WHATWG specifications now only define two (<code>onclick<\/code>, <code>onerror<\/code>). <ins>Because this is a very recent change in the specifications, you can expect a change in the next version of Chrome.<\/ins><\/li>\n<li>Chrome doesn&#8217;t expose a <code>data<\/code> property<\/li>\n<\/ul>\n<p>Although Chrome 38 still exposes <code>onclose<\/code>, it&#8217;s the only browser to not fire the <code>close<\/code> event, which seems correct to me.<\/p>\n<h2>Opera 25<\/h2>\n<p>Based on the release post of Opera 25, this browser implements the WHATWG version of the Web Notifications API. Based on this assertion, I see the following issues:<\/p>\n<ul>\n<li>Opera exposes four properties to manage events (<code>onclick<\/code>, <code>onclose<\/code>, <code>onerror<\/code>, <code>onshow<\/code>) but the WHATWG specifications only define two (<code>onclick<\/code>, <code>onerror<\/code>).<\/li>\n<li>Opera is able to fire the <code>show<\/code> event, that thus can be used to execute a function<\/li>\n<li>Opera doesn&#8217;t expose a <code>data<\/code> property<\/li>\n<\/ul>\n<p>Not related with the specifications, but Opera 25 is the only browser that doesn&#8217;t show the icon of a notification if the format used is .ico (I&#8217;ve filed an issue whose ID is DNA-28523).<\/p>\n<h2>Firefox 33<\/h2>\n<p><a href=\"https:\/\/x.com\/annevk\/status\/523572380934090753\" target=\"_blank\" rel=\"noopener\">Based on this tweet by Anne van Kesteren<\/a>, Firefox implements the WHATWG version of the API. Because of this, I see the following issues:<\/p>\n<ul>\n<li>Firefox exposes four properties to manage events (<code>onclick<\/code>, <code>onclose<\/code>, <code>onerror<\/code>, <code>onshow<\/code>) but the current WHATWG specifications only define two (<code>onclick<\/code>, <code>onerror<\/code>)<\/li>\n<li>Firefox is able to fire the <code>show<\/code> event, that thus can be used to execute a function<\/li>\n<li>Firefox doesn&#8217;t expose a <code>data<\/code> property<\/li>\n<\/ul>\n<p>Not related to the specifications, but <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notification\" target=\"_blank\" rel=\"noopener\">the documentation page of the Notification object on MDN<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API\" target=\"_blank\" rel=\"noopener\">a page titled <q>Using Web Notifications<\/q><\/a> that explain how to use the Web Notifications API describe and even link to the <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> specifications. It also erroneously asserts that Firefox is the only browser to support the <code>title<\/code> attribute. <ins>Anne van Kesteren wrote me that he has informed the people managing the Mozilla developer network, so you can expect the documentation to be updated soon.<\/ins><\/p>\n<h2>Conclusions<\/h2>\n<p>In this short article I tried to give an overview of the current state of the Web Notifications API and its support among the most used and modern browsers. I&#8217;ve also highlighted what I think are inconsistencies with the current version of specifications. <ins>As I&#8217;ve learned, most of these inconsistencies are due to the very recent update of the specifications, so you can expect a change in the implementation of this API in the next release of the browsers discussed.<\/ins><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I was reviewing my <a href=\"https:\/\/github.com\/AurelioDeRosa\/HTML5-API-demos\" target=\"_blank\" rel=\"noopener\"><q>HTML5 API demos<\/q><\/a> repository to keep its information updated and relevant. In the last two weeks <a href=\"https:\/\/blog.chromium.org\/2014\/08\/chrome-38-beta-new-primitives-for-next.html\" target=\"_blank\" rel=\"noopener\">Google has released\u00a0Chrome 38<\/a>, Opera has released Opera 25, and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Firefox\/Releases\/33\" target=\"_blank\" rel=\"noopener\">Mozilla has released Firefox 33<\/a>.\u00a0Every time a new version of a browser is available, it may\u00a0introduce support for new APIs or change an already supported API\u00a0to accommodate changes in the specifications. For these reasons, a general check was much needed.<\/p>\n<p>In this article I&#8217;ll discuss what&#8217;s the current state of the Web Notifications API, what browsers support it, and what versions of the specifications. I&#8217;ll use this post also to summarize some\u00a0inconsistencies I&#8217;ve found along the way.<\/p>\n","protected":false},"author":1,"featured_media":358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[19,28,30,18,46,31,29,11],"class_list":["post-339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-browser","tag-chrome","tag-firefox","tag-internet-explorer","tag-javascript","tag-javascript-api","tag-opera","tag-web"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/notification.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-5t","jetpack-related-posts":[{"id":413,"url":"https:\/\/www.audero.it\/blog\/2015\/10\/17\/upload-files-on-github-using-github-js\/","url_meta":{"origin":339,"position":0},"title":"Upload files on GitHub using Github.js","author":"Aurelio De Rosa","date":"October 17, 2015","format":false,"excerpt":"For a few months now, I have been working on a project that employs the GitHub APIs. The application I'm\u00a0building is completely client-side and provides a feature to upload files to a repository on GitHub. To simplify the\u00a0interaction with the API, I'm\u00a0using a library called Github.js. In this article, I'll\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"github social coding","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/10\/github-social-coding.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/10\/github-social-coding.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/10\/github-social-coding.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/10\/github-social-coding.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":56,"url":"https:\/\/www.audero.it\/blog\/2013\/07\/02\/how-to-solve-the-problem-of-font-face-inside-media-queries\/","url_meta":{"origin":339,"position":1},"title":"How to Solve the Problem of @font-face Inside Media Queries","author":"Aurelio De Rosa","date":"July 2, 2013","format":false,"excerpt":"Mobile connections aren't as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn't work for some\u2026","rel":"","context":"In &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"A page with custom font not completely downloaded","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/06\/aeon-megazine-mobile-168x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":329,"url":"https:\/\/www.audero.it\/blog\/2014\/09\/19\/resources-beginner-front-end-developers\/","url_meta":{"origin":339,"position":2},"title":"Resources for Beginner Front-end Developers","author":"Aurelio De Rosa","date":"September 19, 2014","format":false,"excerpt":"Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it'd have been nice to share the same suggestions on my blog. That's exactly what you'll find in this\u2026","rel":"","context":"In &quot;Discussions &amp; Opinions&quot;","block_context":{"text":"Discussions &amp; Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"html5 css3 javascript logos","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":672,"url":"https:\/\/www.audero.it\/blog\/2017\/01\/18\/from-javascript-developer-to-javascript-engineer-find-all-celebrities-in-a-set-of-people\/","url_meta":{"origin":339,"position":3},"title":"From JavaScript developer to JavaScript engineer: find all celebrities in a set of people","author":"Aurelio De Rosa","date":"January 18, 2017","format":false,"excerpt":"In the first article of my series From JavaScript developer to JavaScript engineer titled From JavaScript developer to JavaScript engineer: Re-implementing ECMAScript 2015's String.prototype.repeat() method I've discussed how computer science concepts can help in writing better and more elegant software. Specifically, I've demonstrated how to use appropriate algorithms and data\u2026","rel":"","context":"In &quot;From JavaScript developer to JavaScript engineer&quot;","block_context":{"text":"From JavaScript developer to JavaScript engineer","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/from-javascript-developer-to-javascript-engineer\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/oscars-2014-selfie.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/oscars-2014-selfie.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/oscars-2014-selfie.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":637,"url":"https:\/\/www.audero.it\/blog\/2016\/12\/16\/from-javascript-developer-to-javascript-engineer-re-implementing-ecmascript-2015s-string-prototype-repeat-method\/","url_meta":{"origin":339,"position":4},"title":"From JavaScript developer to JavaScript engineer: re-implementing ECMAScript 2015&#8217;s String.prototype.repeat() method","author":"Aurelio De Rosa","date":"December 16, 2016","format":false,"excerpt":"As developers, our work is to solve problems which often implies writing code. Some of the problems we face look really simple in nature, but their simplicity leads us to write sub-optimal solutions without even realizing it. JavaScript developers come from very different backgrounds, and assuming that everyone has the\u2026","rel":"","context":"In &quot;From JavaScript developer to JavaScript engineer&quot;","block_context":{"text":"From JavaScript developer to JavaScript engineer","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/from-javascript-developer-to-javascript-engineer\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/time-complexity-comparison.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/time-complexity-comparison.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/12\/time-complexity-comparison.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":524,"url":"https:\/\/www.audero.it\/blog\/2018\/05\/16\/event-delegation-in-javascript\/","url_meta":{"origin":339,"position":5},"title":"Event delegation in JavaScript","author":"Aurelio De Rosa","date":"May 16, 2018","format":false,"excerpt":"One of the most common tasks a web developer deals with is to add event listeners to the elements of a page. Event listeners are employed to perform one or more actions when a given event occurs on one or more elements. For example, by using an event listener we\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":25,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/339\/revisions"}],"predecessor-version":[{"id":1060,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/339\/revisions\/1060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/358"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}