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.
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.
A floating icon allows me to unsubscribe at anytime and manage subscription details.
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.
Price?
The One Signal blog post says is free under 30,000 subscribers then it jumps to $99/m for above 30,000 subscribers
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/
I noted the latest plugin URL path
https://downloads.wordpress.org/plugin/onesignal-free-web-push-notifications.1.16.16.zipI 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.zipI could now activate the One Signal Plugin in WordPress
A One Signal menu appeared in my WordPress Dashboard. Nice
I was prompted to add the API key etc to the plugins configuration.
I logged into OneSignal and created an app.
I selected 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).
During the app creation process at One Signal I set my site name and URL.
Now I need to create a prompt for the app.
I set the prompt style (floating button)
Permission prompt created.
Now I copied the generated HTML code that One Signal created and added it to the <head> section of my WordPress theme.
I opened the WordPress Dashboard and opened my theme “Header and Footer scripts” section and pasted the code from OneSignal.
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.
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
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.
I set an icon, image, URL (when clicked) and priority. The icon needed to be 192×192 pixels.
I can sent instantly or at a scheduled time
A confirmation box appears before sending.
A notification took a few seconds to appear on my Windows 10 machine.
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
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).
Done
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.
Mobile App
I did check for an Android App for One Signal but only poor third party apps were found.
Troubleshooting
- OneSignal GitHub Repository
- OneSignal GitHub Issues (don’t forget to watch and star the repository at GitHub to receive notifications)
- OneSignal Help
- OneSignal Support Chat
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