Chrome desktop notification example

Question

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

User · Answer

Check the design and API specification  it s still a draft  or check the source from  page no longer available  for a simple example  It s mainly a call to window webkitNotifications createNotification   If you want a more robust example  you re trying to create your own Google Chrome s extension  and would like to know how to deal with permissions  local storage and such   check out Gmail Notifier Extension  download the crx file instead of installing it  unzip it and read its source code

User · Answer

See also ServiceWorkerRegistration showNotification  It appears that window webkitNotifications has already been deprecated and removed  However  there s a new API  and it appears to work in the latest version of Firefox as well  function notifyMe          Let s check if the browser supports notifications   if     quot Notification quot  in window         alert  quot This browser does not support desktop notification quot              Let s check if the user is okay to get some notification   else if  Notification permission      quot granted quot            If it s okay let s create a notification     var notification   new Notification  quot Hi there  quot              Otherwise  we need to ask the user for permission      Note  Chrome does not implement the permission static property      So we have to check for NOT  denied  instead of  default    else if  Notification permission      denied         Notification requestPermission function  permission              Whatever the user answers  we make sure we store the information       if    permission  in Notification             Notification permission   permission                    If the user is okay  let s create a notification       if  permission      quot granted quot             var notification   new Notification  quot Hi there  quot                        else       alert  Permission is   Notification permission            codepen

User · Answer

lt  DOCTYPE html gt    lt html gt    lt head gt   lt title gt Hello  lt  title gt   lt script gt  function notify     if  Notification permission      granted     Notification requestPermission       else  var notification   new Notification  hello       body   Hey there        notification onclick   function        window open  http   google com            lt  script gt   lt  head gt    lt body gt   lt button onclick  notify    gt Notify lt  button gt   lt  body gt

User · Answer

In modern browsers  there are two types of notifications    Desktop notifications - simple to trigger  work as long as the page is open  and may disappear automatically after a few seconds Service Worker notifications - a bit more complicated  but they can work in the background  even after the page is closed   are persistent  and support action buttons   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    x000D   x000D     request permission on page load x000D  document addEventListener  DOMContentLoaded   function     x000D   if   Notification    x000D    alert  Desktop notifications not available in your browser  Try Chromium     x000D    return  x000D     x000D   x000D   if  Notification permission      granted   x000D    Notification requestPermission    x000D      x000D   x000D   x000D  function notifyMe     x000D   if  Notification permission      granted   x000D    Notification requestPermission    x000D   else   x000D    var notification   new Notification  Notification title     x000D     icon   http   cdn sstatic net stackexchange img logos so so-icon png   x000D     body   Hey there  You  ve been notified    x000D        x000D    notification onclick   function     x000D     window open  http   stackoverflow com a 13328397 1269037    x000D       x000D     x000D    x000D    lt button onclick  notifyMe    gt Notify me  lt  button gt  x000D   x000D   x000D    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    Final words  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

User · Answer

I made this simple Notification wrapper  It works on Chrome  Safari and Firefox   Probably on Opera  IE and Edge as well but I haven t tested it yet   Just get the notify js file from here https   github com gravmatt js-notify and put it into your page   Get it on Bower    bower install js-notify   This is how it works   notify  title         body   Notification Text       icon   path to image png       onclick  function e         e - gt  Notification object     onclose  function e          ondenied  function e             You have to set the title but the json object as the second argument is optional

User · Answer

I like  http   www html5rocks com en tutorials notifications quick  toc-examples but it uses old variables  so the demo doesn t work anymore  webkitNotifications is now Notification

User · Answer

Notify js is a wrapper around the new webkit notifications  It works pretty well   http   alxgbsn co uk 2013 02 20 notify-js-a-handy-wrapper-for-the-web-notifications-api

User · Answer

Here is nice documentation on APIs   https   developer chrome com apps notifications  And  official video explanation by Google   https   developers google com live shows 83992232-1001

[javascript] Chrome desktop notification example

Examples related to javascript

Examples related to desktop

Examples related to google-chrome

Examples related to notifications