To send web push notifications, the client website must be configured to show the popup. The pop-up appears when the customers navigate to the website. When the customers accept to receive web push notifications, a service worker is created in the browser's background. The service worker constantly listens to the push messaging server and shows the notification even when the website is closed.
Private Browsing Mode
Web push notifications are not supported in private browsing mode.
The minimum requirements to use imiconnect JavaScript SDK are:
Apple Push Notification
An APNS certificate, to enable Push Notification services.
Google Push Notification
A FCM certificate, to enable Push Notification services.
Account
- A valid Google developer account
- A valid iOS developer account
- An active account on imiconnect platform
Software
imiconnect JavaScript SDK
Web push notifications are supported on the following OS and browsers:
Windows Desktop (Version 7 ,8,10)
Yes
Yes
No
Mac OS X 10.11 (EI Captain)
Yes
Yes
Yes
Linux (Fedora 24)
Yes
Yes
No
iOS (9.x)
No
No
No
Android (5.x)
Yes
No
No
To create a Google API project, follow these steps:
- Go to Google Firebase Console.
- Click Add Project.
- Add the following in the screen that appears:
- Project name: Enter a name for your project.
- Country/region: Select the country name.
- Select the Default setting and Terms and conditions check-box
- Click Create Project to continue.
- The Console will create a project with the given details.
- Click Continue to proceed.
- On the overview page, Click icon text toProject Overview
- The project setting details are displayed, copy the Web API Keyin imiconnect Web APP setting Page
- Click on Cloud Messaging.
While creating a chrome/Firefox app, you can enter either the Legacy server key or the Server Key in the API Key and Sender ID for Project number.
The API Key can either be the Legacy server key or the Server Key.
The snippet contains initialization information to configure the Firebase JavaScript SDK to use Authentication, Cloud Storage and the Realtime Database.
Users can take the apikey and messagingSenderId to create a web push chrome application.
The following steps will guide you through the process of APNs setup, certificate creation, and configuration.
- Go to the Apple Developer Portal.
- Proceed to Certificates, Identifiers & Profiles. The screen will display all the certificates configured for your applications.
Certificates are configured within the Certificates section.
- Click the + button to add a new certificate. A screen is displayed to select a certificate for your environment.
- Select the Apple Push Notification service SSL (Production) option.
- Select your App ID from the drop-down list.
If an App ID is not available, a new App ID must be created.
- Click Continue.
Create Certificate Signing Request (CSR)
- Follow the on-screen instructions to create a Certificate Signing Request, Generate, and Approval.
- Click Continue.
Follow the below steps if you need further assistance in Certificate Signing Request, Generate, and Approval explained in the above screen.
Launch Keychain Access
- To launch Keychain Access from an Apple Mac:
a. Open spotlight: cmd + space key.
b. Type Keychain Access. The Keychain Access screen is displayed. - Select Request a Certificate from a Certificate Authority option.
The Certificate Assistant will appear to help you create the request.
Create Certificate
Within the Certificate Assistant complete the following steps:
- Enter the following details for your certificate:
a. User Email Address: Enter an email address that matches with the Apple developer account ID.
b. Common Name: A name for your certificate.
Do not enter CA Email.
- Select Request is: -> Saved to disk option.
- Click Continue to save the certificate on to your Mac.
Submit Request
To submit a Certificate Signing request, return to the Apple Developer Portal.
- Click Choose File and select the certificate file that was created in the previous step.
- Click Generate.
The Apple Push Notification service SSL certificate is generated.
Download Certificate
Once the APNs SSL certificate has been generated it is ready to be downloaded.
- Click Download to download the certificate.
Add Certificate to Keychain
- Open the certificate to install it to your Keychain.
- Within Keychain Access:
- Select the login keychain and the category as My Certificates.
- Locate and select the certificate.
- Right-click and select Export <your certificate>.
- Save the certificate as a .p12 file.
- A password screen appears. Click OK. The certificate must be saved without a password.
When the certificate is created, it is used in imiconnect to configure push notification service.
To add a web application in imiconnect, follow these steps:
- From the imiconnect menu, click Apps. The Application screen appears.
- Click CONFIGURE APPS > MOBILE / WEB.
- Enter the application name and click NEXT.
- Select the Web platform and click NEXT. Based on the selected platform, supported browsers screen appears.
- Select browser and click NEXT. The app configuration screen appears.
- Select Push Messaging or Real-Time Messaging channel.
- Enter the following fields to configure Chrome and Firefox browsers:
a. Site Name: Enter the URL of the website to configure Web Push notification.
b. API Key: Enter the API key generated in the section Setup FCM for Chrome and Firefox Browsers.
c. Project number: Enter the project number generated in the section Setup FCM for Chrome and Firefox Browsers .
d. Notification Icon: Enter the path of the notification icon. The size of the icon should be 80x80.
e. Click Save.
- Enter the following fields to configure Safari browser:
a. Site Name: The name that is entered is displayed on the notification.
b. Site URL: The URL that is used to validate the identity of the website requesting push notifications using your ID. Only the website that matches the URL can use your imiconnect ID for push notifications.
c. APNs keys: Click the button to upload the .p12 file that is generated in the section Setup APNs for Safari Browser.
d. Password: Enter the password that is set while generating the certificate in the section Setup APNs for Safari Browser. Leave this field blank if the certificate was generated without a password.
e. Notification Icon: It is mandatory to upload all five icons. Click the respective buttons to upload the icons.
f. Click Save.
- Configure RTM's Transport and Security settings.
Real-time messaging
Transport protocols
Two transport protocols are available for establishing RTM connection with imiconnect. They are Web Socket and MQTT. You can configure them as primary and secondary. In case the connection is not established on the primary protocol, it will fall back to secondary protocol.
Security settings
Enable secured ports to establish RTM connection on the secured port for MQTT and WebSocket as an extra layer of security.
Enable RTM payload encryption to encrypt the RTM payload in transit.
- Click Save.
A confirmation message appears when the application is created successfully.
- When the web app is added successfully, you can notice a DOWNLOAD link under Web configuration section. Click the link to download the JavaScript SDK.
- Extract the zip file, to a location on your local computer. You will notice js, manifest folders and sw.js file.
- Copy sw.js file, js, and manifest folder to the root folder of your web application.
- Copy the below code and paste it in the header or body of your default web page. Replace appId with your actual value.
For example, to show the web push popup on loading the index.html page, copy the below code and paste it in header or body of your index.html page. Replace the appId with the id that is generated in imiconnect for the web application.
<script src="../js/jquery.min.js"></script>
<script src="//www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script>
<script src="//www.gstatic.com/firebasejs/4.6.2/firebase-messaging.js"></script>
<script src="../js/mqttws31.js"></script>
<script src="../js/IMIClient.js"></script>
<script>
try {
var config = new IMI.ICConfig(appId, clientKey);
IMI.IMIconnect.startup(config); //default method
if (!IMI.IMIconnect.isRegistered()) {
var callback = {
onSuccess: function() {
Console.log("reg success");
//logic to subscribe to topics or publish messages
},
onFailure: function(errormsg) {
Console.log("reg failed");
}
};
var deviceProfile=new IMI.ICDeviceProfile(deviceId, userId);
//here user id is optional (If user id not there user can call deviceID, //userId will be generated by IMIConnect and passed to callback function)
//var deviceProfile = new IMI.ICDeviceProfile(deviceId);//
IMI.IMIconnect.register(deviceProfile, callback);
}
} catch (err) {
Console.log(err);
}
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/mqttws31.js"></script>
<script src="../js/IMIClient.js"></script>
<script>
try {
var config = new IMI.ICConfig(appId, clientKey);
IMI.IMIconnect.startup(config);
if (!IMI.IMIconnect.isRegistered()) {
var callback = {
onSuccess: function() {
Console.log("reg success");
//logic to subscribe to topics or publish messages
},
onFailure: function(errormsg) {
Console.log("reg failed");
}
};
var deviceProfile=new IMI.ICDeviceProfile(deviceId, userId);
//here user id is optional (If user id not there user can call deviceID,
userId will be generated by IMIConnect and passed to callback function)//
//var deviceProfile = new IMI.ICDeviceProfile(deviceId);//
IMI.IMIconnect.register(deviceProfile, callback);
}
} catch (err) {
Console.log(err);
}
</script>
Now the web push configuration is complete to display a popup when the default web page is loaded.
- When the web page is loaded a popup appears. When a user clicks on Allow, unique ids are generated and stored in the profile manager. The ids generated are:
Chrome
chrome_pushid
Firefox
firefox_pushid and key
Safari
safari_pushid
- To send messages without a customerid, you must use browser-specific pushids.
You can send push messages to customers in many methods. Below is one of them:
- When the customers click Allow button, the push details are stored in the profile manager.
- Get the profiles based on appid using getAppProfile API. You will get all the browser-specific push ids.
- Use Messaging API, to send push messages to the push ids.
Prerequisites
- Follow steps from here to download JS SDK specific to your App.
- Ensure manifest<your_app_id>.json is present in /manifest
- In Chrome Inspect, verify on Console that plugin is available by typing:
IMI
Code Integration
Here is a summary of the process required to implement RT. Following these steps is JavaScript code for each step.
- Startup Plugin with Asset Details.
- Check if the user is already registered.
- Register User.
- Connect for RTM.
- Register messageListener.
- Send a message using publishMessage.
var appId = "#####";
var appSecret = "#####";
var config = new IMI.ICConfig(appId, appSecret);
IMI.IMIconnect.startup(config);
b. Specify pathConfig (optional):
If the website is hosted within a sub-folder, use pathConfig parameter to specify folders:
- assets: folder where all JS SDK files are located including the manifest folder. By default, this is derived as:
window.location.origin + '/assets';
- root: folder where sw.js file is located
Important! sw.js file should always be in website root for Push notifications to work properly.
//web https://<yourdomainname>.imimobile.net/<subfolder>/index.html
folder Demo
var pathConfig = {
"assets": "/<subfolder>/assets/",
"root": "/<subfolder>/"
}
//for https://sdkdemo.imicxsuite.io/ Demo
var pathConfig = {
"assets": "",
"root": ""
}
var config = new IMI.ICConfig(appId, appSecret, pathConfig);
- Check if the user is already registered using the isRegistered method.
var isRegistered = IMI.IMIconnect.isRegistered();
- To register a user, call:
function register() {
var deviceID = IMI.ICDeviceProfile.getDefaultDeviceId();
var deviceProfile = new IMI.ICDeviceProfile(deviceID,userId);
IMI.IMIconnect.register(deviceProfile, registerCallback);
}
}
registerCallback = {
onSuccess: (data) => {
Console.log('registerCallback onSuccess');
},
onFailure: (err) => {
err = err || {};
Console.log(err);
}
};
regristrationCallback, onSuccess (data) contains the following parameters:
- accessToken
- appDomain
- status
- updatedDate
- userid.
- Connect for In-app messages.
var messaging = IMI.ICMessaging.getInstance();
if (!messaging.isConnected())
messaging.connect();
- Register messageListener.
var msgCallBack = {
onConnectionStatusChanged: (statuscode) => {
console.log('onConnectionStatusChanged to', statuscode);
},
onMessageReceived: (message) => {
console.log('onMessageReceived ', message);
//Perform action
}
};
var messaging = IMI.ICMessaging.getInstance();
messaging.setICMessagingReceiver(msgCallBack);
In this particular SDK, even republished messages are received from messageListener.
- Send message using publishMessage.
function publishMessage(threadtitle, threadid, msg, mediaId, callback) {
var messaging = IMI.ICMessaging.getInstance();
var message = new IMI.ICMessage();
message.setMessage(msg);
var thread = new IMI.ICThread();
thread.setId(threadid);
thread.setTitle(threadtitle);
thread.setType(IMI.ICThreadType.Conversation);
message.setThread(thread);
if (mediaId && mediaId !== "") {
var mediaArray = [];
var icAttach = new IMI.ICAttachment();
icAttach.setMediaId(mediaId);
mediaArray.push(icAttach);
message.setAttachments(mediaArray);
}
try {
messaging.publishMessage(message, callback);
} catch (error) {
alert("Failed to publish Message " + (error.description || ""));// handle error here
}
}
You need to pass a complete thread object while publishing the first message in any thread.
Parameters:
threadtitle
ICThread
threadid
String
messageText
String
mediaId
Array
callback
Callback
Updated 5 days ago