From 49e3ca6f18e91157f9fb1a04ea18ab6602c72ff0 Mon Sep 17 00:00:00 2001
From: Fernando Valverde <fdov88@gmail.com>
Date: Tue, 7 Apr 2020 08:36:37 -0600
Subject: [PATCH] Adds Pusher Beams docs for Android PN (#7121)

* Adds Pusher Beams docs for Android PN [skip ci]

* Trigger CI
---
 docs/backend/pusher.md | 78 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 74 insertions(+), 4 deletions(-)

diff --git a/docs/backend/pusher.md b/docs/backend/pusher.md
index 66f5ce779..5d67b465a 100644
--- a/docs/backend/pusher.md
+++ b/docs/backend/pusher.md
@@ -4,15 +4,20 @@ title: Pusher
 
 # Pusher for Realtime Notifications
 
-Pusher is a third party service being used to power the [chat
-system](https://dev.to/connect).
+Pusher is a third party service being used to power the
+[chat system](https://dev.to/connect) and Push Notifications on
+[iOS](https://apps.apple.com/us/app/dev-community/id1439094790) &
+[Android](https://play.google.com/store/apps/details?id=to.dev.dev_android)
+native apps.
+
+## Chat System
 
 In order to use the chat functionality within your development environment, you
 will need to sign up for a free-tier Pusher account and retrieve its keys. Then
 you'll need to provide those keys to the Rails application.
 
-1. [Sign up](https://dashboard.pusher.com/accounts/sign_up) or [sign
-   in](https://dashboard.pusher.com/) to your Pusher account.
+1. [Sign up](https://dashboard.pusher.com/accounts/sign_up) or
+   [sign in](https://dashboard.pusher.com/) to your Pusher account.
 
 2. Once signed in, fill in the prompt to create a new Pusher Channels app.
 
@@ -35,3 +40,68 @@ you'll need to provide those keys to the Rails application.
    ![pusher-3](https://user-images.githubusercontent.com/22895284/51086058-0626d780-1742-11e9-9c2a-26b9b10fa77f.png)
 
 5. Done.
+
+## Mobile Push Notifications
+
+These steps are required only when working with the native Apps. In order to
+setup Push Notifications to mobile devices you need to create a Pusher Beams
+instance and retrieve its credentials
+
+1. [Sign up](https://dashboard.pusher.com/accounts/sign_up) or
+   [sign in](https://dashboard.pusher.com/) to your Pusher account.
+
+2. Once signed in, go in the "BEAMS" section on the left sidebar and fill in the
+   prompt to create a new Pusher Beams instance.
+
+![pusher-beams-1](https://user-images.githubusercontent.com/6045239/78602158-2e9d6480-7813-11ea-9da1-4f1310776570.png)
+
+3. In your new Pusher Beams instance, click the "Credentials" tab.
+
+   ![pusher-beams-2](https://user-images.githubusercontent.com/6045239/78602934-82f51400-7814-11ea-8cc8-6933c43079bc.png)
+
+4. Change your keys accordingly (name of Pusher key -> name of our application
+   key):
+
+```text
+Instance ID -> PUSHER_BEAMS_ID
+Instance Key -> PUSHER_BEAMS_KEY
+```
+
+5. Done. You now have your server configured to use Pusher Beams.
+
+However, in order to send Push Notifications to devices you'll need to do some
+platform specific configuration as well.
+
+### Firebase for Android Push Notifications
+
+1. Sign up or Sign in to [Firebase](https://firebase.google.com/)
+
+2. Add a new project. Google Analytics doesn't need to be configured for this
+   Push Notifications to work.
+
+![fcm-1](https://user-images.githubusercontent.com/6045239/78604287-cfd9ea00-7816-11ea-9b47-b374b4e60faf.png)
+
+![fcm-2](https://user-images.githubusercontent.com/6045239/78609833-d2d9d800-7820-11ea-9d78-53dfe823bd3f.png)
+
+3. Add Android support for your iOS app
+
+![fcm-3](https://user-images.githubusercontent.com/6045239/78609955-1b919100-7821-11ea-8a2f-9f96cf26185c.png)
+
+![fcm-4](https://user-images.githubusercontent.com/6045239/78612418-885b5a00-7826-11ea-91b8-125981367068.png)
+
+4. Download the `google-services.json` file (to be used in the Android app)
+
+![fcm-5](https://user-images.githubusercontent.com/6045239/78612412-85f90000-7826-11ea-8996-dcb568e7b037.png)
+
+5. Finish off the next steps (not required at this moment). Now head over to
+   your Firebase project's settings page and copy the Server key from the "Cloud
+   Messaging" tab
+
+![fcm-6](https://user-images.githubusercontent.com/6045239/78615948-11c35a00-7830-11ea-8470-675488a0ecc1.png)
+
+6. Now back in your Pusher Beams page account add the Server key from the
+   previous step under the "Settings" tab
+
+![fcm-7](https://user-images.githubusercontent.com/6045239/78616350-353ad480-7831-11ea-8d63-2f183c2f233b.png)
+
+7. Done.