Push Notification Services On Website

GT Metrix Logo Header Image
31 December 2016

Enable push notifications through one signal

This blog post is about installing push notification on your website. So lets get started.

Step1:- Register on One-Signal
One Signal is cross platform push notification delievery system which is pretty fast and very simple to configure. Just few clicks and you are all set. So lets go to One Signal and register. If you already have account simply login.

Step2:- Add Application
Click on Add a new app. You will get a dialog box. Edit Name and click Create.

Add Name One Signal

Step3:- Select Platform
Select Website Push as platform and click next.Now you will be asked to choose select one to configure select Google Chrome & Mozilla Firefox for now. We can add Safari later. Click on Next.

Select One Signal Platform

Step4:- Enter Site Url
Enter site url and app icon url you wanna associate with notification and click on save.

Select One Signal Platform

Step5:- Download OneSignal Sdk
Now Download One signal Sdk from here and unzip it on and move all files from OneSignalSDKFiles to your website root. Now edit manifest file and change name and short name. Dont edit anything else.

{
"name": "Your App Name Here",
"short_name": "Short Name Here",
"start_url": "/",
"display": "standalone",
"gcm_sender_id": "Dont Touch This",
"DO_NOT_CHANGE_GCM_SENDER_ID": "Do not change the GCM Sender ID"
}

Step6:- Configuring Website Now go to your html code and add following on head TAG. Keep them before other link tag.

<link rel="manifest" href="https://www.hashtagsolutions.in/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_here",
      autoRegister: false,
      notifyButton: {
      enable: true /* Set to false to hide */
      },
      persistNotification: false
   }]);
</script>

Now visit your website from chrome and you will see notification icon on bottom right. Click on it to subscribe to notifications.We can ask for automatic notification by making autoregister:true

Step7:- Enabling Safari
Now go to your one signal dashboard and enable safari and paste web_id on one signal script file.

<script>
  var OneSignal = window.OneSignal || [];
      OneSignal.push(["init", {
       appId: "your_app_id_here",
      autoRegister: false,
      notifyButton: {
      enable: true /* Set to false to hide */
      },
      persistNotification: false ,
      safari_web_id: 'your_safari_web_id',
   }]);
</script>

Now we are all set.You can check subscribed users on onesignal dashboard and can send push notification to all user on one click.


By Lakshay Jain

Tags: Cloud