EasySocial 2.2.6

Get Notified With OneSignal Web Push Notifications

Get Notified With OneSignal Web Push Notifications

​It's Friday and i will share a little about Web Push Notifications for today's tutorial. 

OneSignal is a a push notification provider, where it provides a simple interface to push notification for mobile, web and email. Letting content creators focus on quality user engagement instead of complex implementation. Currently, EasySocial, EasyBlog and Komento supports OneSignal web push notification. Yes, it can also be used for Android web push notification as well. 

Setting up

Let's move on on how you can also get this setup on your site. First thing first, you'll need an account with OneSignal which you can easily sign up using an account from Github, Google or Facebook apart from the usual email registration. Simple, easy and fast!

Now that you're done with that, you can now login and start creating web push notifications. Let's start with Google Chrome and Firefox. Login to your account, click on Add App and fill in your App Name.

Choose Web Push and click Next.

Make sure you choose Typical Site for the integration.

Proceed to Site Setup which you need to fill in your site name, site url, icon and label (enabled and choose a label if your site is not fully https).

Permission prompt is where you can configure what kind of prompt you'd like to display for your site, whereas Permission Prompt Editor is where you can edit the text which will be displayed on the prompt.


You may skip some of other optional steps and hit Save then Finish. You managed to create an app for Chrome and Firefox browser.

Let's move on to Safari setup. Go to Settings> Web Push Platforms where you can navigate in the toolbar. Then, click on the pencil icon beside the Apple Safari, ​fill in your site name and site url then hit Save. You're done! 

For https Sites

If you're using https site, there are some additional steps that you need to do. Fret not, there's no coding involved. 

Download the zip file here and unzip the 3 files menifest.json, OneSignalSDKUpdaterWorker.js and OneSignalSDKWorker.js, then upload those files to the top-level root of your site directory.

Make sure the following URLs should be publicly accessible (change yoursite.com to your site's name):

  • https://yoursite.com/manifest.json
  • https://yoursite.com/OneSignalSDKWorker.js
  • https://yoursite.com/OneSignalSDKUpdaterWorker.js

There is some information that you'll need to fill in for every component, configuration such as App ID, REST API Key, Safari App ID and Custom Subdomain (only for non https site). This information is made available from OneSignal app that you already configured earlier on.


For EasySocial  

For EasySocial, you need to purchase and install (EasySocial back-end > Applications > Install) Web Push Notification in order to utilize it.

Go to Applications > Applications > OneSignal Push.


For EasyBlog

 For EasyBlog, go to the Settings> Notifications> Push Notifications.


For Komento

​For Komento, go to the Settings> Notifications> Push Notifications.

Great! You have successfully setup push notifications for your site. Now, it's time to do some testing. Access your site using the web browser with one of the component installed. For instance, EasyBlog page and make sure that you're not in Incognito Mode). There will a popup message and click Allow

On OneSignal dashboard app, you can see if you already subscribed or how many users had subscribed to your site. Go to the Users tab > View All Users.


Deploy

Finally, it's now ready to send out push notifications. Here are some examples on how it might look like: Friend request for EasySocial, a new blog post on EasyBlog, and a new comment on Joomla article via Komento.

Below is the example of Chrome web browser on desktop view: 

Below is the example of an Android push notification:  

In OneSignal, you can also see messages that have been sent through web push notification. Go to the Delivery tab.


I hope today's tutorial is helpful for some. Otherwise, you can always contact us at our forums should you need any assistance at all. Happy weekend folks! :)

 

Comments (6)

  1. Lee Currie

Yeah! They have just created a pay plan for the web push services.
Seems that we have to pay to get rid of limitations and ads now.
Maybe we could ask the dev to create something similar for pushcrew
They seem to be much nicer regards to prices.
Also their free version of Onesignal is used for sending ads to our clients, which is actually a violation of my own website T's&C's.
So, sooner or later I am going to have to change to another type of service I think.
I would love to hear your...

Yeah! They have just created a pay plan for the web push services.
Seems that we have to pay to get rid of limitations and ads now.
Maybe we could ask the dev to create something similar for pushcrew
They seem to be much nicer regards to prices.
Also their free version of Onesignal is used for sending ads to our clients, which is actually a violation of my own website T's&C's.
So, sooner or later I am going to have to change to another type of service I think.
I would love to hear your suggestions and thoughts on this
Thanks
Peace!
Lee

Read More
  Comment was last edited about 1 month ago by Lee Currie Lee Currie
  1. Muhammad Fadhli    Lee Currie

Hi Lee,

Thanks for your suggestion and opinion. That would be great if we can implement few choices for the web push notification as well.
Perhaps, can you submit a ticket under feature request here https://stackideas.com/forums/ask so that our developer can keep track the
feature that can be implement in the future release ;)

 
  1. Syabab

Can we set it to Allow by default?

 
  1. Muhammad Fadhli    Syabab

Hi Syabab,

Do you mean user subscribe to the web push notification by default yes? Unfortunately it is not possible.

 
  1. Marc Bills

We have been using the EasySocial App for push notifications for more than a year now.
In all honesty, I can say that this is an absolute "must have" add-on to EasySocial.
The only limitation is that the app doesn't work for Mobile webview apps built using Firebase for Android App push messages (not sure how Apple works). Or maybe it does and i just haven't figured it out yet.
Maybe its already included in the Easysocial app thats in the pipeline?

Anyway, if we can have the EasySocial app...

We have been using the EasySocial App for push notifications for more than a year now.
In all honesty, I can say that this is an absolute "must have" add-on to EasySocial.
The only limitation is that the app doesn't work for Mobile webview apps built using Firebase for Android App push messages (not sure how Apple works). Or maybe it does and i just haven't figured it out yet.
Maybe its already included in the Easysocial app thats in the pipeline?

Anyway, if we can have the EasySocial app working with webview/slimapps, that would be an absolute winner.

Read More
 
  1. Mark    Marc Bills

Thanks for your insights on this Marc. I believe OneSignal does not work on web browsers for iOS as iOS does not allow such integrations but as soon as iOS allows that, OneSignal would still work.

If you look at their supported operating system table, https://documentation.onesignal.com/docs/web-push-overview it should work with Android devices using web browsers.

 
There are no comments posted here yet