{"id":259,"date":"2019-05-14T00:05:45","date_gmt":"2019-05-14T00:05:45","guid":{"rendered":"https:\/\/avantutor.com\/blog\/?p=259"},"modified":"2019-05-14T00:05:47","modified_gmt":"2019-05-14T00:05:47","slug":"how-i-got-web-push-notifications-to-work-on-my-site-using-airship","status":"publish","type":"post","link":"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/","title":{"rendered":"How I Got Web Push Notifications to Work on my Site Using Airship"},"content":{"rendered":"\n

Here is what I did to be able to send web push notification<\/strong> to users on my site who accepted receiving them. <\/p>\n\n\n\n

I found Airship’s<\/strong> documentation site slightly on the confusing side although the following page was helpful.<\/p>\n\n\n\n

https:\/\/docs.airship.com\/platform\/web\/getting-started\/<\/a><\/p>\n\n\n\n

I followed the instruction and got it to work on on a site with a secure https protocol and using a Chrome<\/strong> browser. I have not tested it on localhost. <\/p>\n\n\n\n

Step 1) Airship Account Sign Up<\/h2>\n\n\n\n

You need an account. It’s free. So sign up here: <\/p>\n\n\n\n

https:\/\/go.urbanairship.com\/accounts\/register\/plan\/starter\/<\/a><\/p>\n\n\n\n

Step 2) Set Up a Test of Live Environment – Create Project<\/h2>\n\n\n\n

In the email they sent you there is a link to confirm your account. Once you do it will take you to the following screen. Click on the ‘Create Project ‘ option. <\/p>\n\n\n\n

\"Step
Step 2 – Create Project<\/figcaption><\/figure>\n\n\n\n

Fill Out Form<\/h4>\n\n\n\n

This part is pretty straightforward and you can’t make a mistake. For the 3rd option I picked ‘Live’ instead of the ‘Test’. <\/p>\n\n\n\n

\"Step
Step 2 – Enter New Project Details<\/figcaption><\/figure>\n\n\n\n

Click ‘Create Project’ when done.<\/p>\n\n\n\n

Step 3) Channel Guide<\/h2>\n\n\n\n

On the next page click on ‘Channel Guide +’ then ‘Web Notifications’<\/p>\n\n\n\n

\"Step
Step 3 – Create Channel Guide<\/figcaption><\/figure>\n\n\n\n

Click on ‘Proceed to Setup’<\/p>\n\n\n\n

\"Step
Step 3 – Proceed to Setup<\/figcaption><\/figure>\n\n\n\n

Fill out all the fields. Enter an image URL for the image part. I DID NOT select the ‘mixed HTTPS site’ or the ‘Add Safari support’<\/p>\n\n\n\n

\"Step
Step 3 – Fill Out Channel Details<\/figcaption><\/figure>\n\n\n\n

Download Files<\/h4>\n\n\n\n
\"Step
Step 3 – Download Files<\/figcaption><\/figure>\n\n\n\n

Step 4) Install Code<\/h2>\n\n\n\n

Download the files and unzip them. <\/p>\n\n\n\n

\"Step
Step 4 – Downloaded Files<\/figcaption><\/figure>\n\n\n\n

Copy all the code inside ‘snippet.html’ and paste it into the head of EVERY PAGE of your site. Code below is just an example. DON’T COPY and paste that one. Copy and paste your downloaded version instead. <\/p>\n\n\n\n

<script type=\"text\/javascript\">\n!function(n,t,c,e,u){function r(n){try{f=n(u)}catch(n){return h=n,void i(p,n)}i(s,f)}function i(n,t){for(var c=0;c<n.length;c++)d(n[c],t);\n}function o(n,t){return n&&(f?d(n,f):s.push(n)),t&&(h?d(t,h):p.push(t)),l}function a(n){return o(!1,n)}function d(t,c){\nn.setTimeout(function(){t(c)},0)}var f,h,s=[],p=[],l={then:o,catch:a,_setup:r};n[e]=l;var v=t.createElement(\"script\");\nv.src=c,v.async=!0,v.id=\"_uasdk\",v.rel=e,t.head.appendChild(v)}(window,document,'https:\/\/web-sdk.urbanairship.com\/notify\/v1\/ua-sdk.min.js',\n  'UA', \/\/ This value can be changed to use a custom variable name.\n  {\n  appKey: 'YOUR-APP-KEY',\n  token: 'BEARERTOKEN-FROM-UA',\n\n  \/\/ Safari Web Push only\n  websitePushId: 'WEBSITE-PUSH-ID-FROM-UA',\n  \/\/ Open Web Push Protocol only.\n  vapidPublicKey: 'WEB-PUSH-KEY-FROM-UA',\n  \/\/ Only needed when used on insecure hosts:\n  secureIframeUrl: 'https:\/\/your.secure.domain\/path\/to\/web-push-secure-bridge.html'\n  })\n<\/script><\/code><\/pre>\n\n\n\n
Now copy the ‘push-worker.js’ into your web ROOT directory.  Be aware that sometimes the web root inside of another folder.  They could be called ‘web’ or ‘public_html’.  You can try moving (not copying) it around and see which directory works for you. <\/p>\n\n\n\n
Step 5) Register your Service Worker File<\/h2>\n\n\n\n
Service worker Javascript registration code: <\/p>\n\n\n\n
UA.then(function(sdk) {\n  sdk.register() \/\/ Returns Channel object\n})<\/code><\/pre>\n\n\n\n
I don’t know if the following is the best location for the service registration code but here is where I placed it.  Namely right before the (pasted) script closing tag of the snippet.html code.  Feel free to add it else where.  So this is how my snippet.html code snippet looks like now.  So if you have already pasted the snippet.html into the heads of every page go back and add the service registration code. <\/p>\n\n\n\n
<script type=\"text\/javascript\">\n!function(n,t,c,e,u){function r(n){try{f=n(u)}catch(n){return h=n,void i(p,n)}i(s,f)}function i(n,t){for(var c=0;c<n.length;c++)d(n[c],t);\n}function o(n,t){return n&&(f?d(n,f):s.push(n)),t&&(h?d(t,h):p.push(t)),l}function a(n){return o(!1,n)}function d(t,c){\nn.setTimeout(function(){t(c)},0)}var f,h,s=[],p=[],l={then:o,catch:a,_setup:r};n[e]=l;var v=t.createElement(\"script\");\nv.src=c,v.async=!0,v.id=\"_uasdk\",v.rel=e,t.head.appendChild(v)}(window,document,'https:\/\/web-sdk.urbanairship.com\/notify\/v1\/ua-sdk.min.js',\n  'UA', \/\/ This value can be changed to use a custom variable name.\n  {\n  appKey: 'YOUR-APP-KEY',\n  token: 'BEARERTOKEN-FROM-UA',\n\n  \/\/ Safari Web Push only\n  websitePushId: 'WEBSITE-PUSH-ID-FROM-UA',\n  \/\/ Open Web Push Protocol only.\n  vapidPublicKey: 'WEB-PUSH-KEY-FROM-UA',\n  \/\/ Only needed when used on insecure hosts:\n  secureIframeUrl: 'https:\/\/your.secure.domain\/path\/to\/web-push-secure-bridge.html'\n  })\n\n\/\/ ADDED -- REGISTER SERVICE WORKER \nUA.then(function(sdk) {\n  sdk.register() \/\/ Returns Channel object\n})\n\n<\/script><\/code><\/pre>\n\n\n\n
Step 6) Make Sure you Can Receive Web Notifications in Chrome (on Mac OS X)<\/h2>\n\n\n\n
There are two places where I would make sure you have web notifications enabled.  One is at the browser (Chrome) level and the other is on the Operating System level (MAC OS X)<\/p>\n\n\n\n
In Chrome <\/h4>\n\n\n\n
Go to: chrome:\/\/settings\/content\/notifications<\/a> and make sure your site is not on the blocked list<\/p>\n\n\n\n
\"Step
Step 6 – Chrome Notification Settings<\/figcaption><\/figure>\n\n\n\n
In Mac<\/h4>\n\n\n\n
Go to Mac notification settings<\/p>\n\n\n\n
\"Step
Step 6 – Mac OS Notification Settings 1<\/figcaption><\/figure>\n\n\n\n
Verify the general and chrome notifications settings<\/p>\n\n\n\n
\"Step
Step 6 – Mac OS Notification Settings 2<\/figcaption><\/figure>\n\n\n\n
\"Step
Step 6 – Mac OS Notification Settings <\/em>3<\/figcaption><\/figure>\n\n\n\n
 Re-Load Your Page<\/h4>\n\n\n\n
Now re-load your page in chrome (not in incognito). If everything went well you should receive a prompt message asking you if you would like to receive push notifications. <\/p>\n\n\n\n
If you did not receive such a prompt I would recommend checking your server logs and browser console. <\/p>\n\n\n\n
\"Step
Step 6 – Notification Block Allow Prompt<\/figcaption><\/figure>\n\n\n\n
Step 7) Send a Test Message<\/h2>\n\n\n\n
Login into your Airship<\/strong> dashboard if you don’t have it up already: https:\/\/go.urbanairship.com\/apps\/<\/a> <\/p>\n\n\n\n
Select the project you created earlier.  In my case I called it ‘Blog Post Project’ <\/p>\n\n\n\n
\"Step
Step 7 – Select Project <\/figcaption><\/figure>\n\n\n\n
Click ‘+ Create’<\/p>\n\n\n\n
\"Step
Step 7 – Create Message<\/figcaption><\/figure>\n\n\n\n
Select ‘All Users’ Move on to Content <\/p>\n\n\n\n
\"Step
Step 7 – Select All users<\/figcaption><\/figure>\n\n\n\n
Fill in the text area with the message you would like to send<\/p>\n\n\n\n
\"Step
Step 7 – Fill out Message Details<\/figcaption><\/figure>\n\n\n\n
Select ‘Send Now’<\/p>\n\n\n\n
\"Step
Step 7 – Send Now<\/figcaption><\/figure>\n\n\n\n
Goto ‘Review & Send’<\/p>\n\n\n\n
\"Step
Select 7 – Click Review & Send<\/figcaption><\/figure>\n\n\n\n
Click on the large ‘Send Message’ box at the bottom right of the page. <\/p>\n\n\n\n
\"Step
Step 7 – Click Send Message<\/figcaption><\/figure>\n\n\n\n
\"Step
Step 7 – Done<\/figcaption><\/figure>\n\n\n\n
Voila! <\/p>\n\n\n\n
Happy Coding!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Here is what I did to be able to send web push notification to users on my site who accepted receiving them. I found Airship’s documentation site slightly on the confusing side although the following page was helpful. https:\/\/docs.airship.com\/platform\/web\/getting-started\/ I… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[44],"tags":[52,53,51],"yoast_head":"\nHow I Got Web Push Notifications to Work on my Site Using Airship - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding<\/title>\n<meta name=\"description\" content=\"A brief and simple guide on how to get Web Push Notifications to work using Airship on a site with a secure HTTPS protocol and testing it with Chrome.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How I Got Web Push Notifications to Work on my Site Using Airship - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"og:description\" content=\"A brief and simple guide on how to get Web Push Notifications to work using Airship on a site with a secure HTTPS protocol and testing it with Chrome.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/\" \/>\n<meta property=\"og:site_name\" content=\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-14T00:05:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-14T00:05:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-13-at-2.45.00-PM-1-1024x585.png\" \/>\n<meta name=\"author\" content=\"avansardar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"avansardar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/\",\"url\":\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/\",\"name\":\"How I Got Web Push Notifications to Work on my Site Using Airship - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"isPartOf\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#website\"},\"datePublished\":\"2019-05-14T00:05:45+00:00\",\"dateModified\":\"2019-05-14T00:05:47+00:00\",\"author\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\"},\"description\":\"A brief and simple guide on how to get Web Push Notifications to work using Airship on a site with a secure HTTPS protocol and testing it with Chrome.\",\"breadcrumb\":{\"@id\":\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avantutor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How I Got Web Push Notifications to Work on my Site Using Airship\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avantutor.com\/blog\/#website\",\"url\":\"https:\/\/avantutor.com\/blog\/\",\"name\":\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"description\":\"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avantutor.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\",\"name\":\"avansardar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"caption\":\"avansardar\"},\"url\":\"https:\/\/avantutor.com\/blog\/author\/avansardar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How I Got Web Push Notifications to Work on my Site Using Airship - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"A brief and simple guide on how to get Web Push Notifications to work using Airship on a site with a secure HTTPS protocol and testing it with Chrome.","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:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/","og_locale":"en_US","og_type":"article","og_title":"How I Got Web Push Notifications to Work on my Site Using Airship - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","og_description":"A brief and simple guide on how to get Web Push Notifications to work using Airship on a site with a secure HTTPS protocol and testing it with Chrome.","og_url":"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/","og_site_name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","article_published_time":"2019-05-14T00:05:45+00:00","article_modified_time":"2019-05-14T00:05:47+00:00","og_image":[{"url":"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-13-at-2.45.00-PM-1-1024x585.png"}],"author":"avansardar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"avansardar","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/","url":"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/","name":"How I Got Web Push Notifications to Work on my Site Using Airship - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","isPartOf":{"@id":"https:\/\/avantutor.com\/blog\/#website"},"datePublished":"2019-05-14T00:05:45+00:00","dateModified":"2019-05-14T00:05:47+00:00","author":{"@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e"},"description":"A brief and simple guide on how to get Web Push Notifications to work using Airship on a site with a secure HTTPS protocol and testing it with Chrome.","breadcrumb":{"@id":"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avantutor.com\/blog\/how-i-got-web-push-notifications-to-work-on-my-site-using-airship\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avantutor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How I Got Web Push Notifications to Work on my Site Using Airship"}]},{"@type":"WebSite","@id":"https:\/\/avantutor.com\/blog\/#website","url":"https:\/\/avantutor.com\/blog\/","name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avantutor.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e","name":"avansardar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","caption":"avansardar"},"url":"https:\/\/avantutor.com\/blog\/author\/avansardar\/"}]}},"_links":{"self":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/259"}],"collection":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":3,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions\/287"}],"wp:attachment":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}