Enable Safari, Chrome & Firefox web browser applications to receive IBM Cloud Push notifications and, send IBM Cloud Push notifications to these Chrome & Firefox web browser applications. This section describes how to install and use the client JavaScript Push SDK to further develop your Web applications.
For installing the Javascript SDK in Chrome and Firefox Websites application follow the steps.
Download the BMSPushSDK.js,BMSPushServiceWorker.js and manifest_Website.json.
-
Edit the
manifest_Website.jsonfileFor Chrome browser do the following,
-
Change
nameto your Website's name -
Change
gcm_sender_idto your Google Cloud Messaging (GCM) sender_ID (How to get it ? Click here). The gcm_sender_id value contains only numbers.{ "name": "YOUR_WEBSITE_NAME", "gcm_sender_id": "GCM_Sender_Id" }
For Firefox browser add the following values in
manifest_Website.jsonfile.-
Change
nameto your Website's name.{ "name": "YOUR_WEBSITE_NAME" }
-
-
Change the
manifest_Website.jsonfile name tomanifest.json. -
Add the
BMSPushSDK.js,BMSPushServiceWorker.jsandmanifest.jsonto your root directory. -
Include the
manifest.jsonin<head>tag of your html file .<link rel="manifest" href="manifest.json"> -
Include IBM Cloud Web push SDK to the web application from github.
<script src="BMSPushSDK.js" async></script>
For installing the Javascript SDK in Chrome and Firefox Websites application follow the steps.
Download the BMSPushSDK.js and manifest_Chrome_Ext.json (For chrome Extensions) or manifest_Chrome_App.json (for Chrome Apps).
-
Configure manifest file,
- For
Chrome Appin themanifest_Chrome_App.jsonfile providename,description, andicons. - Add the
BMSPushSDK.jsin theapp.background.scripts. - Change the
manifest_Chrome_App.jsontomanifest.json.
- For
Chrome Extensionsin themanifest_Chrome_Ext.jsonfile providename,description, andicons. - Add the
BMSPushSDK.jsin thebackground.scripts. - Change the
manifest_Chrome_Ext.jsontomanifest.json.
- For
-
In your
Javascriptfile add the following to receive push notificationschrome.gcm.onMessage.addListener(BMSPushBackground.onMessageReceived) chrome.notifications.onClicked.addListener(BMSPushBackground.notification_onClicked); chrome.notifications.onButtonClicked.addListener(BMSPushBackground.notifiation_buttonClicked);
Note: For Chrome App add the above ocde in background.js
Initialse the push SDK with IBM Cloud push notifications service app GUID and app Region.
To get your app GUID, select the Configuration option in the navigation pane of your push services and click Mobile Options.Modify the code snippet to use your IBM Cloud push notifications service appGUID parameter.
The App Region specifies the location where the Push service is hosted. You can use one of the following three values:
- For US Dallas -
.ng.bluemix.net - For US East -
.us-east.bluemix.net - For UK -
.eu-gb.bluemix.net - For Sydney -
.au-syd.bluemix.net - For Germany -
.eu-de.bluemix.net
var bmsPush = new BMSPush()
function callback(response) {
alert(response.response)
}
var initParams = {
"appGUID":"push app GUID",
"appRegion":"Region where service hosted",
"clientSecret":"push app client secret", // optional parameter. This value is needed for userId based notifications registration.
"websitePushIDSafari": "website Push ID for safari" // Optional parameter for Safari web push,
"deviceId":"Optional deviceId for device registration"
}
bmsPush.initialize(params, callback)
Use the register() API to register the device with IBM Cloud Push Notifications service. For registering from Chrome , add the Google Cloud Messaging (GCM) API Key and Web Site URL in the IBM Cloud Push Notifications service web configuration dashboard under Chrome setup .
For registering from Firefox , add Web Site URL in the IBM Cloud Push Notifications service web configuration dashboard under Firefox setup.
Use the following code snippet to register in IBM Cloud push notifications service.
var bmsPush = new BMSPush()
function callback(response) {
alert(response.response)
}
var initParams = {
"appGUID":"push app GUID",
"appRegion":"Region where service hosted",
"clientSecret":"push app client secret"
}
bmsPush.initialize(initParams, callback)
bmsPush.register(function(response) {
alert(response.response)
})
Note: Remember to keep custom DeviceId unique for each device. For Debugging use
bmsPush.isDebugEnable(true).
For UserId based registration use the following code snippet,
var bmsPush = new BMSPush()
function callback(response) {
alert(response.response)
}
var initParams = {
"appGUID":"push app GUID",
"appRegion":"Region where service hosted",
"clientSecret":"push app client secret"
}
bmsPush.initialize(initParams, callback)
bmsPush.registerWithUserId("your UserId",function(response) {
alert(response.response)
})
To get the available tags use the retrieveAvailableTags() method.
bmsPush.retrieveAvailableTags(function(response) { //Retrieve available tags
var jsonResponse = JSON.parse(response.response)
var tagsArray = []
for (i in jsonResponse.tags){
tagsArray.push(jsonResponse.tags[i].name)
}
alert(tagsArray)
})
The tag subscription is handled by the subscribe() method. Pass the array of tag names as the parameter.
bmsPush.subscribe(tagsArray,function(response) {
alert(response.response)
})
To Un-subscribe for a tag or tags use the unSubscribe() method. Pass the array of tag names as the parameter.
bmsPush.unSubscribe(tagsArray,function(response) {
alert(response.response)
}
To unregister the device from receiving push notification add the following unRegisterDevice() method.
bmsPush.unRegisterDevice(function(response) {
alert(response.response)
}
Add the variables in the Push initialize params values.
var templateValues = {
"userName":"testname",
"accountNumber":"3564758697057869"
}
var initParams = {
"appGUID":"push app GUID",
"appRegion":"Region where service hosted",
"clientSecret":"push app client secret",
"pushVaribales":templateValues
}
bmsPush.initialize(initParams, callback)
While registering the device IBM Cloud Push Notifications Web SDK will pass these variables to IBM Cloud Push Notifications service.
While sending push notification add the varibale key in {{}}
{
"message": {
"alert": "hello {{username}} , balance on your account {{accountNumber}} is $1200"
}
}-
Please visit for samples - Github Sample
-
Video Tutorials Available here - IBM Cloud Push Notifications
- Visit the IBM Cloud Developers Community.
Twitter | YouTube | Blog | Facebook | Meetup
=======================
Copyright 2016-17 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.