Setting Up Azure Push Notifications To Chrome Client

Here in this article I will describe what PushNotification is and what setting is required to set PushNotification Hub in Azure and send PushNotification to Chrome client.

 

Here I will describe the following things in detail:

1. Enabling Google Cloud Messaging.
2. Creating a Notification Hub in Azure.
3. Configuring the Notification Hub with the Chrome APP
4. Creating a chrome App for receiving Push Notification. (This is for installing in chrome for getting PushNotification).
5. Installing the Chrome App.
6. Sending Notification to Chrome App.

In this article I will cover the above mentioned topics one by one. Firstly, I will enable the Google cloud Messaging as follows.

Enabling Google Client Messaging.

To enable  Google client messaging we have to follow the following steps in Google Cloud Console.Login to the Google cloud console, You will find the following screen.

Now In the Dashboard, click the MyProject and create a new project as follows.

 

Now it will ask for the name of the project. Give a meaningful name to the project as follows.

 

After clicking the Create button the project with the given name created which you will see in the dashboard. After this go to Google APIs tab and click that.

 

After that search for Google cloud Messaging for Android, iPhone and Chrome in the search bar.



Now you will find the following screen, first of all click the button to enable this.

 

Now, go for credentials and select the following option on the screen:

 

Now, save the senderId that is Project ID.

. 

Now, click to create API Key and after that you will get the key. Now copy the api key, this key is needed to configure the Hub in the Azure.



Now, copy the credentials and save the sender Id. So,in this way we can get the API key in Google Cloud Messaging.

Creating a notification hub in Azure

After creating the the API key successfully now we need to create an Azure Hub, where we can use this API key to get the connection string. So, the steps to create the Hub are shown below.

Login to your azure portal by providing correct credentials.



Click Browse, search for Service Bus,



Now click the Service Namespace it will ask for your credential and will land you in Service Bus Page.

Here click on  Service Bus, Notification Hub, then click Quick Create. Type a name for your notification hub, and then click Create a new Notification Hub.

I have created ChromeNotification as follows.



Click on it, you will find the following DashBoard.



Now, click the CONFIGURE tab at the top as follows.



Now scroll down and go up to Google cloud messaging and here you put the API key that you get from Google Cloud Messaging.



Now after entering the key save this and and go to the dashboard and click the CONNECTION INFORMATION.



Now you will get the following connection string, just copy both of them.

So, in this way we are able to configure the Notification Hub. Now the main thing is to create a Chrome Extension.

Create and Configure the Notification Hub with the Chrome APP

This is the third step towards reaching our destination, because of this Chrome app we will receive push notifications. If you are not aware of how to create a Chrome app you should reach this document below. Here, it is nicely explained how to create a Chrome app.

• Create Your First Chrome App.

Here it is clearly explained about creating Chrome app and what are the things used for creating it. To create this I have used the following things.

1. manifest.json
   
2. register.js
   
3. background.js
   
