The following step-by-step guides, gives you an introduction on how to use the AeroGear UnifiedPush Server for sending Push Notifications to your own Chrome Packaged Apps using the same Google Cloud Messaging(GCM) service that Android uses. You will need a Google account to use Google’s services. So, let’s get started:

Google Related Setup

Before the Chrome Packaged application is able to receive the notifications, you must authenticate yourself with Google as a developer. Luckily this is both easy and free to do, and doesn’t require much set-up.

Registering with Google

First, we must authenticate with Google. You will need a Google Account for this. Now open the Google Cloud Console.

If you haven’t created a project, click ``Create Project'':

Now give the new project a name:

Once the project has been created you will see the overview screen. From there grab the project number (used later as the Sender ID):

Since Chrome Packaged Apps use the same Google Cloud Messaging for Android APIs, we will need to enable them. To do that, navigate to APIs & auth > APIs and scroll down to the _Google Cloud Messaging for Android item, which you need to turn on:

Now we need to register our application and state that we are accessing the Google APIs from a Web Server, the AeroGear UnifiedPush Server in this case. First go to APIs & auth > Credentials and inside of the Public API access area click the blue CREATE NEW KEY button. This launches the following popup, where you select the Server key option:

On the next screen we just click the blue Create button to create our Server Key:

- For extra security, you may whitelist an IP address (or multiple) for the sending server

On the last screen we are finally get to see the actual value of the generated Server Key, which we will use later:

Now that Google is ready to accept and deliver our messages, we are ready to setup the UnifiedPush server.

The AeroGear UnifiedPush Server

Now that all the Google work is done, we are now ready to setup the UnifiedPush Server, so that it can be used to connect to CGM for sending messages later in the tutorial.

AeroGear UnifiedPush Server

The AeroGear UnifiedPush Server defines a logical abstraction for Mobile Applications that have support for different Push Networks. Its Push Applications can have different "Variants". For this tutorial we’ll need to create a Push Application which will contain one Chrome Packaged App Variant.

Once you have run through the Installation and Login Procedures, meet me back here. I’ll wait.

Ok, now that your back, lets continue.

For the purpose of the guide, we will be using the AdminUI and assuming that you have followed the previous guide to login and setup your UnifiedPush Server environment.

include:docs/unifiedpush/include—​register-app.asciidoc[]

You may be wondering why we are creating an Android Variant for a Chrome app. Well, the previous chrome.pushMessaging API has been deprecated since chrome 38 and will be removed soon. This has been replaced with the chrome.gcm API, which uses the same GCM as Android. This allows us to use the Android Variant for Chrome Apps!!

Click the Add Variant button. And fill out the Android options. You will want to use the Client ID and Project Number from the Google API Console in their appropriate fields.

Click Add and your variant will be created.

Expand the variant card and make note of the Variant ID and Secret fields. Both will be used later when registering your installation through the Android client SDK.

The server is now configured. Time to create a Chrome Packaged Application that will use the AeroGear JS library to connect to the UnifiedPush server and start receiving notifications.

Your first Chrome/Push App

Now that the UnifiedPush server is up and running, time to create a sample application that will exercise AeroGear’s Chrome Push library support.

Let’s get started!

Creating the application

Since a Chrome Packaged Application is just a Web Application consisting of HTML, Javascript and CSS, you can use any editor you feel comfortable with.

Now we need to create our "background event" script, which will be our main.js file.

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
width: 500,
height: 309
});
});
// This will happen when the app is first Installed
chrome.runtime.onInstalled.addListener(function() {
// First we need to register our senderId with GCM and then send the returned registrationId to the UnifiedPush Server
// This code could also go in the 'onLaunched' method
chrome.gcm.register(['YOUR_SENDERID'], function (registrationId) {
/*
Set our Variant ID and Secret and the location of the UnifiedPush Server
*/
var variantId = "VARIANT_ID",
variantSecret = "VARIANT_SECRET",
pushServerURL = "http://localhost:8080/ag-push";
// Once we have the registrationId we can then register with the UnifiedPush Server using
// the AeroGear.js library
var client = AeroGear.UnifiedPushClient(
variantId,
variantSecret,
pushServerURL
),settings = {};
// The channelId will be the "device token"
settings.metadata = {
deviceToken: registrationId
};
// Register with the UnifiedPush Server
client.registerWithPushServer( settings );
});
});

The above code is responsible for registering with the UnifiedPush Server once the application is installed.