Onesignal Push Notification

OneSignal Push Notification

OneSignal is a reputable push notification provider that allows you to deliver Push Notifications to your users for free. Before you're able to start using OneSignal Push Notification, you have to register for an account with OneSignal and then create a new OneSignal Application.

OneSignal Application

Once you have logged-in to your account, you will be presented with this layout. It shows all the available applications under your account. If you're new here, a popup introducing you to OneSignal will appear. Click through the pages or skip and press Done at the last page.

Adding a New App

For the initial step, you may start your journey by clicking on either the Add My First One Signal App, Done or close button as shown in the following screenshot to close the popup. Then, click on the Add App button, a dialog prompted requesting for the App Name will appear. Enter the desired app name of the new app and then hit the Add App button to continue.

Platforms

There are several platforms available for OneSignal application but our only focus here is Web Push notifications. EasyBlog utilizes this platform in order to send push notifications. Click on it to select and hit the Next button to start configuring the platform.

You should now see the following on the top of the page after you clicked the Next button from earlier. You can either choose Typical Site or Joomla for the second option as the fields are similar.

Web Push notifications platform is divided into 2 sections; All Browsers(Except Safari) and Apple Safari. In this documentation, we will provide you with a simple guide to set up both sections.

All Browsers(Except Safari) Push Notification Configuration

There are several fields that are crucial in configuring this application and those fields are highlighted below.

• Site Name
  Your users will see this site name displayed on their notifications.

• Site URL
  This field is used to validate the identity of the site requesting push notifications using your ID. Only sites matching the field entered can use your OneSignal ID for push notifications.
  Your site URL should not include anything after your domain extension and must contain the protocol (e.g. http:// or https://).
  Further information can be accessed through OneSignal Web Push SDK Setup.

  If your site fully supports HTTPS, you may skip the following fields and make sure to disable the My site is not fully HTTPS option.

• My site is not fully HTTPS
  We recommend using HTTPS with OneSignal if possible because full HTTPS sites works best with web push. However, if your site does not support HTTPS or serves some pages over HTTP, then enable this option. Otherwise (if fully support HTTPS), leave this option disabled.

• Choose A Label (HTTP Fallback Option)
  Because Chrome push notification requires sites to be using HTTPS, non-HTTPS websites must then use a subdomain of onesignal.com. Choose an unique label (e.g. yoursitelabel), which will be displayed as https://yoursitelabel.onesignal.com.
  Warning: Changing your label name can cause users to receive duplicate notifications.

After you have completed filling in the required fields, click on the Save button to proceed to the next step.

Next, we will proceed to the permission prompt setup. This is a required step if no permission prompt is set up yet. Click on the Add A Prompt button to trigger a popup and select/customize your prompt type. It should be fairly straightforward as a preview is shown on the right. Click Save once you are done.

The Welcome Notifications and Advanced steps are optional so you may configure them now or later if you want.
More information can be found in OneSignal's Typical Setup page.

After you have completed filling in the required fields, click on the Save button to store the information and continue to the next page. You may ignore the Add Code to Site section. Finally, click on Finish.

Configuring EasyBlog OneSignal Application

Navigate to Settings on OneSignal top menu and click on Keys & IDs at the top right. In here, you will find the OneSignal App ID and REST API Key. Copy these 2 keys and paste it in EasyBlog's push notification settings which can be found at Components > EasyBlog > Settings > Notifications > Push Notification.

Double check and make sure the App ID and Rest API Key matches the one from your OneSignal App. Once all is good, click on the Save button to save your configuration. The following screenshot shows EasyBlog's push notification settings area.

Additional Steps For HTTPS Website

If your site is using HTTPS, OneSignal requires you to upload these 2 files into your root directory. It is a compulsory requirement from OneSignal. You may directly download them by clicking here or you may view them from OneSignal's Documentation site.

Unzip the OneSignal-Web-SDK-HTTPS-Integration-Files.zip file and you will find these 3 files:

• OneSignalSDKUpdaterWorker.js (Leave as it is)
• OneSignalSDKWorker.js (Leave as it is)

Once you're ready, upload the files to the top-level root of your site directory and check that the following URLs are publicly accessible:

• https://site.com/OneSignalSDKWorker.js
• https://site.com/OneSignalSDKUpdaterWorker.js

That's it. Now, try it on your site and you should be able to see push notifications when surfing through the site.

Apple Safari Push Notification Configuration

Once you have configured the web push notification, you may now configure Apple Safari's platform by clicking on the edit(pencil) button.

There are 2 fields that are crucial in configuring this application and those fields are being highlighted below.

• Site Name
  Your users will see this site name displayed on their notifications.
• Site URL
  This field is used to validate the identity of the site requesting push notifications using your ID. Only sites matching the field entered can use your OneSignal ID for push Notifications.
  Your site URL should not include anything after your domain extension and must contain the protocol (e.g. http:// or https://).
  Further information can be accessed through Safari web push documentation.

Once you have configured the fields, click Save.

Configuring EasyBlog OneSignal Application

Navigate to Settings on OneSignal app's top menu and click on Apple Safari. In here, you will now see Apple Safari Web ID here. Copy the web ID and paste it in EasyBlog push notification settings which can be found at Components > EasyBlog > Settings > Notifications > Push Notification.

Double check the pasted Safari App ID and make sure that it is correct. The following screenshot shows EasyBlog's Push Notification configuration page.

That's it. Now, try subscribing with OneSignal then navigate around your site and you should be able to see push notifications from EasyBlog.