Web push notifications are hot in 2017, we will see them more in future for sure. I've been using web push notifications for my personal blog and from what I've seen - it's very powerful marketing tool, allowing you to reach your audience very fast - for blogs and websites that means more returning visitors, for commerce sites that definitely means more sales.
In the past I've tried a few web push notifications providers, but at the end I've chose to stay with onesignal.com, because of it's absolutely free, no matter how many subscribers you have. Right now this blog has more than 7,000 active web push subscribers, growing at the rate of about 2,000 users per month. As my blog covers many topics, I've a pretty high unsubscribe rate too. This is the thing I'm missing in onesignal - more segmentation, as right now web push notifications are enabled on every page on this site, and at the end I have little control figuring out how to segment them.
Anyhow, recently I re-launched an older website covering tourism activities in Georgia, with promotions and deals - and then I realized - this is the right place were to use web push notifications. As this website is built by Drupal 8, in following tutorial I will provide details on how to setup web-push notifications for Drupal 8 website, but with a few minor tweaks this method should work for any other platform (WordPress, Joomla e.t.c.)
Now, if you don't have already onesginal account go and sign up for one (it's free).
Once you are registered for account, login and click on the a new add app screen to get started:
Add a new app screen onesignal
Next, give it a name (your website's name, for example), and click on the create button
You will be asked to select a platform to configure:
Selecting platform to configure on onesignal
Choose Website Push and click Next
On the next screen you will be asked to select either Google Chrome & Mozilla Firefox or Apple Safari, for the start let's choose Google Chrome and Mozilla Firefox, you will have a chance to add Apple Safari later. Click Next.
Now, let's assume that you have already https:// site enabled (if not, see how easy you could setup a free SSL from Let's Encrypt), or if you don't have yet https:// site you could choose option - My Site is not fully HTTPS
Web push notification setting screen
Enter your site URL and provide a link to default notification icon URL (I like to keep all of my onesignal notification icons in a separate folder on the root, and I've created a folder named onesignal, you may use different approach.
Click Save
On the next screen you will be asked to select target SKD, if you are using Wordpress you could go with WordPress selection, for Drupal or any other site we are going to choose Website Push
Select target SDK on onesignal
Click Next
You are almost done here, now it's the part to install actual code on your site, for Drupal 8:
Visit Web Push SDK Setup (HTTPS) for download files
Download and unzip the SDK files.
You should have:
manifest.json OneSignalSDKWorker.js OneSignalSDKUpdaterWorker.js
Upload these files to the root folder of your website
Edit manifest.json:
Change name and short_name to your site's name
Do not change the gcm_sender_id key (482941778795). This is a shared key used for push notifications (previously it required your own key, but this is no longer needed!)
{
"name": "tourgeorgia.eu",
"short_name": "tourgeorgia.eu",
"start_url": "/",
"display": "standalone",
"gcm_sender_id": "482941778795"
}
change tourgeorgia.eu to your own website
Include and initialize the SDK
Open your html.html.twig template (if you don't have such, create it, as I didn't had html.html.twig but my template is based on bootstrap I just copied html.html.twig file from bootstartp template folder to my custom theme folder) and add following
Include manifest.json in your themes <head> section
<!DOCTYPE html>
<html {{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "YOUR_APP_ID",
autoRegister: false,
notifyButton: {
enable: true /* Set to false to hide */
}
}]);
</script>
</head>
Now, you should go back to the onesignal homepage choose your app and browse for appId, you will find it under app settings, Keys & IDs, copy and paste to head section.
If you would like to show webpush subscribe button to every user accessing your website, and kind of aggressively, asking to subscribe to push notifications, you should change autoRegister value from false to true.
HTTPS Web Push notifications enabled on Drupal 8 site
You can try a live example here: tourgeorgia.eu
In some of the future posts I will write a brief tutorial how to actually send your first push notification using onesignal.