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

Advertisement:



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

Advertisement:



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

Advertisement:



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.

Advertisement:



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.

Advertisement:



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.

Advertisement:



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.

Advertisement:



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

Mobile App

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

Troubleshooting

Advertisement:



Update History

v1.0 Initial version

The post Setting web push notifications in WordPress with OneSignal appeared first on Code, InfoSec and Server Stuff.