{
"name": "NAME OF YOUR APP",
"version": "1",
"manifest_version": 2,
"description": "DESCRIPTION OF YOUR APP",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"app": {
"background": {
"scripts": ["scripts/main.js", "scripts/jquery.min.js", "scripts/aerogear.js"]
}
},
"permissions": ["gcm"]
}Sending Push Notifications to Chrome Packaged Apps with AeroGear's UnifiedPush Server
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.
Details on the AeroGear UnifiedPush Server are discussed here.
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.
Here is an example of what the directory structure will look like
We will create the remaining files.
The first thing we need to do is create a manifest.json file and add the gcm permission:
| To Learn more about what the manifest file is, go here |
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.
To learn more about the Chrome App Lifcycle, go here
With the "background" code out of the way, let now lets create a basic HTML page and call it index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AeroGear Chrome App</title>
</head>
<body>
<h1>AeroGear Chrome App</h1>
<div id="messages">
<ul></ul>
</div>
<script src="scripts/app.js"></script>
</body>
</html>We also need to create our app.js:
// Here we listen for incoming messages from GCM and then we will just add them to our list
chrome.gcm.onMessage.addListener( function( message ) {
var ul = document.querySelector('#messages ul'),
li = document.createElement('li');
li.innerHTML = message.data.alert;
ul.appendChild( li );
});Now that we have our application up an running time to send messages using the AeroGear UnifiedPush Server!
Send a Push Notification
Now that we have the sample application running, it is time to use the AeroGear UnifiedPush Server for delivering a Push Notification message.
Simple Sender
We can use the UnifiedPush Server’s Send functionality to easily send a message
If all goes well, you should see the message payload being displayed on screen:
You are done
That’s all you need to use the AeroGear project for sending and receiving Push Notifications from a Chrome Packaged Application.
Last-Minute Notes
For a more information about GCM for Chrome, check out GCM Advanced Topics
