Leave all the conflicts you have with Push notifications, Now, Sending Push Notifications to Android & Angular Apps is actually super cool easy with the help of Ruby on Rails & Pusher service.
Pusher is a hosted service that makes it super-easy to add real-time data and functionality to web and mobile applications.
Also, it has the easiest way to set up web socket for your server side and client side application.
Let’s focus on the flow to get it done,

Workflow:

• Create pusher channel in server side.
• Send request with data from server side to the Pusher via the channel.
• Subscribe the same channel in the client-side application.
• Process the data as per your need.

Uses Of Push Notifications:

• Real-Time updates for push notification.
• Useful for a real-time trading update.
• Chat applications.
• Multiplayer Games.

Configuration:

To configure pusher first, we need an account in pusher with few easy steps given below.

• Sign up here simply by providing your details – https://dashboard.pusher.com/accounts/sign_up
• Just log in and select Channels apps and click on Create channels app.
• Give your app name and other optional things and click Create my app.
• It will provide you the credentials and steps to configure in both sides of app client and server.

Once you signed up in pusher, it will give you the required credential to setup the pusher in your application.

Configuration In Rails With An example (server side) –

Add pusher gem in your gemfile by adding this line.
gem ‘pusher’, ‘~>1.3’, ‘>=1.3.1’
Or simply you can install it by
gem install pusher
Setup pusher client with credentials:
pusher_client = Pusher::Client.new(
app_id: 'APP_ID',
 key: 'KEY,
 secret: 'SECRET',
 cluster: 'ap2',
 encrypted: true
)
Trigger the event using the above pusher client:
pusher_client.trigger('my-channel', 'my-event', {
 message: 'hello world'
})

Hints – When/Where to use this event

• You can use it in the rails models.
• If there is any update/change done in the database.
• You can also use this on this event in rails

E.g. – after_save, after_commit, before_save, before_create, etc.

Configuration In Angular With An Example (Client Side)

Step-1

Download js file from this link – https://js.pusher.com/4.1/pusher.min.js
Include this file in your assets/js/ directory named as ‘pusher.min.js’

Step-2

Now include it in .angular-cli.josn follow below

"scripts": [
       "assets/js/pusher.min.js"
     ]

Step-3

In your desired component,
Include these lines

// Enable pusher logging - don't include this in production
   Pusher.logToConsole = true;
//This will connect the pusher to server
   var pusher = new Pusher('KEY_USED_IN_SERVER_SIDE', {
     cluster: 'ap2',
     encrypted: true
   });
//This will subscribe to the channel and accept the response from the server
var channel = pusher.subscribe('my-channel');
   channel.bind('my-event', function(data) {
     console.log(data.message);
   });

 
Note – Use the same channel and event name whatever used in the server-side application.
Hopefully, Now you will get the real-time update of that channel, your data will be automatically updated whenever there is a response sent by server-side. Also, you can process the data as per your requirement.

Configuration In Android With An Example (Client Side)

To start pusher in android. We need to setup pusher in our Android project. Gradle

dependencies {
   compile 'com.pusher:pusher-java-client:1.6.0'
}

 
We need to add this library in android gradle and sync to integrate pusher into our android project.

import com.pusher.client.Pusher;
PusherOptions options = new PusherOptions();
options.setCluster("APP_CLUSTER");
Pusher pusher = new Pusher("APP_KEY", options);
pusher.connect();
This code for pusher in our activity.. We need to give our pusher’s cluster name and APP_Key.
Channel channel = pusher.subscribe("my-channel");
In this above line, we can give our particular channel name.
channel.bind("my-event", new SubscriptionEventListener() {
   @Override
   public void onEvent(String channelName, String eventName, final String data) {
       System.out.println(data);
   }
});

 
Pusher will give the data on subscribed channel,
//
That’s all for the pusher setup.
Do fun with the easiest way of handling real-time data processing.
Thanks.
Eventually, Like to read more about Ruby On Rails, Blockchain Technology, IOT or any recent technologies & upcoming trends then have an eye on our largest blog repository that could help you with more technical blogs.
For any queries reach us via info@agiratech.com