4. register.html
5. gcm_128.png
   
   As we know manifest and background for a chrome app is mandatory, here i have written the code for these instead. Just copy and paste , otherwise this is already available on GitHub.
   
   Open a notepad and copy the mainfest.json and save it.
   

   {
     "name": "GCM Notifications",
     "description": "Chrome platform app.",
     "manifest_version": 2,
     "version": "0.1",
     "app": {
       "background": {
         "scripts": ["background.js"]
       }
     },
     "permissions": ["gcm", "storage", "notifications"],
     "icons": { "128": "gcm_128.png" }
   }

   Same for register.js Open the notepad and save it.
   

   var registrationId = "";
   
   function setStatus(status) {
     document.getElementById("status").innerHTML = status;
   }
   
   function register() {
     var senderId = document.getElementById("senderId").value;
     chrome.gcm.register([senderId], registerCallback);
   
     setStatus("Registering ...");
   
     // Prevent register button from being click again before the registration
     // finishes.
     document.getElementById("register").disabled = true;
   }
   
   function registerCallback(regId) {
     registrationId = regId;
     document.getElementById("register").disabled = false;
   
     if (chrome.runtime.lastError) {
       // When the registration fails, handle the error and retry the
       // registration later.
       setStatus("Registration failed: " + chrome.runtime.lastError.message);
       return;
     }
   
     setStatus("Registration succeeded. Please run the following command to send a message.");
   
     // Mark that the first-time registration is done.
     chrome.storage.local.set({registered: true});
   
     // Format and show the curl command that can be used to post a message.
     updateCurlCommand();
   }
   
   function updateCurlCommand() {
     var apiKey = document.getElementById("apiKey").value;
     if (!apiKey)
       apiKey = "YOUR_API_KEY";
   
     var msgKey = document.getElementById("msgKey").value;
     if (!msgKey)
       msgKey = "YOUR_MESSAGE_KEY";
   
     var msgValue = document.getElementById("msgValue").value;
     if (!msgValue)
       msgValue = "YOUR_MESSAGE_VALUE";
   
     var command = 'curl' +
         ' -H "Content-Type:application/x-www-form-urlencoded;charset=UTF-8"' +
         ' -H "Authorization: key=' + apiKey + '"' +
         ' -d "registration_id=' + registrationId + '"' +
         ' -d data.' + msgKey + '=' + msgValue +
         ' https://android.googleapis.com/gcm/send';
     document.getElementById("console").innerText = command;
   }
   
   window.onload = function() {
     document.getElementById("register").onclick = register;
     document.getElementById("apiKey").onchange = updateCurlCommand;
     document.getElementById("msgKey").onchange = updateCurlCommand;
     document.getElementById("msgValue").onchange = updateCurlCommand;
     setStatus("You have not registered yet. Please provider sender ID and register.");
   }

   Now open Notepad and copy the background.js and save it.
   

   // Returns a new notification ID used in the notification.
   function getNotificationId() {
     var id = Math.floor(Math.random() * 9007199254740992) + 1;
     return id.toString();
   }
   
   function messageReceived(message) {
     // A message is an object with a data property that
     // consists of key-value pairs.
   
     // Concatenate all key-value pairs to form a display string.
     var messageString = "";
     for (var key in message.data) {
       if (messageString != "")
         messageString += ", "
       messageString += key + ":" + message.data[key];
     }
     console.log("Message received: " + messageString);
   
     // Pop up a notification to show the GCM message.
     chrome.notifications.create(getNotificationId(), {
       title: 'GCM Message',
       iconUrl: 'gcm_128.png',
       type: 'basic',
       message: messageString
     }, function() {});
   }
   
   var registerWindowCreated = false;
   
   function firstTimeRegistration() {
     chrome.storage.local.get("registered", function(result) {
       // If already registered, bail out.
       if (result["registered"])
         return;
   
       registerWindowCreated = true;
       chrome.app.window.create(
         "register.html",
         {  width: 500,
            height: 400,
            frame: 'chrome'
         },
         function(appWin) {}
       );
     });
   }
   
   // Set up a listener for GCM message event.
   chrome.gcm.onMessage.addListener(messageReceived);
   
   // Set up listeners to trigger the first time registration.
   chrome.runtime.onInstalled.addListener(firstTimeRegistration);
   chrome.runtime.onStartup.addListener(firstTimeRegistration);

   Now copy the register.html and paste it as follows.
   

   <html>
   
   <head>
   <title>GCM Registration</title>
   <script src="register.js"></script>
   </head>
   
   <body>
   
   Sender ID:<input id="senderId" type="TEXT" size="20"><br/>
   <button id="register">Register</button>
   <br/><br/>
   
   <div id="status" style="background-color:#e5e5e5;padding:5px">
   </div>
   <br/>
   
   API Key:<input id="apiKey" type="TEXT" size="30"><br/>
   Message: Key<input id="msgKey" type="TEXT" size="20">   Value<input id="msgValue" type="TEXT" size="20">
   
   <textarea id="console" type="TEXT" readonly style="width:460px;height:210px;"></textarea>
   
   </body>
   
   </html>

   Now, add an image gcm_128 which should be 128*128.
   
   
   
   Save all these contents in a folder and rename it as gcm-notifications. Here is my folder,
   
   
   

           Installing the chrome App

1. Open the chrome browser and click the following settings.
   
   
   
   After clicking Extension it will show the following things.
   
   
   
   Click the Load unpacked extension and browse your folder. It will upload the chrome app as in the following:
   
   
   
   Now it will show the popup.
   
   
   
   Now add the Sender Id you get and click register to get the register_id.
   
   
   
   Now, copy the "registration_id" and launch the Rest Client and provide the appropriate details to send the Push Notification.
   
   
   Now, you can check if it will send a push notification with the following message.
   
   
   
   Thus in this way you can send Push Notifications to google Chrome client.

Read more articles on Azure:

• Getting Started With Azure DocumentDB: Day 1
• Developing Modern Applications on Azure