/ browser push notifications

Chrome Web Push guide

Download Javascript

Please note that Chrome pushes require https websites until Chrome implements encryption of the push payload;

Chrome pushes will not work with self-signed certificates (https/ssl). You should get an SSL certificate signed by trusted Authority. Alternatively you can launch Chrome with “-ignore-certificate-errors” parameter.

Overview

Chrome Web Push Notifications allow you to establish the most convenient channel of communication with your website audience on both desktop and Android devices.

chrome_allow chrome-web-push-screen

With 49% desktop browsers and 27% of the mobile web browsers market share of Chrome this technology provides huge opportunities for brands to engage with their audience in a modern and handy manner.

For mobile the user experience is the same as with native Android push notifications – they are asked to opt-in once they open your website, and then receive regular push notifications that lead them to your site in Chrome, and that is achieved with one and the same code below.

Screenshot_2015-04-22-16-15-08

Screenshot_2015-04-22-16-21-18

As Chrome Web Push implementation is still a little bit raw, there are several limitations of current implementation. It should be getting better as Chrome implements the Push API in full scale in their next releases. Current limitations are:

  • Works only on Chrome starting with v.42;
  • Currently, you can’t send any data in Chrome push notifications, therefore, when push arrives, we fetch the latest message from Push History for the given Pushwoosh Application Code;
  • It works only with https websites until Chrome implements encryption of payload;
  • The target URL for each push notification has to be specified in the URL field of Additional Data tab of the Send Push form.

Intergation

In order to enable Chrome Web Push notifications for your website you should follow instructions below:

  1. Add the script and manifest into head section on all pages of your website:
    source code - "/pushwoosh-chrome.js"
    manifest - "/manifest.json"

  2. Create a manifest.json file with the JSON content below, and place it in the root directory of your website:

{ "name": "Pushwoosh Demo", "short_name": "Pushwoosh Demo", "display": "standalone", "gcm_sender_id": "123456789012", // Your GCM Project Number "gcm_user_visible_only": true }

Note that "gcm_sender_id" value is the Project Number that you have to obtain in Google Developer Console.
Make sure that you enable both Google Cloud Messaging for Android and Google Cloud Messaging for Chrome for the project. Do not forget to copy your API Server Key as well.

  1. Download two javascript files from Pushwoosh github repo, and make the following changes:

    1. Add your Pushwoosh Application Code in both files:
var APPLICATION_CODE = "12345-ABCDE"; // Your Pushwoosh Application Code
    1. Specify your own default icon (256x256px .png looks fine) and the title for notifications in the service-worker.js
var pushDefaultImage = 'https://cp.pushwoosh.com/img/logo-medium.png'; var pushDefaultTitle = 'Title';
  1. Place pushwoosh-chrome.js and service-worker.js files in the root directory of your website. If you place files elsewhere, make sure you specify the right path to service-worker.js in SERVICE_WORKER_URL variable of pushwoosh-chrome.js:
var SERVICE_WORKER_URL = '/service-worker.js';
  1. Go back to your application Configuration in Pushwoosh control Panel, add the Server Key for the project in the settings, and save configuration.

That’s it – now when you launch your website in Chrome it will ask to enable push notifications for the website. In your Pushwoosh Control Panel you can set the target URL, add icons for this notifications (use the full path external URL) and specify the title of the push.