Simon's Blog

Views are my own and not my employer's.

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

one signal

Setting web push notifications in WordPress with OneSignal

by

Note: I will update this guide to include full WordPress push integration soon (this method works with any HTML website)

When visiting a friends website ( https://markontech.com/ ) I noticed he had push notifications setup.

Screenshot of push notification ability at https://markontech.com/

I was able to click a bell notification allow push notifications to be sent when he posts new content. Nice

When I clicked subscribe Google Chrome prompted me to allow or block notifications.

Screenshot showing Chrome asking for permissions to receive push notifications

A floating icon allows me to unsubscribe at anytime and manage subscription details.

Screehshot showing an unsubscribe icon for removing push notifications

Mark from https://markontech.com/ said he was using a WordPress plugin from OneSignal.

I checked out One Signal from a coding point of view in 2015 (read here) and apparently they now have a WordPress Plugin.

Who knew meme (girl with amazed look and hands up)

Price?

The One Signal blog post says is free under 30,000 subscribers then it jumps to $99/m for above 30,000 subscribers

Pricing table screenshot from https://onesignal.com/pricing

You will need to pay if you want full GDPR compliance (read more here).

Installing the OneSignal Plugin

I visited the OneSignal Plugin page at https://wordpress.org/plugins/onesignal-free-web-push-notifications/

Screenshot of https://onesignal.com Push plugin page at WordPress

I noted the latest plugin URL path

https://downloads.wordpress.org/plugin/onesignal-free-web-push-notifications.1.16.16.zip

I downloaded the zip file (from the command line)

wget https://downloads.wordpress.org/plugin/onesignal-free-web-push-notifications.1.16.16.zip
--2019-03-19 19:24:33--  https://downloads.wordpress.org/plugin/onesignal-free-web-push-notifications.1.16.16.zip
Resolving downloads.wordpress.org (downloads.wordpress.org)... 198.143.164.250
Connecting to downloads.wordpress.org (downloads.wordpress.org)|198.143.164.250|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 6764683 (6.5M) [application/octet-stream]
Saving to: 'onesignal-free-web-push-notifications.1.16.16.zip'

onesignal-free-web-push-notifications.1.1 100%[=====================================================================================>]   6.45M  --.-KB/s    in 0.1s

2019-03-19 19:24:33 (54.2 MB/s) - 'onesignal-free-web-push-notifications.1.16.16.zip' saved [6764683/6764683]

I unzipped the plugin

unzip onesignal-free-web-push-notifications.1.16.16.zip

I could now activate the One Signal Plugin in WordPress

Scrreenshot of the non activated WordPress plugin

A One Signal menu appeared in my WordPress Dashboard. Nice

Screenshot of the OneSignal menu in WordPress

I was prompted to add the API key etc to the plugins configuration.

Screesnhot of OneSignal asking for setup to continue.

I logged into OneSignal and created an app.

Screenshot of https://onesignal.com to create new app screen

I selected Web Push

Screenshot of https://onesignal.com choosing a push notification template (web push)

Major Issue

Long story, I at first selected WordPress Plugin or Website builder and finished the setup but my CDN was picking up the java script files and moving it to my CDN automatically and the One Push code was invoking a Web Service error. Upon investigation web services need to be run from the same origin.

I need top setup the One Signal separate to WordPress.

Later I will see if I can exclude my CDN from caching the JavaScript but for now I will delete the WordPress plugin I just downloaded (above) and instead setup a Typical Site (with HTML). My CDN (read here) is very fast so I will keep it.

I following on from the wizard above (after selecting Web Push) I selected Typical site for the OneSignal app. Having a typical site setup will force me to create a push notification manually after each post but that’s ok (gives me time to proof read).

Screenshot of a typical site template chosen

During the app creation process at One Signal I set my site name and URL.

Screenshot of me choosing a site name and description at https://onesignal.com

Now I need to create a prompt for the app.

Screenmshot of me setting up a prompt at https://onesignal.com

I set the prompt style (floating button)

Screenshot of me choosing the prompt style (floating button)

Permission prompt created.

Permission prompt created and saved

Now I copied the generated HTML code that One Signal created and added it to the <head> section of my WordPress theme.

Screnshot of html code to make the push notification work.

I opened the WordPress Dashboard and opened my theme “Header and Footer scripts” section and pasted the code from OneSignal.

Screenshot of me pasting code from OneSignal into WordPress head area.

I published the changes and loaded my site.

The button was not working and when I opened the Google Chrome Developer console I noticed I needed to upload some java script files to my site.

Screenshot of errors complaining of missing recources.

Oops: I should have read all the documentation (here)

I followed the prompts and downloaded the One Signal SDK files (from Github) to place on my site from https://github.com/OneSignal/OneSignal-Website-SDK/releases/download/https-integration-files/OneSignal-Web-SDK-HTTPS-Integration-Files.zip

Screenshot of OneSignal prompting me to download https://github.com/OneSignal/OneSignal-Website-SDK/releases/download/https-integration-files/OneSignal-Web-SDK-HTTPS-Integration-Files.zip

I downloaded the zip file on my server (over SSH command Line), I extracted the zip file contents into the root of my site (don’t forget to chown the files if the downloaded was from another account (I forgot and my nginx web server would not deliver the files)).

I reloaded my site and I now have Push notification subscription features for my readers.

My browser asked to to allow the notifications 🙂

Clicking the bell again allows you to unsubscribe.

Testing Push Notifications

Ok, lets send a notification for the last post I blogged about.

I logged into onesignal.com and clicked Messages. I clicked New Message and specified a Message title and body.

Screenshot of https://app.onesignal.com/apps

I set an icon, image, URL (when clicked) and priority. The icon needed to be 192×192 pixels.

Screen shot showing the ability to set an icon, image and priority.

I can sent instantly or at a scheduled time

Send Instantly or at a scheduled time and submit button.

A confirmation box appears before sending.

A confirmation box appears before sending.

A notification took a few seconds to appear on my Windows 10 machine.

Windows 10 push notification received

The notification also appeared on my android

Statistics of real time read receipts started coming in. I don’t think this is accurate as the android read was not shown

Statistics showing reads and not read

Nice

Adding an Auto Prompt

To enable auto prompt (to send notifications) on visitors page load I added a second prompt alongside the bell.

I re edited the app in One Signal and added an auto prompt (prompt).

One Signal can also ask the user if they want to receive prompts automatically.

Done

One Signal prompts listing a) bell icon and b) auto push

This is what happens on a new Browser (Firefox), the prompt was not triggered on Google Chrome because I was already subscribed and unsubscribing would not trigger it.

Auto push notification prompt screenshot in Firefox.

Mobile App

I did check for an Android App for One Signal but only poor third party apps were found.

Troubleshooting

Update History

v1.1 Added “I will update this guide to include full WordPress push integration soon”

v1.2 added auto prompt information v1.0 Initial version

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 id=”30″ title=”Ask a Question”]