- What are push notifications
- How to implement push notifications on a website
- Implement two Service Workers: PWAs and Push Notifications
- Further customizations
- Send your first push notification
What are push notifications
Web push notifications are notifications that can be sent to desktop web and mobile web users. These are alert-style messages that open in the top or bottom right corner of the desktop screen, depending on the operating system or displayed on a mobile device almost identically to push notifications provided by apps. Web push notifications are posted to a user’s desktop or mobile screen each time the browser is opened, regardless of whether the user is on the website or not.
How to implement push notifications on a website
Let’s see the process to implement push notifications on your website through the One Signal service . This guide is valid for all CMS, eCommerce and even handmade websites.
Go to the One Signal website and register. Once registered you can create your first app.
Register a new application in One Signal
Name your app.
Name my app
Push notifications can be sent to different operating systems. I show you how to create web notifications, this setup allows you to send push notifications to Chrome, Internet Explorer / Edge and Firefox. The other OSes follow the same settings so it would be a repeat to show you all. Choose Web Push and press next.
For iOS you will have to come back here and create a new app following the same options for good or bad.
Select the operating system to which I want to send push notifications
One Signal has created a dedicated WordPress plugin , if you want to go the easy way download the plugin and follow the instructions you find by clicking on Website Builder .
In this site I do not use the plugin (I am minimalist on the web), I have inserted by hand what is needed. Continue this guide if you also want to go through the manual process.
Select Typical Site and fill in the options below:
- SITE NAME: enter the name of your site.
- SITE URL: enter the address of your site.
- DEFAULT ICON URL: Enter the HTTPS address of your site’s icon in square dimensions of at least 192 x 192 pixels.
- My site is not fully HTTPS: Push notifications require your site to be HTTPS. If you don’t have HTTPS or it’s only present on some pages, select this option.
I set all the option fields
Now you have to choose the Permission Prompt , which is what type of banner you want to show to request subscription to push notifications. There are two possibilities: the typical One Signal bell or the native browser banner . I chose to show the native banner that seems more nerdy to me;)
Below set the welcome message that the user will receive as soon as they consent to receive your push notifications.
I set the welcome message
Set the bell if you want to use this prompt. You can define the color, size and position.
Banner option with bell
If you want to use the native browser banner, the only optional options to fill in are the message text.
Browser native banner option
In Advanced you can leave the default settings. Verify that Persistence is active, this option allows you to keep the notification active on the screen until it is clicked.
Save to proceed.
Save the settings
Now you need to download three files and upload them to the root of your website:
- manifest.json
- OneSignalSDKUpdaterWorker.js
- OneSignalSDKWorker.js
PS: the root is the top level of your FTP “/” space.
I download the files to upload via FTP and copy the code to insert in the pages of the site
Open the downloaded zip archive and unzip the 3 files to upload to the server.
The files to be uploaded to the root via FTP
Clean your browser cache. Browse the site and verify that the prompt banner appears, the request to receive push notifications.
I check the push notifications are working
Implement two Service Workers: PWAs and Push Notifications
Last month I published the guide to creating a Progressive Web App . This technology uses the manifest.json file and a Service Worker , the same files that use push notifications. If your site already uses PWA you must implement the new files correctly or the two technologies will conflict.
Let ‘s start with the manifest.json file , you already have a manifest.json file in the web server and a reference to this file in your pages. Something like:
Your manifest.json and One Signal’s manifest are merged into one. Open the manifest.json file of your PWA (the one you are already using) and add the line present in the manifest.json file downloaded from One Signal.
Just take this line from the One Signal manifest.json
“gcm_sender_id”: “1234567890”,
and insert it before closing in your PWA manifest.json file.
As for the Service Worker , on the other hand, it is a little more difficult but nothing transcendental.
Insert this script, in the head section of the HTML.
This script loads the Service Worker only if the browser supports it.
Now edit the OneSignalSDKUpdaterWorker.js file downloaded from One Signal. Add as the first line the call to the Service Worker of your PWA, like the following example:
Note: the https://www.evemilano.com/sw.js file is the Service Worker I was already using in my PWA.
In this way the first script in the head will call the OneSignalSDKUpdaterWorker file, which will activate two Service Workers: that of your PWA and that of push notifications.
Further customizations
With this script, to be inserted at the end of the one previously inserted to register the Service Worker, it is possible to customize the messages of the prompt banner. Look at my example: I also implemented push notifications for iOS, I changed the welcome message and translated the button to choose whether or not to receive notifications.
I refer you to the official documentation to learn more since the options are many and they are not mandatory.
Send your first push notification
Log in to One Signal and press Messages to send your first push notification.
Select Send to everyone and enter the title and description of the message. You can enter the info in as many languages as you want. Select the pencil next to the message box to see the languages spoken by your subscribers and fill in accordingly. On the side you will see the preview of the push notification.
Send your first push notification
Set an icon , which is usually the website logo, and an image related to the message you are sending. Remember that all URLs must be HTTPS.
Set image and icon
Enter the destination URL, the page where the user who presses the push notification will end up. Then set the type of sending: immediate or intelligent. Immediate sends the notification immediately, intelligent instead provides a period of 24 hours when each user is most likely to open notifications. Maximize open rates, but don’t send right away.
Set URL and message duration
Check the information and send the message.
Save and send the message
For doubts and questions leave a comment!
