IoT, Code, Security and Server Stuff

Views are my own and not my employer's.

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

notification

How to setup and use push notifications to modern web browsers with OneSignal

by

Summary: A customer browses to your site and agrees to receive notifications.  Days, weeks or months later you have something to tell the customer.  With OneSignal you can send messages to anyone who has visited your site in the past and agreed to receive notifications. Notifications are like SMS’s but they are delivered to web browsers and are free.

Sep 2016 update: This guide was written 1 year ago, it is still valid but some parts are out of date.

http://www.onesignal.com is an awesome service for sending free push notification to iOS, Android etc. Now they offer Google Chrome/Safari push notifications
to your website (on android and desktop). The guide will be updated to offer Safari setup tips as soon as Safari support is out of beta.

Check out the summary of Web Browser notifications (https://onesignal.com/chrome).Web Browser Push Requirements

As of the 25th, you can send notifications to FireFox (daily build only).

Setting up your account (for newcomers to OneSignal)

You can use OneSignal to send push notifications to mobile apps and or just web browsers.  If you already have a iOS App configured in OneSignal skip the steps below (1.x ~ 3.6) and go to step 1 (“Setting up your account (when you already have a OneSignal app for iOS“) below.

1. You will need to have a one signal account (create one)

2. Go to https://documentation.onesignal.com/docs/web-push-setup and click “Generate a GCM API Key”. (in step 3.3 add a description but not an ip). Don’t forget to save you key.

3.1. Now login to OneSignal and click “Add a new app”

3.2. Enter a “name” and click “next“.

3.3. Then click “Website Push” then click “next”

3.4 Enter your “site url” (https://www.website.com), enter your “api key” and path to an 80×80 pixel image on your web server and click “next”

3.5. Click “Website Push” and click next.

3.6 Jump to step 4 below to setup the Website SDK and upload the files to your website.

5. After you complete the steps in 4.x (below) click the”Check My Progress” to test your  API key/SDK Setup and configuration.

6. Send a test push notification.

(or)

Setting up your account (when you already have a OneSignal app for iOS)

1. Open your app and click on App Settings then click Configure next to “Chrome Website  (GCM)” and add your Site URL, Google Server Api Key and Icon (80×80 px png).

tip: Do not use my https://cloud.fearby.com server and yes you should really have an https site as it is more secure and boosts SEO (see this guide on buying/configuring an SSL cert)

Push Configuration

4. One Signal Website SDK Setup

Next, we will follow the One Signal Website SDK  portion of the setup (I will be using the HTTPS guide but there is an HTTP guide).

4.1. Download the latest OneSignal Website SDK code from https://github.com/one-signal/OneSignal-Website-SDK/releases

4.2. Open the Zip and upload the following files from the SetupFiles folder to the root of your website ( https://yoursite.com/manifest.json, OneSignalSDKWorker.js, OneSignalSDKUpdaterWorker.js ).

4.3. Update your manifest.json to include the “name“, “short_name” and “gcm_sender_id“.

{
  "name": "

Your Website Name

",
  "short_name": "

websitename

",
  "start_url": "/",
  "display": "

standalone”, “gcm_sender_id”: “123456789

",
  "gcm_user_visible_only": true
}

4.4 Add the following into any page on your website source code that you want notifications to work on. Don’t forget to replace the app id with your one signals app id (found in your OneSignal app dashboard).

<head>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <link rel="manifest" href="/manifest.json">
  
  <script>
    var OneSignal = OneSignal || [];

    OneSignal.push(["init", {path: "/", appId: "b2f7f966-d8cc-11e4-bed1-df8f05be55ba", autoRegister: false}]);
  </script>
</head>

4.5. Consider deleting “autoRegister: false” to have the following popup appear on your site.

Opt In Push Notification Warning

Sending Notifications

1. Login to your OneSignal dashboard, open your app dashboard and click on New Push Notification.

If everything is setup you will have a Google Chrome/Safari/iOS/Android/etc Push Notifications linked up to One Signal.

Browser Push

The message should appear on your desktop in seconds.

Push Message

When a user clicks the message they are taken to your website.

What happens when the user’s Google Chrome browser is closed and a message is sent.

The message does not deliver but as soon as the user opens Google Chrome the message appears (along with other notifications).

Closed Browser

How Uses Opt Out

To disable notifications users can opt out.

Opt Out

How to add a html link based opt-in.

You can add this code to allow users to manually subscribe to notifications on your website.

<body>
  <a href="#" id="registerForPushLink">Subscribe to Notifications</a>  
  <script>
  OneSignal.push(function() {
    function registerForPush(event) {
      OneSignal.push(["registerForPushNotifications"], {modalPrompt: true});
      event.preventDefault();
    }
    document.getElementById("registerForPushLink").addEventListener('click', registerForPush, false);

  });
  </script>
</body>

Firefox Alpha Support

Firefox support is in Alpha testing mode but OneSignal inform “Firefox push notification support is in Alpha testing phase. It only works on the nightly channel of Firefox for Desktop OSes (version 44+). Firefox currently does not have a tray icon for missed notifications on Windows or Linux and clicking no a notification currently can not open a new tab yet. These 2 restrictions should be resolved once Firefox 44 is closer to release. Currently subdomain and ‘site url’ are shared with ChromeWeb. Please setup Chrome web before trying out Firefox push.”

FireFox

Troubleshooting

I copied the wrong project ID from google and when I accepted the browser request to accept notifications and I could not receive notifications?, I un-checked the project in the Google chrome notifications tray icon and then re-checked it and reloaded my page 🙂

Always make sure the Home link is highlighted in the Google Developers Console and look for the project number here (and not the number in the project drop-down area).

Project ID

Other

Google also allow you to send push messages directly via their servers (check out their guide: https://developers.google.com/cloud-messaging/ )

If this guide has helped please consider donating a few dollars.

Ask a question or recommend an article
[contact-form-7 404 "Not Found"]