{"id":815,"date":"2012-07-27T06:52:33","date_gmt":"2012-07-26T20:52:33","guid":{"rendered":"http:\/\/makesomecode.com\/?p=815"},"modified":"2015-01-16T18:45:23","modified_gmt":"2015-01-16T18:45:23","slug":"web-notifications-safari-6-0-and-osx-10-8","status":"publish","type":"post","link":"https:\/\/nickv.codes\/blog\/web-notifications-safari-6-0-and-osx-10-8\/","title":{"rendered":"Web Notifications Safari 6.0 and OSX 10.8"},"content":{"rendered":"<p>Web notifications have been around for a while, but with Apple&#8217;s latest release of OSX 10.8 and notification center they are most likely to become a bit more popular. I had a look into the developer documentation for safari and found a nice chunk of code for displaying notifications in Safari 6.0.<\/p>\n<p><a href=\"https:\/\/nickv.codes\/wp-content\/uploads\/2012\/07\/notify.png\"><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-840\" src=\"https:\/\/nickv.codes\/wp-content\/uploads\/2012\/07\/notify-300x79.png\" alt=\"notify\" width=\"300\" height=\"79\" srcset=\"https:\/\/nickv.codes\/wp-content\/uploads\/2012\/07\/notify-300x79.png 300w, https:\/\/nickv.codes\/wp-content\/uploads\/2012\/07\/notify.png 324w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<!--more--><br \/>\nNote: This demo has only been tested with OSX 10.8 and Safari 6.0. I&#8217;m not sure of how other browsers will handle this.<\/p>\n<h2>Demo<\/h2>\n<p><script type=\"text\/javascript\">\nvar notify = function (title, options) {\n    \/\/ Check for notification compatibility.\n    if (!'Notification' in window) {\n        \/\/ If the browser version is unsupported, remain silent.\n        return;\n    }\n    \/\/ Log current permission level\n    console.log(Notification.permission);\n    \/\/ If the user has not been asked to grant or deny notifications\n    \/\/ from this domain...\n    if (Notification.permission === 'default') {\n        Notification.requestPermission(function () {\n            \/\/ ...callback this function once a permission level has been set.\n            notify(title, options);\n        });\n    }\n    \/\/ If the user has granted permission for this domain to send notifications...\n    else if (Notification.permission === 'granted') {\n        var n = new Notification(\n                    title,\n                    {\n                      'body': title,\n                      \/\/ ...prevent duplicate notifications\n                      'tag' : title\n                    }\n                );\n        \/\/ Remove the notification from Notification Center when clicked.\n        n.onclick = function () {\n            this.close();\n        };\n        \/\/ Callback function when the notification is closed.\n        n.onclose = function () {\n            console.log('Notification closed');\n        };\n    }\n    \/\/ If the user does not want notifications to come from this domain...\n    else if (Notification.permission === 'denied') {\n        \/\/ ...remain silent.\n        return;\n    }\n};\n<\/script><\/p>\n<p>The link below will first ask permission, then display a notification:<\/p>\n<p><a onclick=\"notify('Cool Notification!', { body: 'WOW! This is the body for a very cool notification.'});return false;\" href=\"#\">Click for a Notification<\/a><\/p>\n<p>*NOTE: If this doesn&#8217;t work for you sometimes you may have to restart your browser after granting permission for notifications to be displayed from this site. This seems to possibly be a bug in Chrome and Safari.<\/p>\n<h2>Code<\/h2>\n<p>We basically create a function &#8216;notify&#8217; that we can call later to output our notification. The nice thing is that it will do all the permission checking for us:<\/p>\n<pre class=\"prettyprint lang-javascript\">var notify = function (title, options) {\r\n    \/\/ Check for notification compatibility.\r\n    if (!'Notification' in window) {\r\n        \/\/ If the browser version is unsupported, remain silent.\r\n        return;\r\n    }\r\n    \/\/ Log current permission level\r\n    console.log(Notification.permission);\r\n    \/\/ If the user has not been asked to grant or deny notifications\r\n    \/\/ from this domain...\r\n    if (Notification.permission === 'default') {\r\n        Notification.requestPermission(function () {\r\n            \/\/ ...callback this function once a permission level has been set.\r\n            notify(title, options);\r\n        });\r\n    }\r\n    \/\/ If the user has granted permission for this domain to send notifications...\r\n    else if (Notification.permission === 'granted') {\r\n        var n = new Notification(\r\n                    title,\r\n                    {\r\n                      'body': title,\r\n                      \/\/ ...prevent duplicate notifications\r\n                      'tag' : title\r\n                    }\r\n                );\r\n        \/\/ Remove the notification from Notification Center when clicked.\r\n        n.onclick = function () {\r\n            this.close();\r\n        };\r\n        \/\/ Callback function when the notification is closed.\r\n        n.onclose = function () {\r\n            console.log('Notification closed');\r\n        };\r\n    }\r\n    \/\/ If the user does not want notifications to come from this domain...\r\n    else if (Notification.permission === 'denied') {\r\n        \/\/ ...remain silent.\r\n        return;\r\n    }\r\n};<\/pre>\n<p>This is where we actually call the notify function. This is the code from the above demo link:<\/p>\n<pre class=\"prettyprint lang-html\">&lt;a onclick=\"notify('Cool Notification!', { body: 'WOW! This is the body for a very cool notification.'});return false;\" href=\"#\"&gt;Click for a Notification&lt;\/a&gt;<\/pre>\n<p>You may be wondering what the &#8216;options&#8217; object takes. Here is is straight from the Apple Safari Docs:<\/p>\n<blockquote><p>The only required parameter is the title. Available keys that can be included in the options object are as follows:<\/p>\n<p><strong>body:<\/strong> The notification\u2019s subtitle.<\/p>\n<p><strong>tag:<\/strong> The notification\u2019s unique identifier. This prevents duplicate entries from appearing in Notification Center if the user has multiple instances of your website open at once.<\/p>\n<p><strong>onshow:<\/strong> An event that fires when the notification is first presented onscreen.<\/p>\n<p><strong>onclick:<\/strong> An event that fires if the user clicks on the notification as an alert, a banner, or in Notification Center. By default, clicking a notification brings the receiving window into focus, even if another application is in the foreground.<\/p>\n<p><strong>onclose:<\/strong> An event that fires when the notification is dismissed, or closed in Notification Center.<\/p>\n<p><strong>onerror:<\/strong> An event that fires when the notification cannot be presented to the user. This event is fired if the permission level is set to denied or default.<br \/>\nThe notification is placed in a queue and will be shown when no notifications precede it. The subtitle is always the domain or extension name from which the notification originated, and the icon is always the Safari icon.<\/p><\/blockquote>\n<p>You can see in our example we&#8217;re already making use of the &#8216;body&#8217; option. Here&#8217;s an example of calling a few of those options again from the developer docs:<\/p>\n<pre class=\"prettyprint lang-javascript\">notify( '1 new friend request',\r\n         { 'body': 'Jill would like to add you as a friend',\r\n            \/\/ prevent duplicate notifications\r\n            'tag' : 'unique string',\r\n            \/\/ callback function when the notification is closed\r\n            'onclose': function() {\r\n                 console.log('notification closed');\r\n          }\r\n       )<\/pre>\n<p>For more info head over to <a title=\"Safari Notifications\" href=\"https:\/\/developer.apple.com\/library\/safari\/#documentation\/AppleApplications\/Conceptual\/SafariJSProgTopics\/Articles\/SendingNotifications.html#\/\/apple_ref\/doc\/uid\/TP40001483-CH23-SW6\" target=\"_blank\">Safari&#8217;s developer docs<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web notifications have been around for a while, but with Apple&#8217;s latest release of OSX 10.8 and notification center they are most likely to become a bit more popular. I had a look into the developer documentation for safari and found a nice chunk of code for displaying notifications in Safari 6.0.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,9],"tags":[32,112,111],"_links":{"self":[{"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/posts\/815"}],"collection":[{"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/comments?post=815"}],"version-history":[{"count":0,"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/posts\/815\/revisions"}],"wp:attachment":[{"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/media?parent=815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/categories?post=815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nickv.codes\/wp-json\/wp\/v2\/tags?post=815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}