Pusher team

In November 2020 [__The Washington Post broke Pusher records__](https://blog.pusher.com/realtime-results-election-washington-post?utm_source=tutorials&utm_medium=live_res_tutorial&utm_campaign=washpost_live_res&utm_content=case_study "Case study on how The Washington Post broke Pusher records to deliver realtime results coverage of the 2020 Presidential Election to their news readers") as they delivered realtime results coverage of one of their largest news events to date using a WebSocket implementation with Pusher Channels. Channels offers substantial scope for building dynamic realtime features into your apps.

In this tutorial we’ll show you how you can deliver engaging live data updates to your own users by building a dynamic realtime results app using Channels (and add some bonus features using Beams, our comprehensive push notifications API). We’ll use some sample data to build an app which reports live votes.

## Prerequisites

For this tutorial, you need a basic knowledge of React and Node.js. We will also use the following :

- React hooks and functional components for the frontend
- A Node js environment for the backend with the following packages:
  - Express.js
  - pusher-js
  - CORS
  - @pusher/push-notifications-server
- A Pusher account; you can create one here if you haven’t done that already. You can sign up for free Sandbox plans to get you started with Pusher and Beams, and easily grow your plan with your usage by following the self-serve tiers.

## Objective

At the end of this tutorial, our demo app will stream live votes being fed from the server in real time. You’ll also be able to subscribe to receive web notifications in your browser via Beams, to inform you of major events, like the result of a particular poll.

![Realtime results app demo Figure 1](//images.ctfassets.net/1es3ne0caaid/5ru93e2wZKNkbrrwkyYCRF/a7307ac530adf244affdec5959b5d50a/Demo_app_1.png)

![Realtime results demo app Figure 2](//images.ctfassets.net/1es3ne0caaid/1aomXHlMfSfxjtnezD3k07/3de766ea3177e6f71eb3eeebb9e2b112/Demo_app_2.png)

## Housekeeping

First things first, there are some basic things we need to put in place or take note before moving on to creating our live poll app.

### Using the Global State Concept

Since we are building a relatively small web app for this tutorial, we won’t use a state management module like redux or mobx for the app. Instead, we’ll use the global state concept where we will cascade all relevant states at the top level component; in this case, App.js. Afterwards we’ll change and pass them to other child components. There is also no routing module like redux used in this tutorial.

### Getting started with the Front End

Let’s get started with the front end and bootstrap with "create react app".

In the terminal, run:

```js
create-react-app polling_app
```

Wait for all the dependencies to be installed. Afterwards, we’ll use the pusher-js module to connect and receive data from the server in real time. That is, we will install pusher-js and and  @pusher/push-notifications-web to handle the web notifications. 
To do this, navigate to the polling_app directory in your terminal and run:

```js
npm install pusher-js @pusher/push-notifications-web
```

Now, let’s create a Channels app.

### Creating a Channels App

Navigate to your Pusher account dashboard and click on “Get started” under Channels.

![Realtime poll results app welcome to pusher](//images.ctfassets.net/1es3ne0caaid/4HLxiZtmIGuOc8TR6TVO9D/7d588f8776c24fa86c9df75c47c63019/welcome_to_Pusher.png)

Follow the steps in the dialog box to name your app and select your preferred cluster location. Then, click on __Create app__.

![Realtime poll results app create app in Channels](//images.ctfassets.net/1es3ne0caaid/3ahGZLaC3peDZWAtX7XcZQ/0e0246e348723710fcd950bf2aa96fd7/create_app_in_Channels.png)

Next you'll see the following page. Here, the details you need for connections can be found under __App Keys__.

![realtime poll results app app keys info](//images.ctfassets.net/1es3ne0caaid/1a5FMt6qyLUmzwPkIbdqLp/1220d3a95f06376d7f7002c2266dc6c3/app_keys_from_channels.png)

Click on __App Keys__ in the left hand menu and copy the information provided (including `app_id`, `key`, `secret`, and `cluster`) as shown below. Keep the information safe so that you can use it soon.

![app keys info in pusher dashboard](//images.ctfassets.net/1es3ne0caaid/4YODO0IWIrMy2qAl5FW76l/c35a21d662f8fa67dca26c780f181c0c/app_keys_info.png)

### Creating a Beams App

Follow the same steps but this time create a Beams App. Once you have created an instance, it’s time to select your preferred option from Android, iOS and Web. We're going to select Web, of course, since we are writing a web application. 

Go through the 4-step Quick Start guide that is displayed. These steps include creating a Service Worker, installing the SDK and registering your first web device.

![beams-quickstart-2021](//images.ctfassets.net/1es3ne0caaid/7xYRHsYsiCC7I7v2AZYZjy/ed6ce2dea7cfd643d9be62dda49c6a93/Screenshot_2021-01-21_at_15.42.41.png)

### Creating a Service Worker

Following the steps shown below, create a service-worker.js in the public folder and make sure it registers before proceeding to write your code.

The service worker file is run separately from the web pages in the background. It is the main reason developers can create interactions like push notifications which we will be using in this tutorial and for background sync.

![realtime results app create service worker](//images.ctfassets.net/1es3ne0caaid/41t3E25i2RVBW0ANzOeaow/321da12c2db593cbfe469421b71a39e9/Screenshot_2021-01-19_at_12.54.51.png)

## Building the Realtime Poll Results App

### Front End

Navigate to the src folder and create the userComponent folder. This folder will house all the components we will use. Under userComponent, create the following components: 

1. States component which will show the general states of the votes for all candidates (red, yellow, blue and green)
2. State component which will show the state for a candidate
3. A modal component which will show the details of voting events happening at different regions for each candidate
4. A header
5. A footer

The structure of the folder once all components are created should look like the following:
˅ src
  ˅ userComponent
    > footer
    > header
    > modal
    > state
    > states

Now, let’s edit our App.js file. First, import Pusher and Pusher web notification modules and create a functional component.

To use Pusher, you need to create a new instance of the class "Pusher" and subscribe to a channel. The channel is then bound to an event, so that when an event is fired (i.e when a vote is cast), an action can be performed in the front end.

```js
const pusher = new Pusher(Key, {
  cluster: cluster
 });
const channel = pusher.subscribe(‘votes’);
channel.bind(‘vote-event’, function(data) {
  return data
 });
```

For the web notification, the Pusher push notification client class is called with the `instance_ID` you generated earlier when creating your Beams app in the Pusher dashboard. 

Subscribe the user’s device to an event:

```js
const beamsClient = new PusherPushNotifications.Client({
  instanceId: instanceId,
 })
beamsClient.start()
.then(() => beamsClient.addDeviceInterest(‘votes’))
.then(() => {

});
```

The code can be combined together as below:

```js
import * as PusherPushNotifications from “@pusher/push-notifications-web”
import Pusher from ‘pusher-js’;
function App(){
  const pusher = new Pusher("APP_KEY", {
    cluster: "APP_CLUSTER"
   });
  const channel = pusher.subscribe(‘votes’);
  channel.bind(‘vote-event’, function(data) {
    return data
   });
  const beamsClient = new PusherPushNotifications.Client({
    instanceId: INSTANCE_ID,
   })
  beamsClient.start()
  .then(() => beamsClient.addDeviceInterest(‘votes’))
  .then(() => {

   });
return (
  <div>
    <div style={{display:”flex”, justifyContent:”space-around”}}><States data=   
    {data} /></div>
  </div>
);

}
export default App;
```

### The States Component

The states component will be in the index.js file inside the state folder we created earlier. This functional component provides the current state of votes for all the candidates. This is written as:

```js
Import State from “../state/index”
Import states from “./states”
Export default function States (props) {
  return (
  <main style={{display:"flex", flexWrap:"wrap", justifyContent:"space-        around", width:"80%"}}>
  {states.map((state, i) =>{
    return <State index={i} key={i} src={state.src} desc={state.desc} data=     {props.data} />
   })}
  </main>
  )
}

```

The states data is located in a states file. It is an array written as:

```js
const states = [
    {
        id:"1",
        name: 'Green',
        src:"https://via.placeholder.com/150",
           },
    {
        id:"2",
        name: 'Red',
        src:"https://via.placeholder.com/150",
           },
    {
        id:"3",
        name: 'Yellow',
        src:"https://via.placeholder.com/150",
      },
    {
        id:"4",
        name: 'Blue',
        src:"https://via.placeholder.com/150",

    }
]

export default states
```

### The State Component

The State component provides details about each candidate:

```js
import { useState } from "react"

import Modal from "../modal/index"
export default function State(props) {
    console.log(props)
    const [display, setDisplay] = useState('none')  
  return (
      <main style={{ width:"50%", marginBottom:"15px", marginTop:"5px"}}>
        <div className="">
            <div>
                 <img src={props.src} alt=""/>
            </div>
            <div>
                <p>{props.price}</p>
                <p>Total votes: {props.data.message[props.index + 6]} </p>
            </div>
        </div>     
        <div>
            <button onClick={()=>setDisplay("")}>More</button>
            {/* <button>bid</button> */}
        </div>  
        <Modal index={props.index} display={display} regions={props.data.message} src={props.src} setDisplay={setDisplay} />
      </main>
  )
}
```

### The Modal Component

The modal component shows what is going on with the idividual regions:

```js
import { useState } from "react";
export default function Modal(props){
    // const x = props.status
    const sampleData = [
      [ 1, '1J5FVCE', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
      [ 1, '2J5FVCE', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
      [ 1, '3J5FVCE', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
      [ 1, '4J5FVCE', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
      [ 1, '5J5FVCE', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
      [ 1, '6J5FVCE', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ]
    ]
    const regions = [['regx', [0]], ['regx', [0]]]
    const [reg, updateReg] = useState(sampleData)
    return (
        <main style={{position:"fixed", display: props.display, zIndex:2, backgroundColor:"white", opacity:0.95, color:"white", width:"60%", height: "50%", top:"15%",left:"20%", border:"1px black solid", borderRadius:"5px"}}>
               <p className="" style={{float:"right", color:"black"}} onClick={()=> props.setDisplay("none")}>X</p>
               <table style={{textAlign:"center", color:"red", width:"100%"}}>
               <table>
  <thead>
    <tr>
      <th>Region Name</th>
      <th>Votes</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {reg.map((region)=>{
        return <tr>
        <td>{region[1]}</td>
        <td>{region[props.index + 2]}</td>
        <td>{region[10]}</td>
      </tr>
    })}
  </tbody>
</table>
</table>
        </main>
    )
}
```

## Server

The server is very straightforward. The “vote cast” is already provided as elements in an array. The general representation is given as:

`batchnumber`, `region`, `red`, `green`, `yellow`, `blue`, `redtotalvotes`, `greentotalvotes`, `yellowtotalvotes`, `bluetotalvotes`, `status`]

A `setInterval` method will be used as a means through which each “vote is cast”. 

Our server is written in a Node.js environment. To get started, we’ll create a folder named server. Navigate to the folder in the terminal and run:

```js
npm init
```

You need to answer all the prompts and install the dependencies needed. That is, pusher-js express @pusher/push-notifications-server. To do this, navigate to the server folder on the terminal and run:

```js
npm install pusher-js express @pusher/push-notifications-server.
npm install pusher
```

Inside the index.js file, you will instantiate a new Pusher class with `app_ID`, `key`, `secret`, `cluster`, and `useTLS` passed into the object argument. 

```js
const pusher = new Pusher({
  appId: "app_id",
  key: "key",
  secret: "secret",
  cluster: "cluster",
  useTLS: true
 });
```

We're going to use the `setInterval` method to trigger a “vote” every 60 seconds.

```js
setInterval(() => {
  if(i == 5){
    i = 0
  }
  pusher.trigger(“votes”, “vote-event”, {
    message: sampleData[i]
  }).then(console.log).catch(e=> console.log(e))
  i++
}, 60000);
```

The complete code on the server should be as below:

```js
const express = require("express")
const Pusher = require("pusher")
const PushNotifications = require('@pusher/push-notifications-server');
const generateVotes = require("./votegenerator");
const mySampleRegions = [
  {regionname: '1', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
  {regionname: '2', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
  {regionname: '3', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
  {regionname: '4', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
  {regionname: '5', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
  {regionname: '6', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
  {regionname: '7', population:2189499, turnoutpercent: 51, totalvotes: 1116644, currentvotes: 0},
]
const sampleData = [
  [ 1, '1J5FVCE', 52, 4, 19, 10, 52,4, 19, 10, 'inprogess',1 ],
  [ 1, '2J5FVCE', 15, 6, 10, 12, 67,10,29,22 , 'inprogess', 2 ],
  [ 1, '3J5FVCE', 25, 6, 3, 21, 92,16,32,43, 'inprogess' ,3],
  [ 1, '4J5FVCE', 35, 14, 8, 12,127,30,40,55 , 'inprogess',4 ],
  [ 1, '5J5FVCE', 4, 16, 8, 21,131,46,48,71 , 'inprogess',5 ],
  [ 1, '6J5FVCE', 12, 36, 8, 22, 143, 82,56,93, 'completed',6 ]
]
const allRegions = [
  '1J5FVCE',
  '2J5FVCE',
  '3J5FVCE',
  '4J5FVCE',
  '5J5FVCE',
  '6J5FVCE',
]
const app = express()
const pusher = new Pusher({
    appId: "1124234",
    key: "b691171de5f8ac605664",
    secret: "9b22dfa2b49d99cabeb2",
    cluster: "mt1",
    useTLS: true
  });
(async function(){
  const votes = await generateVotes()
  const spliced = votes.splice(0, 35)
  console.log(spliced[0], votes[4])
})()
var i = 0

setTimeout(() => {
  if(i == 5){
    i = 0
  }
  pusher.trigger("my-channel", "my-event", {
    message: sampleData[0]
}).then(console.log).catch(e=> console.log(e))
  i++
}, 50);

let beamsClient = new PushNotifications({
  instanceId: instanceid,
  secretKey: secretKey
});

beamsClient.publishToInterests(['hello'], {
   web: {
     notification: {
       title: 'Votes completed',
       body: 'The election has been completed and the winner is red,
     }
   }
 }).then((publishResponse) => {
   console.log('Just published:', publishResponse.publishId);
 }).catch((error) => {
   console.log('Error:', error);
 });
```
## Running the App

Now, you can run your app. All you need to do is run `npm start` in the terminal to start the front end. To start the backend, run `node index.js`.

It’s that simple and straightforward! Follow this tutorial closely and build your own live poll app using Pusher. You can take a look at the code repository [here](https://github.com/pusher/pusher_tutorial_realtimeresults/ "Code repository for realtime poll results demo app") and [check out the demo app](https://polling-app.chang.vercel.app/ "Demo app for realtime poll results feed").

Find out more about [__delivering live results with Pusher__](https://pusher.com/channels/use-cases/realtime-results?utm_source=blog&utm_medium=case_study&utm_campaign=washpost_live_res "More information about how you can take advantage of building realtime results apps using Pusher's Channels API") or read the full case study on [__how The Washington Post broke realtime records__](https://blog.pusher.com/realtime-results-election-washington-post?utm_source=tutorials&utm_medium=live_res_tutorial&utm_campaign=washpost_live_res&utm_content=case_study "Case study on how The Washington Post broke realtime records for live election delivery using WebSockets with Pusher Channels") by using WebSockets with Pusher Channels to send 1 million messages per second to global news readers during the 2020 US Presidential Election.


In this tutorial we’ll show you how you can deliver engaging live data updates to your own users by building a dynamic realtime results app using Channels (and add some bonus features using Beams, our comprehensive push notifications API).

Learn how to deliver engaging live poll data updates to your users by building a dynamic realtime results app using Pusher Channels and Beams.

Create a realtime results feed with React and Node.js

Channels

Beams

Jonathan Lloyd

Pusher’s **Beams SDKs and API** make it easy to send push notifications to all of your iOS and Android users with one request.

The service manages manages your app credentials and the lifecycle of device tokens which are required for every request to Google’s Firebase Cloud Messaging (FCM) service and APNs for your iOS devices. 

You can subscribe your app user’s registered device to [Interests](https://pusher.com/docs/beams/concepts/device-interests), which act like persistent Pub/Sub topics, so that you can update many devices with the same request. Create as many interests as you need, and send unlimited push notifications. 

**Today we will walk you through the steps to start sending push notifications to your Android app users with Pusher’s Beams SDKs and API.**

## Step 1 - Sign up for a Pusher account

Before we can start building you will have to sign up for a Pusher [account](https://dash.pusher.com/authenticate/register?ref=pn-tutorial-android) (or log in with your existing Pusher credentials).

## Step 2 - Set up your free Beams instance

Head on over to the [dashboard](https://dash.pusher.com/?createInstance=push-notifications&name=Push%20Notifications) and create your first Beams instance. With a free plan, you can send unlimited push notifications to up to 1000 devices during a billing month.

This will take you to our Quickstart wizard:

![beams-quickstart](//images.ctfassets.net/1es3ne0caaid/1HOms9QNSJBt5Y5y94yPma/e3eff8bd4170a65a9cd44ca07113763f/Screenshot_2020-05-18_at_16.29.15.png)

The Quickstart will guide you through the following steps:

### Configuring FCM

The first step of the Quickstart involves configuring your credentials with FCM. 

All push notifications requests for Android devices go through Firebase Cloud Messaging (FCM), Google’s service which delivers them to the device. 

Pusher’s SDKs and API are abstracted above FCM as well as Apple’s APNs service so that you can deliver push notifications to both platforms with one request. Pusher manages the Server Key and Device Token for each request.

[This page](https://pusher.com/docs/beams/getting-started/android/configure-fcm) guides you through the process of getting an FCM Server Key.

### Uploading your FCM Server Key
After you have configured FCM the next step is to upload your FCM Server Key through the Quickstart wizard:

![beams-quickstart-fcm-key](//images.ctfassets.net/1es3ne0caaid/294FiNEj7r4NSPuGPiwARW/223624aeb943934e087d4fa93902ea10/Screenshot_2020-05-18_at_16.40.31.png)

## Step 3 - Integrating the Beams SDK into your Android project

Now you will integrate the Beams SDK into your Android project. This will send the Device Token to Pusher’s Beams service, which manages its lifecycle if it changes or if the user uninstalls the app. 

You will start by adding the necessary dependencies to your project build.gradle:

``` kotlin
    buildscript {
        ...

        dependencies {
           classpath 'com.google.gms:google-services:4.0.1'
        }
    }
```

And your app build.gradle:

``` kotlin
    dependencies {
        ...

        implementation 'com.google.firebase:firebase-core:16.0.1'
        implementation 'com.google.firebase:firebase-messaging:17.1.0'
        implementation 'com.pusher:push-notifications-android:1.4.0'
    }

    // Add this line to the end of the file
    apply plugin: 'com.google.gms.google-services'
```

You can now register the Device Token with the Beams service. All you have to do is import the SDK:

```
    import com.pusher.pushnotifications.PushNotifications;
```

Then register the Device Token at the appropriate point in your application lifecycle and subscribe your device to an interest `hello`:

``` kotlin
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        PushNotifications.start(getApplicationContext(), "YOUR_INSTANCE_ID");
        PushNotifications.addDeviceInterest("hello");
    }
```

When your server publishes a push notification to the interest *hello*, it will get passed to your app.

You can find more information on this step [here](https://docs.pusher.com/push-notifications/android/sdk-integration).

## Step 4 - Start sending notifications

Push notifications are triggered by your server to your Beams instance. After a device using your Android application subscribes to an interest on our service, your server can then send a push notification to that device by publishing to that interest.

In this example we’ll use Node.js. First, let’s install the dependency:

``` javascript
    $ npm install @pusher/push-notifications-server --save
```

In our JavaScript file, create a Beams instance with the app credentials shown on [our dashboard](https://dash.pusher.com). Then call `publishToInterests` with an array of interests and a payload. Every device subscribed to the interests specified in the array will receive a push notification.

To send via FCM, the payload key will be `fcm`:

``` javascript
    const PushNotifications = require('@pusher/push-notifications-server');

    let pushNotifications = new PushNotifications({
      instanceId: 'YOUR_INSTANCE_ID_HERE',
      secretKey: 'YOUR_SECRET_KEY_HERE',
    });

    pushNotifications
      .publishToInterests(['hello'], {
        fcm: {
          notification: {
            title: 'Hello World',
            body: 'Hello!',
          },
        },
      })
      .then(publishResponse => {
        console.log('Just published:', publishResponse.publishId);
      })
      .catch(error => {
        console.log('Error:', error);
      });
```

If you run your mobile app and put it into background mode, then run this script – you should see your notification. Neat, huh?

**Didn’t see the push notification?** Notifications are not displayed whilst the app is in the foreground. Try minimizing your app by pressing the home button before the push notification arrives.

You can send push notifications from your server by using one of our server SDKs. We currently support [many languages](https://pusher.com/docs/beams/reference/all-libraries) including PHP, Python, Node.js and Java.

We will walk you through the steps to send push notifications to your Android app users with Pusher’s Beams API.


Discover how to send push notifications for your Android device using FCM and our Push Notifications API to send both iOS and Android users with one request.

Send Push Notifications to your Android app

Lanre Adelowo

Webhooks make it extremely easy to send push notifications to all of your iOS and Android users with a single request. In this tutorial, learn about webhooks and how you can take advantage of them to send a notification to Slack every time a user reads or opens the sent notification. 

Notify Slack users of push notification status with webhooks

Wern Ancheta

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app using React Native. In the third and final part, add push notifications to inform both the customer and the driver of various events throughout the ordering process.

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app in React Native. In the third and final part, add push notifications for both the customer and the driver.

Create a food ordering app in React Native - Part 3

Create a food ordering app in React Native - Part 3: Adding push notifications

Food ordering apps such as UberEats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app. In part 1, create a simplified food ordering app using React Native.

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app. In part 1, create a simplified food ordering app using React Native.

Create a food ordering app in React Native - Part 1

Create a food ordering app in React Native - Part 1: Making an order

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app using React Native. In part 2, create the driver app and implement a chat functionality between the customer and the driver.

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create the food ordering and driving apps in React Native. In part 2, create the driver app and implement a chat functionality.

Create a food ordering app in React Native - Part 2

Create a food ordering app in React Native - Part 2: Adding the driver app and chat functionality

In this tutorial, create a web app for monitoring the status of your servers in realtime using Laravel.  The app will offer realtime monitoring of disk, CPU and memory. You can also add custom notifications and have the server send you a text message when the CPU usage goes above a set threshold.

Creating a server health monitoring app with Laravel

Christopher Batin

## Introduction

Pusher Beams allows you to customize push notifications you send to your devices via a server. However it can be expensive to run a server 24 hours a day 7 days a week and we may only need to send notifications every so often. This is where [Microsoft Azure Functions](https://azure.microsoft.com/en-gb/services/functions/) can help. Azure Functions are serverless and work on a pay as you go model (with a generous free tier). This means that you only pay for when you use the function. We’re going to explore how we can setup Pusher Beams on an Android client using an Azure Function running Java to trigger the notifications.


## Prerequisites


- A free Microsoft Azure account. You can create one [here](https://azure.microsoft.com/en-gb/free/).
- A free Pusher account. You can create one [here](https://dash.pusher.com/authenticate).
- Maven installed on your machine. Instructions [here](https://maven.apache.org/install.html).
- A free Google Firebase account. You can create one [here](https://firebase.google.com).
- Postman or another HTTP client installed on your machine. You can download Postman from [here](https://www.getpostman.com).
- Android Studio 3.3.2+
- An understanding of Android development and Android Studio environment.


## Create your Android application

We will need to have a user that has registered for notifications and signed up for an interest we will call “hello”, so we can test out our implementation. We’re going to create a very basic Android app that doesn’t actually show anything to the user except for the notification on the lock screen.

Create a new **Empty Activity** project using Android Studio and name it something like AzurePusher. Provide a **Package name** and remember this as you will need it for completing the Firebase set up. We will be using **Kotlin** as the language choice for this tutorial and supporting Android 16+ (Jelly Bean). 

### Firebase set up

Log in to your Firebase account [here](https://firebase.google.com) and go to your console. If you do not already have a project created you will need to create one and name it anything you like, if you have a project select it. Within the **Project Overview** page select **Add App** and follow the instruction for creating a new Android application. 

Once you have completed the setup for your Android app you will be returned to the dashboard. You will need to go to the project settings (found within the “settings cog” in the top left). Once in the project settings select the **Cloud Messaging** tab. Copy the **Server Key** you will need it for setting up your Pusher Beams instance.

![azure-java-android-notifications-img1](//images.ctfassets.net/1es3ne0caaid/4M0VL46QppgHg8oYf7Cwuw/f661c1fd4768eab49983131482daac06/azure-java-android-notifications-img1.png)

### Creating a Pusher Beams instance
Login or create an account to access your dashboard [here](https://dash.pusher.com). Create a new beams instance using the dashboard.

![zure-java-android-notifications-img2](//images.ctfassets.net/1es3ne0caaid/1BmsX4wk9Z37hMEEyris3O/029e824e0ada5ae5e95bafc8c048ec69/zure-java-android-notifications-img2.png)

Complete step one of the Android setup guide, by providing your FCM server key you copied earlier and **Continue**. We will pick up the remainder later on in this tutorial. Press the **X** to exit the setup guide and you will be returned to your dashboard for that instance. Scroll to the bottom of the page and you will find your Pusher Beams instance ID and secret key, make note of these you will need them later.

### Adding the SDKs
Open your app level `build.gradle` file and add the following into your dependencies:

```
    // app/build.gradle
    ...
    dependencies {
     ...
     implementation 'com.google.firebase:firebase-messaging:17.1.0'
     implementation 'com.pusher:push-notifications-android:1.4.0'
     ...
    }
    ...
```

Here we are adding the Firebase messaging SDK and the Pusher Beams SDK. You should already have the Google Service SDK and `google-services.json` added to your project when setting up the Firebase app.

Synchronize Gradle by pressing the **Sync Now** button.

### Initialize Beams

Open your main activity and add the following import:

```kotlin
    // App/java/{your.package.name}/Main.activity
    import com.pusher.pushnotifications.PushNotifications
```

Add the following to your `onCreate` function:

```kotlin
    // App/java/{your.package.name}/Main.activity
    PushNotifications.start(applicationContext, "YOUR_INSTANCE_ID")
    PushNotifications.addDeviceInterest("hello")
```

Remember to replace `YOUR_INSTANCE_ID` with the instance id from your Pusher Beams console and run your application.

## Create your Azure function

### Creating a Pusher Beams instance
Log in or create an account to access your dashboard [here](https://dash.pusher.com). Create a new Pusher Beams instance using the dashboard.

![zure-java-android-notifications-img3](//images.ctfassets.net/1es3ne0caaid/4v90uIaC4j1eluWEWlPHf2/9392c9a352aed318a003caedef49ba41/zure-java-android-notifications-img3.png)

Complete step one of the Android setup guide, by providing your FCM server key you copied earlier and **Continue**. We will pick up the remainder later on in this tutorial. Press the **X** to exit the setup guide and you will be returned to your dashboard for that instance. Scroll to the bottom of the page and you will find your Beams instance ID and secret key, make note of these you will need them later.

### Creating our function
Log in to your Microsoft Azure portal [here](http://portal.azure.com). Using the search facility (found at the top of the page) search for “Function App”. 


> **Note:** When searching make sure to sure for “Function App” and not “Function Apps”

Once you are on the function app page click **Add** to begin the process of adding a new Azure Function. You will need to give your app a name, this must be unique and you cannot use full stops. Try reverse domain naming like this: `com-example-appname`. I have used `PusherBeams-Java-``Android`. As long as the radio buttons are set to **Create new**, entering a name should also auto complete the resource group and storage. If it hasn’t you should complete these fields as well. 

Select your **Subscription** and **Hosting Plan.** If you’re unsure what these should be leave them as the default values. 
We will also be using **Windows OS** for this tutorial and our location will be set to **Central US**. However feel free to alter the location if the **Java** run time is available there as well. Make sure your **Runtime Stack** is set to **Java** and click **Create**.

![zure-java-android-notifications-img4](//images.ctfassets.net/1es3ne0caaid/78NNiMqRzxJk3P9w9uwacR/4580551e2428aaa4a4f4b5f7194ce55b/zure-java-android-notifications-img4.png)

Once your resource has been created you should receive a notification on the navigation bar. If you don’t see this, wait a couple of minutes and refresh the page. Your resource should appear in a list of Function Apps. Select your resource. 

Now you have created a Function App you need to create a Function. On the overview page select the button **New Function**  or from the side bar click on the **+** the is next to the **Functions** drop down. You will be given a selection of ways to build your function, select the **Visual Code** option and click **Continue**. On the next page select the **Direct Publish** option and click **Continue**. Follow the instructions on the next page for installing and setting up for Visual Code, the Azure command line tools and the Azure Functions extension for Visual Studio Code. Make sure you have signed in to your Azure account in Visual Studio Code before continuing.

![zure-java-android-notifications-img5](//images.ctfassets.net/1es3ne0caaid/pnMQSysIdYIFJnzqaKG3P/b8536579deba23810505de3b02452fa5/zure-java-android-notifications-img5.png)

With Visual Code Studio open open the command palette (**View → Command Palette**). Select **Create New Project**. When prompted provide an empty directory for your project and select the language to be **Java**. Provide a group ID using a reverse domain name naming method. Complete the remaining steps as appropriate (you can just accept the default values).

Azure functions make it easy to invoke your code by hitting an HTTP endpoint. This is great for push notifications, as you can hit this endpoint using our HTTP rest client and passing in our message. You will see more of this later when you test your integration. For now all you need to know is that the default implementation will set this up for you.


> **Note:** There are lots of other templates available for invoking your function and you may wish to explore these as well. You can always invoke your function from the portal if you wish to.

 
Once your project is setup you can deploy it straight from Visual Code, right click on the newly created **src** folder and select **Deploy to Function App**. Select the function app you created earlier for example Pusher-Beams-Java-Android. This will complete the deployment process for you, you can confirm the success by checking the terminal output in Visual Code Studio and by refreshing your Azure Portal. 

![zure-java-android-notifications-img6](//images.ctfassets.net/1es3ne0caaid/6bEGGPpvVja9YVahAenTZS/51b3b6d5c45b9166d3f1ebe0dc448c08/zure-java-android-notifications-img6.png)

### Writing our function

The first thing we need to do in our function is install our dependencies. Open your `pom.xml` file and add the following to your dependencies (make sure it’s `<dependencies>`  and not `<dependencyManagement>`):

```xml
    // pom.xml
    <dependencies>
      // ....
      <dependency>
        <groupId>com.pusher</groupId>
        <artifactId>push-notifications-server-java</artifactId>
        <version>1.1.0</version>
      </dependency>
      // ...
    </dependencies>
```

If prompted you should synchronize your project. Now open your `Function.java` and replace the contents of the file with the following:

```java
    // src/main/java/{your/reverse/domain}/Function.java
    package YOUR_PACKAGE_NAME;
    
    import java.io.IOException;
    import java.net.URISyntaxException;
    import java.util.*;
    import com.microsoft.azure.functions.annotation.*;
    import com.pusher.pushnotifications.PushNotifications;
    import com.microsoft.azure.functions.*;
    public class Function {
        @FunctionName("HttpTrigger-Java")
        public HttpResponseMessage run(@HttpTrigger(name = "req", methods = { HttpMethod.GET,
                HttpMethod.POST }, authLevel = AuthorizationLevel.FUNCTION) HttpRequestMessage<Optional<Notification>> request,
                final ExecutionContext context) {
            String instanceId = "YOUR_INSTANCE_ID";
            String secretKey = "YOUR_SECRET_KEY";
            final Notification body = request.getBody().get();
            if (body == null) {
                return request.createResponseBuilder(HttpStatus.BAD_REQUEST)
                .body("Please pass a string or in the request body").build();
            }
            PushNotifications beamsClient = new PushNotifications(instanceId, secretKey);
            List<String> interests = Arrays.asList("hello");
            Map<String, Map> publishRequest = new HashMap();
            Map<String, String> alertMessage = new HashMap();
            alertMessage.put("title", body.getTitle());
            alertMessage.put("body", body.getMessage());
            Map<String, Map> alert = new HashMap();
            alert.put("alert", alertMessage);
            Map<String, Map> aps = new HashMap();
            aps.put("aps", alert);
            publishRequest.put("apns", aps);
            try {
                beamsClient.publishToInterests(interests, publishRequest);
                return request.createResponseBuilder(HttpStatus.OK).body("Push Sent").build();
            } catch (IOException e) {
                e.printStackTrace();
                return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR).body("Push Failed").build();
            } catch (InterruptedException e) {
                e.printStackTrace();
                return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR).body("Push Failed").build();
            } catch (URISyntaxException e) {
                e.printStackTrace();
                return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR).body("Push Failed").build();
            }
        }
    }
```

This code will be used by our Azure function later on to publish notifications to devices that our registered for the `hello` interest. We retrieve the title and message from the request body before creating an object that the Pusher Beams library can use to publish our push notification. Remember to replace `YOUR_INSTANCE_ID` and `YOUR_SECRET_KEY` with the credentials from your Pusher Beams console. The above code has used an object `Notification`, this object is used to decode the request body. 

Create a new file called `Notification.java` and add the following to fix the compiler warnings:

```java
    // src/main/java/{your/reverse/domain}/Notification.java
    package YOUR_PACKAGE_NAME;
    public class Notification {
        private String title;
        private String message;  
      
        public Notification(String title, String message) {
          this.title = title;
          this.message = message;
        }
      
        public String getTitle() {
          return title;
        }
      
        public String getMessage() {
          return message;
        }
        
        @Override
        public String toString() {
          return "Notification={title=" + title + ",message=" + message + "}";
        }
    }
```

Next we need to comment out the auto-generated test case that Visual Studio Code has made for us. Go to `FunctionTest.java` and comment out the file. Alternatively you could get the test to pass if you wish.

Now we can deploy the correct code to, make sure you have saved all your files and deploy your code as you did before. Alternatively you can use the command palette and the **Deploy to Function App** command.

Return to your Azure Portal and your function app, select the **HttpTrigger-Java** (it may be named differently for you if you used a custom setup earlier in this tutorial) within the **Functions** dropdown. Click the **Get function URL** button and copy the URL for the **default (Function key)** and keep it somewhere safe. You will need it for testing your integration later on.

![zure-java-android-notifications-img7](//images.ctfassets.net/1es3ne0caaid/5bDvZhKO09JqSRMAklC7zz/239fe398dc5a0147b62659fdddced83f/zure-java-android-notifications-img7.png)

## Testing our implementation

Open your Postman HTTP rest client and create a new POST request. Add the function URL, that you got from your Azure function earlier, to the URL field. This URL contains a secret key for invoking your function, anybody with this key could potentially invoke your function so you should not share it within the public domain. Within the body of the post request add the following:

```
    {
        "title": "hello",
        "message": "Just a friendly hello"
    }
```

![azure-java-android-notifications-img9](//images.ctfassets.net/1es3ne0caaid/5wFDJgoDuqWXD9zPhDfpfV/75daa86f2b739fa6fd3bad06fffdb0f4/azure-java-android-notifications-img9.png)

Once you are done press the **Send** button at the bottom. If everything has worked as expected you should receive a push to your device.

![zure-java-android-notifications-img8](//images.ctfassets.net/1es3ne0caaid/47Szm2bm6TpJg5UEzmxrVd/070584beb4818b18d6ad3c0ff0ffb365/zure-java-android-notifications-img8.jpeg)

## Conclusion

We’ve learned how to create an Azure function using Java that can publish a push notification using Pusher Beams to an Android device. The source code for this tutorial can be found [here](https://github.com/cjbatin/Azure-function-Java-and-Pusher-Beams-for-Android-Notifications).

Azure Functions are serverless and work on a pay as you go model, which is useful if you only need to send push notifications every so often. In this tutorial, explore how to setup Pusher Beams on an Android client using an Azure Function running Java to trigger the notifications.

Azure function running Java for Android notifications

In this tutorial, we are going to look into building a todo iOS app with React Native. The most interesting part of this tutorial is the fact that we will be implementing push notifications via [Pusher Beams.](https://pusher.com/beams) Every time an updated version of the app is released to the App Store, all devices that have the app installed will get a notification informing them of the available upgrade.

## Prerequisites

To follow along in this tutorial you need the following things:

- Xcode installed on your machine. Download [here](https://developer.apple.com/xcode).
- Know your way around the Xcode IDE.
- React Native. Find out how to install it [here](https://facebook.github.io/react-native/docs/getting-started.html). You will need to follow the section **Building Projects with Native Code.**
- Carthage installed on your machine. Install it with `brew install carthage`.
- A Pusher Beams account. Create one [here](http://https:://dash.pusher.com).


> If you happen not to have `brew` installed, you can do so by running `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`.


## Creating the iOS project

We will be naming our project `todoApp`. To do that we will be needing to make use of the `react-native` CLI tool to create a new iOS project. Open a terminal and run the following command:

```
    $ react-native init todoApp
```

Depending on your internet connection, the above command should take some time. Once it is done, we are ready to add functionality to our iOS app.

The first thing we need to do is to actually build a useful app - the to-do app. Open up the project in your favorite editor, then create a file called `Todo.js`. It will serve as the model for our project. In `Todo.js`, you will have to paste the following code:

``` javascript
    // todoApp/Todo.js
    
    import { AsyncStorage } from 'react-native';
    
    export default class Todos {
      constructor() {
        this.tasks = {
          items: [],
        };
    
        this.all(() => {});
      }
    
      // register a callback event passing the items found in the store
      // as it's arguments
      all = callback => {
        AsyncStorage.getItem('pushertutorial', (err, allTasks) => {
          if (err !== null) {
            return;
          }
    
          if (allTasks === null) {
            return;
          }
    
          this.tasks = JSON.parse(allTasks);
          callback(this.tasks.items);
        });
      };
    
      // saves a new item to the store
      save = item => {
        this.tasks.items.push(item);
        return AsyncStorage.setItem('pushertutorial', JSON.stringify(this.tasks));
      };
      
      // deletes an item based off an index from the store.
      delete = index => {
        this.all(items => {
          const tasks = {
            items: items.filter((task, idx) => {
              return idx !== index;
            }),
          };
          AsyncStorage.setItem('pushertutorial', JSON.stringify(tasks));
        });
      };
    }
```    

The above code uses the default key-value pair storage system bundled with React Native called AsyncStorage to retrieve and save our to-do items. You can read more about AsyncStorage [here](https://facebook.github.io/react-native/docs/asyncstorage).

Moving on, we will have to actually make use of the Todo model we created earlier. To do this, you will need to edit the `App.js` file already created by React Native during the installation earlier. You should edit `App.js` and paste in the following:

``` javascript
    // todoApp/App.js
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      FlatList,
      AsyncStorage,
      Button,
      TextInput,
      Keyboard,
      Platform,
    } from 'react-native';
    import Todos from './Todo';
    
    export default class TodoList extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          tasks: [],
          text: '',
        };
    
        this.todos = new Todos();
        this.syncTodos();
      }
    
      syncTodos = () => {
        this.todos.all(items => {
          this.setState({
            tasks: items,
            text: '',
          });
        });
      };
    
      updateTaskText = text => {
        this.setState({ text: text });
      };
    
      addTask = () => {
        let notEmpty = this.state.text.trim().length > 0;
    
        if (notEmpty) {
          let { tasks, text } = this.state;
    
          this.todos.save({ text });
          this.syncTodos();
        }
      };
    
      deleteTask = i => {
        this.todos.delete(i);
        this.setState({
          tasks: this.state.tasks.filter((task, index) => {
            return index !== i;
          }),
        });
      };
    
      render() {
        return (
          <View style={[styles.container, { paddingBottom: 10 }]}>
            <FlatList
              style={{ width: '100%' }}
              data={this.state.tasks}
              keyExtractor={(item, index) => item.text}
              renderItem={({ item, index }) => (
                <View key={index}>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}
                  >
                    <Text
                      style={{
                        paddingTop: 2,
                        paddingBottom: 2,
                        fontSize: 18,
                      }}
                    >
                      {item.text}
                    </Text>
                    <Button title="X" onPress={() => this.deleteTask(index)} />
                  </View>
                </View>
              )}
            />
            <TextInput
              style={styles.input}
              onChangeText={this.updateTaskText}
              onSubmitEditing={this.addTask}
              value={this.state.text}
              placeholder="Add a new Task"
              returnKeyType="done"
              returnKeyLabel="done"
            />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 10,
        paddingTop: 20,
      },
      input: {
        height: 40,
        paddingRight: 10,
        paddingLeft: 10,
        borderColor: 'gray',
        borderWidth: 1,
        width: '100%',
      },
    });
```    

While the above code is simple and straightforward, I would like to explain `deleteTask`. After deleting an item from the database, we remove the app from the local state too. This is to allow a UI update.

You can now run this app by either:

- `react-native run-ios`
- Clicking the play button in Xcode. ( highly recommended ).

At this stage, you should have the following:

![ios-beams-updates-demo-1](//images.ctfassets.net/1es3ne0caaid/ujmW55mAPm8g62mcgcqcq/b60a90aaa20e6635ff057ad7560e3938/ios-beams-updates-demo-1.gif)

## Push notifications

You have worked hard into this new release of your app, it wouldn’t make any sense to have just 2% of your existing users making use of the newer release - including critical bug fixes and some UI improvements probably. Sending push notifications to users can be a good way to keep your users informed. 

In this section, we will configure and add [Pusher Beams](https://pusher.com/beams) to our application to help us deliver push notifications about updates to users who have the app installed.

We will be making use of two packages to achieve this. 

- The official iOS SDK. [GitHub Repo](https://github.com/pusher/push-notifications-swift).
- The React Native bridge for the official iOS SDK. [GitHub Repo](https://github.com/b8ne/react-native-pusher-push-notifications).

> Using the React Native bridge requires the installation of the official SDK.

We will start by installing the official iOS SDK. We will make use of Carthage for this. Carthage makes use of a `Cartfile` to track dependencies to install, so we will need to create that file.

```
    $ # Assuming you are at the root directory which is todoApp
    $ cd ios
    $ touch Cartfile
``` 

The next thing to do is to specify the exact dependencies you want installed. This is as easy as pasting the following content in the `Cartfile`:

```
    // todoApp/ios/Cartfile
    github "pusher/push-notifications-swift"
```

Once the dependencies have been specified, the next point of action is to actually install them. To do that, you will need to run the below command in a terminal:

```  
    # This assumes you are in the todoApp/ios directory
    $ carthage update
```    

Once `carthage` is done installing, you will need to:

1. In Xcode, visit the **General** settings tab of the application’s target, in the “Linked Frameworks and Libraries” section, drag and drop the `PushNotifications.framework` from the [Carthage/Build](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#carthagebuild) folder on disk. 

> A directory called Carthage will be created next to the `**Cartfile**`. You will need to locate `**PushNotifications.framework**` in the iOS folder too.

2. On your application targets’ **Build Phases** settings tab, click the *+* icon and choose **New Run Script Phase**. Create a run script in which you specify your shell (ex: `/bin/sh`), add the following contents to the script area below the shell:
    
    /usr/local/bin/carthage copy-frameworks


3. Add the path below to `PushNotifications.framework` under “Input Files". 
    
    $(SRCROOT)/Carthage/Build/iOS/PushNotifications.framework    


4. Add the path below to `PushNotifications.framework` under the “Output Files”. 
    
    $(BUILT_PRODUCTS_DIR)/$(FRAMEWORKS_FOLDER_PATH)/PushNotifications.framework    

The next step is to now install the React Native bridge which will allow us access native code (the official iOS SDK in this case ) from JavaScript. To do that, you need to run the following command

```  
    $ npm install react-native-pusher-push-notifications
``` 

1. In Xcode, in the project navigator, right click **Libraries** ➜ **Add Files to todoApp**.
2. Go to **node_modules** ➜ **react-native-pusher-push-notifications** and add **RNPusherPushNotifications.xcodeproj**
3. In Xcode, in the project navigator, select your project. Add **libRNPusherPushNotifications.a** to your project's **Build Phases** ➜ **Link Binary With Libraries**

Open the `AppDelegate.m` to register the device for push notifications. Append the following contents to the file:

```
    // todoApp/ios/AppDelegate.m
    
    // Add this to the top of the file where other imports are placed.
    #import "RNPusherPushNotifications.h" 
    
    - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
      NSLog(@"Registered for remote with token: %@", deviceToken);
      [[RNPusherPushNotifications alloc] setDeviceToken:deviceToken];
    }
    
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
      [[RNPusherPushNotifications alloc] handleNotification:userInfo];
    }
    
    -(void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
      NSLog(@"Remote notification support is unavailable due to error: %@", error.localizedDescription);
    }
```    

As a final step, you will need to add the following to your Header search path **under **Build Settings**, `$(SRCROOT)/../node_modules/react-native-pusher-push-notifications/ios`.


> If you receive an error such as “dyld: Library not loaded:”, you should go to **Build Settings** and set **Always Embed Swift Standard Libraries** to yes.

Login or create an account to access your Pusher Beams dashboard [here](https://dash.pusher.com/). Create a new Pusher Beams instance using the dashboard.

Complete only step one of the iOS setup guide and follow the onscreen instructions to upload (and how to find) your APN key and Team ID. Then press the **X** to exit the setup guide and you will be returned to your dashboard for that instance. Scroll to the bottom of this page and you will find your Pusher Beams instance ID and secret key, make note of these you will need them later.

As a final step, you will need to enable push notifications capabilities for the project. You will also need to set the correct team and bundle ID as without those, push notifications capabilities cannot be enabled.

![ios-beams-updates-push-notifications-on](//images.ctfassets.net/1es3ne0caaid/4MP2SyBVwkuee0eeIOmECI/1f63fb349409a873f1fb2461004dd4fd/ios-beams-updates-push-notifications-on.png)

You will need to edit the `index.js` file to ask the user for permissions to send notifications and also subscribe to the updates topic.

``` javascript
    // todoApp/index.js
    
    import { Alert, Linking, AppRegistry, Platform } from 'react-native';
    import App from './App';
    import { name as appName } from './app.json';
    import RNPusherPushNotifications from 'react-native-pusher-push-notifications';
    
    const appUpdateInterest = 'debug-updates';
    
    // Initialize notifications
    export const init = () => {
      // Set your app key and register for push
      RNPusherPushNotifications.setInstanceId(
        'YOUR_PUSHER_INSTANCE_KEY'
      );
    
      // Init interests after registration
      RNPusherPushNotifications.on('registered', () => {
        subscribe(appUpdateInterest);
      });
    
      // Setup notification listeners
      RNPusherPushNotifications.on('notification', handleNotification);
    };
    
    // Handle notifications received
    const handleNotification = notification => {
      if (Platform.OS === 'ios') {
        Alert.alert('App update', notification.userInfo.aps.alert.body, [
          { text: 'Cancel', onPress: () => {} },
          {
            text: 'Update now',
            onPress: () =>
              // Just open up Apple's Testlight in the app store.
              // Ideally we will replace this if the app has been previously released to 
              // the app store
              Linking.openURL(
                'itms-apps://itunes.apple.com/ng/app/testflight/id899247664?mt=8'
              ),
          },
        ]);
      }
    };
    
    // Subscribe to an interest
    const subscribe = interest => {
      console.log(interest);
      RNPusherPushNotifications.subscribe(
        interest,
        (statusCode, response) => {
          console.error(statusCode, response);
        },
        () => {
          console.log('Success');
        }
      );
    };
    
    init();
    
    AppRegistry.registerComponent(appName, () => App);
```    

The above piece of code is really easy to understand as it all does is configure the PushNotifications library to make use of the key we got from the dashboard earlier. When the device has been registered with Pusher Beams, we subscribe the user to the `debug-updates` topic as all notifications for updating the app will be published to that topic.

In `handleNotification` , we show an alert dialog that provides the user with two options. One is to cancel, the other is to actually update. Clicking on the option to update the app will take the user to the Apple app store.

> Since this is an hypothetical app, we will forward the user to Apple’s Testflight app. You can replace the link to that of a real app if the app already exists on the app store.


## Sending push notifications to the device

The bulk of the entire work has been done. All is that is left now is to actually test that push notifications are delivered to the user. To do this, you will need to visit your instance page on the [dashboard](https://dash.pusher.com). You will want to navigate to the **Debug** console.

> You will need to run the app on a real device as push notifications do not work on a simulator.

![ios-beams-updates-events-log](//images.ctfassets.net/1es3ne0caaid/6uZXS1ZJdYSCyICsmc8G2/2a933f60b500cfde9bf36b018b5ab0ec/ios-beams-updates-events-log.png)

Once you have filled the above form, click on the **Publish Notifications** button. You will get an alert on your device in less than a second. 

Here is an example of how the app works. You should be able to replicate this behavior on your device.

![ios-beams-updates-demo-2](//images.ctfassets.net/1es3ne0caaid/2JmbH8rsGsWwm8GQ0CUqoQ/72927ad023e21970f8063ab6f63a23bd/ios-beams-updates-demo-2.gif)


## Conclusion

In this tutorial, we have built a mechanism for informing users of updates to our app with the help of Pusher Beams. 

The source code can be found on [GitHub](https://github.com/adelowo/pusher-app-updates-push-notifications).

In this tutorial, you will build a simple to-do app for iOS using React Native. You will integrate push notifications, so that every time an updated version of the app is deployed to the App Store, users will receive a notification.

Learn & Discover Pusher

Create a realtime results feed with React and Node.js

Send Push Notifications to your Android app

Notify Slack users of push notification status with webhooks

Create a food ordering app in React Native - Part 3: Adding push notifications

Create a food ordering app in React Native - Part 1: Making an order

Create a food ordering app in React Native - Part 2: Adding the driver app and chat functionality

Creating a server health monitoring app with Laravel

Azure function running Java for Android notifications

Using Pusher Beams to notify users of a new release of your iOS app

Products

Developers

Company

Connect