Chrome Push Notifications using Pushbots from Salesforce

Now push notifications are available on web browser also along with mobile. You must have seen websites where websites request you for the access to allow notifications and if you allow the website to send notifications then even if the website is not open in any tab then also you get the notifications.

Software Requried:

Same thing could be used with salesforce to increase customer engagement in salesforce sites/communities. So even if the user has not opened your salesforce site/community then also you could notify your users about important product launches, new announcements, news about your company and list goes on.

Lets see how this can be achieved.   You would need to follow below steps to enable push notifications on your salesforce site. The same kind of implementation will work with the community as well as any internal salesforce community.

Here we would be using pushbots to deliver the notifications. Even its free account is sufficient to handle many notifications and based on its awesome dashboards you can see what is you user base and then you could go for paid service.

Push Notification will look like below:

Screen Shot 2017-05-27 at 8.32.34 PM

Push Notification

Let’s understand what are the steps to be followed in order to setup this push notifications on your salesforce site.

Step 1. Configure Google Project

Navigate to https://console.developers.google.com  and create a project. Go to the project settings and copy the project number. This project number would be used in the configurations of pushbot.

ProjectSetting

Project Setting

Activate the required APIs:  Now you need to enabled the Google Cloud Messaging for the push notifications.  Navigate to dashboard and there you would be able to see ENABLE API option. Select “Google Cloud Messaging” and enabled it.

EnableAPIs

Enable Google Cloud Messaging APIs

Create credential key:  Now we need the API key from the google project that you have created. Go to credentials and if there is no key already created and create a new server key. Copy this server key, you would need this while configuring the pushbot application.

GenerateAPIKey

Generate API Key

Step 2: Create site:

For the sake of example, we are going to create a site but it is not a required step. You can implement this for internal users also like using internal visualforce pages.

E.g: https://kmforce-chrome-developer-edition.ap2.force.com/

Step 3: Create Pushbot Application from https://pushbots.com/

Give name to your app

PushbotApp

Create Pushbot Application

Go to to Push tab of application, Add GCM Key, configure logo and configure site URL as below:

PushbotAppConfiguration

Step 4: Configure your site and deploy the code from https://github.com/kiran-machhewar/salesforce-chrome-pushbot-notification

Note: I have downloaded chrome SDK from https://pushbots.com/developer/docs/chrome-integration and modified it based on the needs of salesforce. At the time of writing of this blog static resource is up to date. But in future for any new features you might want to get it from Pushbots official site and modify it.

Once code is deployed you can set your site homepage as PushNotificatonPage for testing.

You would need to make below changes in your static resource file and PushNotificationHandler.cls

a. Configure PushNotificationHandler:

TriggerHandler

b. Configure pushbots-chrome.js from static resource:

pushbots-chrome

c. Configure service-worker.js from static resource:service-worker d. Configure manifest.js

manifest

How does this work: Now open your site and click on Enable Notification.

Screen Shot 2017-05-27 at 8.25.08 PM

Now click on Allow

Screen Shot 2017-05-27 at 8.27.02 PM

Once you you allow notifications from this site then chrome will allow itself to listen any notifications which are sent to chrome browser by Pushbots.com.

Now go to Pushbots Notification app and create a record for Push Notification

Screen Shot 2017-05-27 at 8.31.26 PM

Once you create a record a future method from trigger will get fired which will call pushbots api to add notification. Once Pushbots.com gets that notification it delivers that notification to all the users who have subscribed to notifications and every one will receive notification.

On chrome it will look like:

Screen Shot 2017-05-27 at 8.32.34 PM

On mobile it will look like:

Screenshot_20170527-203142

This is not limited to salesforce, this can be configured on any website in any framework.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: