• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Create a VM ($25 Credit)
  • Buy a Domain
  • 1 Month free Back Blaze Backup
  • Other Deals
    • Domain Email
    • Nixstats Server Monitoring
    • ewww.io Auto WordPress Image Resizing and Acceleration
  • About
  • Links

IoT, Code, Security, Server Stuff etc

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.

  • Cloud
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • How to buy a new domain and SSL cert from NameCheap, a Server from Digital Ocean and configure it.
    • Setting up a Vultr VM and configuring it
    • All Cloud Articles
  • Dev
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • How to setup pooled MySQL connections in Node JS that don’t disconnect
    • NodeJS code to handle App logins via API (using MySQL connection pools (1000 connections) and query parameters)
    • Infographic: So you have an idea for an app
    • All Development Articles
  • MySQL
    • Using the free Adminer GUI for MySQL on your website
    • All MySQL Articles
  • Perf
    • PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 1 of 4
    • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
    • Setting up a website to use Cloudflare on a VM hosted on Vultr and Namecheap
    • All Performance Articles
  • Sec
    • Using the Qualys FreeScan Scanner to test your website for online vulnerabilities
    • Using OWASP ZAP GUI to scan your Applications for security issues
    • Setting up the Debian Kali Linux distro to perform penetration testing of your systems
    • Enabling TLS 1.3 SSL on a NGINX Website (Ubuntu 16.04 server) that is using Cloudflare
    • PHP implementation to check a password exposure level with Troy Hunt’s pwnedpasswords API
    • Setting strong SSL cryptographic protocols and ciphers on Ubuntu and NGINX
    • Securing Google G Suite email by setting up SPF, DKIM and DMARC with Cloudflare
    • All Security Articles
  • Server
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • All Server Articles
  • Ubuntu
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • Useful Linux Terminal Commands
    • All Ubuntu Articles
  • VM
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • All VM Articles
  • WordPress
    • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
    • Installing and managing WordPress with WP-CLI from the command line on Ubuntu
    • How to backup WordPress on a host that has CPanel
    • Moving WordPress to a new self managed server away from CPanel
    • Moving a CPanel domain with email to a self managed VPS and Gmail
    • All WordPress Articles
  • All

Setting web push notifications in WordPress with OneSignal

March 26, 2019 by Simon

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

  • 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

Filed Under: Analytics, One Signal, Push Tagged With: one signal, Web Push

Advertisement:

Copyright © Fearby.com - Do not copy or duplicate (that means you laptrinhx.com)

Primary Sidebar

Poll

What would you like to see more posts about?
Results

Support this Blog

Create your own server today (support me by using these links

Create your own server on UpCloud here ($25 free credit).

Create your own server on Vultr here.

Create your own server on Digital Ocean here ($10 free credit).

Remember you can install the Runcloud server management dashboard here if you need DevOps help.

Advertisement:

Tags

2FA (9) Advice (17) Analytics (9) App (9) Apple (10) AWS (9) Backup (21) Business (8) CDN (8) Cloud (49) Cloudflare (8) Code (8) Development (26) Digital Ocean (13) DNS (11) Domain (27) Firewall (12) Git (7) Hosting (18) IoT (9) LetsEncrypt (7) Linux (21) Marketing (11) MySQL (24) NGINX (11) NodeJS (11) OS (10) Performance (6) PHP (13) Scalability (12) Scalable (14) Security (45) SEO (7) Server (26) Software (7) SSH (7) ssl (17) Tech Advice (9) Ubuntu (39) Uncategorized (23) UpCloud (12) VM (45) Vultr (24) Website (14) Wordpress (25)

Disclaimer

Terms And Conditions Of Use All content provided on this "www.fearby.com" blog is for informational purposes only. Views are his own and not his employers. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. Never make changes to a live site without backing it up first.

Advertisement:

Footer

Popular

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Setup two factor authenticator protection at login on Ubuntu or Debian
  • Using the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software
  • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
  • Add Google AdWords to your WordPress blog

Security

  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Setup two factor authenticator protection at login on Ubuntu or Debian
  • Using the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software
  • Setting up DNSSEC on a Namecheap domain hosted on UpCloud using CloudFlare
  • Set up Feature-Policy, Referrer-Policy and Content Security Policy headers in Nginx
  • Securing Google G Suite email by setting up SPF, DKIM and DMARC with Cloudflare
  • Enabling TLS 1.3 SSL on a NGINX Website (Ubuntu 16.04 server) that is using Cloudflare
  • Using the Qualys FreeScan Scanner to test your website for online vulnerabilities
  • Beyond SSL with Content Security Policy, Public Key Pinning etc
  • Upgraded to Wordfence Premium to get real-time login defence, malware scanner and two-factor authentication for WordPress logins
  • Run an Ubuntu VM system audit with Lynis
  • Securing Ubuntu in the cloud
  • No matter what server-provider you are using I strongly recommend you have a hot spare ready on a different provider

Code

  • How to code PHP on your localhost and deploy to the cloud via SFTP with PHPStorm by Jet Brains
  • Useful Java FX Code I use in a project using IntelliJ IDEA and jdk1.8.0_161.jdk
  • No matter what server-provider you are using I strongly recommend you have a hot spare ready on a different provider
  • How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic
  • Installing Android Studio 3 and creating your first Kotlin Android App
  • PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database
  • How to use Sublime Text editor locally to edit code files on a remote server via SSH
  • Creating your first Java FX app and using the Gluon Scene Builder in the IntelliJ IDEA IDE
  • Deploying nodejs apps in the background and monitoring them with PM2 from keymetrics.io

Tech

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • US v Huawei: The battle for 5G
  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Is OSX Mojave on a 2014 MacBook Pro slower or faster than High Sierra
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..
  • The case of the overheating Mac Book Pro and Occam’s Razor
  • Useful Linux Terminal Commands
  • Useful OSX Terminal Commands
  • Useful Linux Terminal Commands
  • What is the difference between 2D, 3D, 360 Video, AR, AR2D, AR3D, MR, VR and HR?
  • Application scalability on a budget (my journey)
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Why I will never buy a new Apple Laptop until they fix the hardware cooling issues.

Wordpress

  • Replacing Google Analytics with Piwik/Matomo for a locally hosted privacy focused open source analytics solution
  • Setting web push notifications in WordPress with OneSignal
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..
  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Upgraded to Wordfence Premium to get real-time login defence, malware scanner and two-factor authentication for WordPress logins
  • Wordfence Security Plugin for WordPress
  • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
  • Installing and managing WordPress with WP-CLI from the command line on Ubuntu
  • Moving WordPress to a new self managed server away from CPanel
  • Moving WordPress to a new self managed server away from CPanel

General

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • US v Huawei: The battle for 5G
  • Using the WinSCP Client on Windows to transfer files to and from a Linux server over SFTP
  • Connecting to a server via SSH with Putty
  • Setting web push notifications in WordPress with OneSignal
  • Infographic: So you have an idea for an app
  • Restoring lost files on a Windows FAT, FAT32, NTFS or Linux EXT, Linux XFS volume with iRecover from diydatarecovery.nl
  • Building faster web apps with google tools and exceed user expectations
  • Why I will never buy a new Apple Laptop until they fix the hardware cooling issues.
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..

Copyright © 2023 · News Pro on Genesis Framework · WordPress · Log in

Some ads on this site use cookies. You can opt-out if of local analytics tracking by scrolling to the bottom of the front page or any article and clicking "You are not opted out. Click here to opt out.". Accept Reject Read More
GDPR, Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT