Category Archives: HTML

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  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.


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.


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.


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.


Step 3: Create Pushbot Application from

Give name to your app


Create Pushbot Application

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


Step 4: Configure your site and deploy the code from

Note: I have downloaded chrome SDK from 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:


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


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


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

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 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:


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

Differences between the ways resources are referenced in href/src

Sometimes small items takes too much of time. I always face issues when it comes to providing correct location of the resource so this post is an effort to minimize such issues.

Let’s understand differences in which resources are referenced. Consider the index.html has script in below ways:

    <script src="myscripts.js"> 
  1. Browser will look in the current directly of the file where this script tag is mentioned. So if you move the index.html into any other directly then browser will not be able to reference the myscript.js
  2. <script src="./myscripts.js"></script>
  3. This will be exactly same as example in #1. This is only different way of mentioning that refer the file from the current directory.
  4. <script src="/myscripts.js"></script>
  5. Here browser will look into the root directory of the website, no matter where the index.html having this tag is present.
  6. <script src="../myscripts.js"></script>
  7. Here browser will go to the parent directory of the index.html and then will look for the myscript.js

This blog post is small but thought of sharing, whenever I used to face issue then I used to try different formats and some or the other used to work. Never paid close attention but if you have so many file references and then your try outs permutation and combination increases. Having clear understanding of how references work would save some hassles.