{"id":33940,"date":"2017-07-04T21:01:52","date_gmt":"2017-07-04T13:01:52","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=33940"},"modified":"2017-07-04T16:34:52","modified_gmt":"2017-07-04T08:34:52","slug":"browser-push-notifications-pushjs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/","title":{"rendered":"Send Browser Push Notifications with Push.js"},"content":{"rendered":"<p>Native mobile apps always had support for <strong>push notifications<\/strong>. But, these notifications were absent from the web until the <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/notification\" target=\"_blank\">Notifications API<\/a><\/strong> popped up.<\/p>\n<p>The Notifications API <strong>works through JavaScript<\/strong>. It allows you to <strong>send push notifications<\/strong> directly to the user\u2019s computer through their browser window. It\u2019s not that hard to set it up yourself, but why reinvent the wheel?<\/p>\n<p><strong><a href=\"https:\/\/pushjs.org\/\" target=\"_blank\">Push.js<\/a><\/strong> is a <strong>free notifications library<\/strong> that handles all the basic push notifications features with a few lines of JavaScript.<\/p>\n<p>These browser-based notifications are still very new and they have ways to go before catching on. Users need to <strong>allow notifications from certain websites<\/strong> before they will appear, so unless your audience already trusts your website, it can be tough getting people to accept.<\/p>\n<figure><a href=\"https:\/\/pushjs.org\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg\" alt=\"Push.js homepage\" width=\"750\" height=\"499\"><\/a><\/figure>\n<p>But, the best way to learn is to try and see what happens. You can send visitors links to your newest blog posts, or information about new updates to the site or even requests to sign up for your newsletter. And, with Push.js it\u2019s crazy simple to get this working.<\/p>\n<p>You can download the library from <strong>npm<\/strong> or <strong>Bower<\/strong>, or just grab it directly <strong><a href=\"https:\/\/github.com\/Nickersoft\/push.js\" target=\"_blank\">from GitHub<\/a><\/strong>.<\/p>\n<p>From there, you <strong>add some basic JavaScript<\/strong> to your page to create the push notification. If the user accepts the request from your site then they\u2019ll consistently get all new notifications you send. Pretty cool!<\/p>\n<p>You can set the notification header, the main content, and other features like the auto-close time.<\/p>\n<p>Here\u2019s a <strong>sample snippet<\/strong> from the Push.js website:<\/p>\n<pre>\r\nPush.create(\"Hello world!\", {\r\n    body: \"How's it hangin'?\",\r\n    icon: 'icon.png',\r\n    timeout: 4000,\r\n    onClick: function () {\r\n        window.focus();\r\n        this.close();\r\n    }\r\n});\r\n<\/pre>\n<p>You <strong>don\u2019t need to know much JavaScript<\/strong> to get this library working on your site. If you just copy\/paste or work through the <a href=\"https:\/\/github.com\/Nickersoft\/push.js\" target=\"_blank\">documentation<\/a> you should have push notifications running in less than 15 minutes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/02-push-notification-sample.jpg\" alt=\"Push.js plugin\" width=\"1000\" height=\"292\"><\/figure>\n<p>Not everyone likes these browser notifications and this library certainly won\u2019t be useful on every website. But, if you\u2019re willing to give this a try it\u2019s super easy to set up and will make push notifications a heck of a lot easier.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/\">Web Design: Hide \/ Show Notification Bar With CSS3<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The Notifications API works through JavaScript. It allows you to send push notifications directly to the user\u2019s computer through their browser window. It\u2019s not that hard to set it up yourself, but&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497,2556],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Send Browser Push Notifications with Push.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Send Browser Push Notifications with Push.js\" \/>\n<meta property=\"og:description\" content=\"Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-04T13:01:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Send Browser Push Notifications with Push.js\",\"datePublished\":\"2017-07-04T13:01:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/\"},\"wordCount\":347,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/browser-push-notifications-pushjs\\\/01-pushjs-notifications-script.jpg\",\"keywords\":[\"Javascript Library\",\"notification\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/\",\"name\":\"Send Browser Push Notifications with Push.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/browser-push-notifications-pushjs\\\/01-pushjs-notifications-script.jpg\",\"datePublished\":\"2017-07-04T13:01:52+00:00\",\"description\":\"Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/browser-push-notifications-pushjs\\\/01-pushjs-notifications-script.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/browser-push-notifications-pushjs\\\/01-pushjs-notifications-script.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/browser-push-notifications-pushjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Send Browser Push Notifications with Push.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Send Browser Push Notifications with Push.js - Hongkiat","description":"Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The","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:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/","og_locale":"en_US","og_type":"article","og_title":"Send Browser Push Notifications with Push.js","og_description":"Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The","og_url":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-07-04T13:01:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Send Browser Push Notifications with Push.js","datePublished":"2017-07-04T13:01:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/"},"wordCount":347,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg","keywords":["Javascript Library","notification"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/","url":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/","name":"Send Browser Push Notifications with Push.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg","datePublished":"2017-07-04T13:01:52+00:00","description":"Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up. The","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/browser-push-notifications-pushjs\/01-pushjs-notifications-script.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/browser-push-notifications-pushjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Send Browser Push Notifications with Push.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-8Pq","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=33940"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33940\/revisions"}],"predecessor-version":[{"id":33944,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33940\/revisions\/33944"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=33940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=33940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=33940"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=33940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}