{"id":28692,"date":"2017-01-27T18:00:03","date_gmt":"2017-01-27T23:00:03","guid":{"rendered":"http:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/"},"modified":"2017-01-25T01:27:19","modified_gmt":"2017-01-25T06:27:19","slug":"tutorial-quick-tip-easiest-way-show-browser-notifications","status":"publish","type":"post","link":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/","title":{"rendered":"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications"},"content":{"rendered":"

From Tutorialzine<\/i> –Quick Tip: The Easiest Way To Show Browser Notifications<\/strong><\/a>:<\/p>\n

“<\/span><\/p>\n

\"quick-tip-browser-notifications\"<\/a><\/div>\n

The JavaScript Web Notification API allows both desktop and mobile browsers to display notifications with custom content. Although it\u2019s support used to be quite inconsistent, the API is now compatible with most modern browsers and we are already seeing it implemented in many websites and apps. In this article we will show you the quickest way to set up browser notifications using the open-source Push.js library.<\/p>\n

”<\/span><\/em><\/p>\n

\n
READ MORE »<\/big><\/strong><\/a><\/div>\n
<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

In this tutorial we show you a quick way to display native browser notifications in your web app.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[109],"tags":[],"class_list":["post-28692","post","type-post","status-publish","format-standard","hentry","category-scripting-and-coding"],"yoast_head":"\n[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications - WHUZZUP!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications - WHUZZUP!\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we show you a quick way to display native browser notifications in your web app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/\" \/>\n<meta property=\"og:site_name\" content=\"WHUZZUP!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/\" \/>\n<meta property=\"article:author\" content=\"EricBrooksDotComWeb\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-27T23:00:03+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/cdn.tutorialzine.com\/wp-content\/uploads\/2017\/01\/quick-tip-browser-notifications-620x340.png\" \/>\n<meta name=\"author\" content=\"Eric Brooks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:site\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Brooks\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/\"},\"author\":{\"name\":\"Eric Brooks\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\"},\"headline\":\"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications\",\"datePublished\":\"2017-01-27T23:00:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/\"},\"wordCount\":93,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/cdn.tutorialzine.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/quick-tip-browser-notifications-620x340.png\",\"articleSection\":[\"Scripting and Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/\",\"name\":\"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications - WHUZZUP!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/cdn.tutorialzine.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/quick-tip-browser-notifications-620x340.png\",\"datePublished\":\"2017-01-27T23:00:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#primaryimage\",\"url\":\"http:\\\/\\\/cdn.tutorialzine.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/quick-tip-browser-notifications-620x340.png\",\"contentUrl\":\"http:\\\/\\\/cdn.tutorialzine.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/quick-tip-browser-notifications-620x340.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/tutorial-quick-tip-easiest-way-show-browser-notifications\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"name\":\"WHUZZUP!\",\"description\":\"What's new at EricBrooks.Com plus news and gossip all over CyberTown\",\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\",\"name\":\"WHUZZUP!\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"contentUrl\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"width\":512,\"height\":512,\"caption\":\"WHUZZUP!\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/EricBrooksDotComWeb\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\",\"https:\\\/\\\/www.instagram.com\\\/ericbrooksdotcom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ericbrooksdotcom\",\"https:\\\/\\\/myspace.com\\\/ericbrooksdotcom\",\"https:\\\/\\\/www.pinterest.com\\\/ericbrookscom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ericbrooksdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\",\"name\":\"Eric Brooks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"caption\":\"Eric Brooks\"},\"description\":\"Web & Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.\",\"sameAs\":[\"https:\\\/\\\/ericbrooks.com\",\"EricBrooksDotComWeb\",\"ericbrooksdotcom\",\"ericbrookscom\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\"],\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/author\\\/site-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications - WHUZZUP!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/","og_locale":"en_US","og_type":"article","og_title":"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications - WHUZZUP!","og_description":"In this tutorial we show you a quick way to display native browser notifications in your web app.","og_url":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/","og_site_name":"WHUZZUP!","article_publisher":"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","article_author":"EricBrooksDotComWeb","article_published_time":"2017-01-27T23:00:03+00:00","og_image":[{"url":"http:\/\/cdn.tutorialzine.com\/wp-content\/uploads\/2017\/01\/quick-tip-browser-notifications-620x340.png","type":"","width":"","height":""}],"author":"Eric Brooks","twitter_card":"summary_large_image","twitter_creator":"@EricBrooksCom","twitter_site":"@EricBrooksCom","twitter_misc":{"Written by":"Eric Brooks"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#article","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/"},"author":{"name":"Eric Brooks","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a"},"headline":"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications","datePublished":"2017-01-27T23:00:03+00:00","mainEntityOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/"},"wordCount":93,"commentCount":0,"publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#primaryimage"},"thumbnailUrl":"http:\/\/cdn.tutorialzine.com\/wp-content\/uploads\/2017\/01\/quick-tip-browser-notifications-620x340.png","articleSection":["Scripting and Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/","url":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/","name":"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications - WHUZZUP!","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#primaryimage"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#primaryimage"},"thumbnailUrl":"http:\/\/cdn.tutorialzine.com\/wp-content\/uploads\/2017\/01\/quick-tip-browser-notifications-620x340.png","datePublished":"2017-01-27T23:00:03+00:00","breadcrumb":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#primaryimage","url":"http:\/\/cdn.tutorialzine.com\/wp-content\/uploads\/2017\/01\/quick-tip-browser-notifications-620x340.png","contentUrl":"http:\/\/cdn.tutorialzine.com\/wp-content\/uploads\/2017\/01\/quick-tip-browser-notifications-620x340.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ericbrooks.com\/whuzzup\/tutorial-quick-tip-easiest-way-show-browser-notifications\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ericbrooks.com\/whuzzup\/"},{"@type":"ListItem","position":2,"name":"[Tutorial] Quick Tip: The Easiest Way To Show Browser Notifications"}]},{"@type":"WebSite","@id":"https:\/\/ericbrooks.com\/whuzzup\/#website","url":"https:\/\/ericbrooks.com\/whuzzup\/","name":"WHUZZUP!","description":"What's new at EricBrooks.Com plus news and gossip all over CyberTown","publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ericbrooks.com\/whuzzup\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization","name":"WHUZZUP!","url":"https:\/\/ericbrooks.com\/whuzzup\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/","url":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","contentUrl":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","width":512,"height":512,"caption":"WHUZZUP!"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","https:\/\/x.com\/EricBrooksCom","https:\/\/www.instagram.com\/ericbrooksdotcom\/","https:\/\/www.linkedin.com\/in\/ericbrooksdotcom","https:\/\/myspace.com\/ericbrooksdotcom","https:\/\/www.pinterest.com\/ericbrookscom\/","https:\/\/www.youtube.com\/user\/ericbrooksdotcom"]},{"@type":"Person","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a","name":"Eric Brooks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","url":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","caption":"Eric Brooks"},"description":"Web & Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.","sameAs":["https:\/\/ericbrooks.com","EricBrooksDotComWeb","ericbrooksdotcom","ericbrookscom\/","https:\/\/x.com\/EricBrooksCom"],"url":"https:\/\/ericbrooks.com\/whuzzup\/author\/site-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/28692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/comments?post=28692"}],"version-history":[{"count":1,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/28692\/revisions"}],"predecessor-version":[{"id":28699,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/28692\/revisions\/28699"}],"wp:attachment":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/media?parent=28692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/categories?post=28692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/tags?post=28692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}