• 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

notification

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

October 14, 2015 by Simon Fearby

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”]

Filed Under: Cloud, push notifications Tagged With: notification, one signal, push

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) HTTPS (6) IoT (9) LetsEncrypt (7) Linux (20) Marketing (11) MySQL (24) NGINX (11) NodeJS (11) OS (10) PHP (13) Scalability (12) Scalable (14) Security (44) SEO (7) Server (26) Software (7) SSH (7) ssl (17) Tech Advice (9) Ubuntu (39) Uncategorized (23) UpCloud (12) VM (44) 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 © 2022 · 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