Grails 3 Sending Push Notification using FCM

by Didin J. on Aug 04, 2017 Grails 3 Sending Push Notification using FCM

Tutorial of how to sending push notification using Firebase Cloud Messaging (FCM) to Android and iOS apps.

After the end of Google Cloud Messaging service, we could not find any plugin that uses for sending push notification using Firebase Cloud Messaging (FCM) to Android and iOS apps. That's why we write this tutorial after implements in production since FCM come to the world. We just use a dependency on a Grails core data library. Now, let start with Firebase configuration.


1. Setup Firebase Cloud Messaging (FCM)

We have to go to Firebase console from your browser. Login with your existing Google account then click "Add Project". Next, select the country and give it name then click "Create Project" button. After that, you will take to the project dashboard.

Grails 3 Sending Push Notification using FCM - Firebase console

Next, click settings (gear icon right of overview menu on the left side) then click "Project Setting".

Grails 3 Sending Push Notification using FCM - Settings

Click on "Cloud Messaging" tab then write down the legacy server key to your notepad. It will use in the Grails 3 application later. Next, back to general tab then click the circle of "Add Firebase to your iOS app". Follow the wizard, we just fill the iOS app bundle id and download configuration file ".plist" file. Do the same thing for Android app. For iOS, there's another configuration on Cloud Messaging tab. You have to upload certificate ".p12" that created from Apple developer console and exported using Keychain Access application on Mac os X.


2. Create Grails 3 Application

As usual, in almost all our tutorial always starting from scratch. Before that, make sure you have installed Grails 3 SDK and JDK 8 on your machine. Open the terminal or cmd then type this command to create new Grails 3 application.

grails create-app grails-fcm

In this tutorial, we use "grails-fcm" as the name of the project. Now, go to the newly created project folder.

cd grails-fcm

Now, go to grails console then run the application to make sure if everything is working properly.

grails
run-app

Grails 3 Sending Push Notification using FCM - Grails home page

If you see the page above in your browser with an address "localhost:8080", then we continue to the next step. Before that stop the application first.

stop-app


3. Add Grails Datastore Rest Client Dependency

Open and edit "build.gradle" on the root of the project using your editor or IDE. Add this line to dependencies section.

compile 'org.grails:grails-datastore-rest-client:5.0.0.RC2'

Compile the application before implement any method from the dependency. Just type this command from Grails 3 interactive console.

compile


4. Create a New Controller and View

We will create a simple form for sending a text message to specific FCM registration id. First, create a controller by type this command.

create-controller Fcm

Open and edit "grails-app/controllers/grails/fcm/FcmController.groovy" file then add import to RestBuilder.

import grails.plugins.rest.client.RestBuilder

Create new method for sending the push notification, so the complete controller will look like this.

package grails.fcm

import grails.plugins.rest.client.RestBuilder

class FcmController {

  def index() { }

  def sendPushNotification() {
    def regid = params.regid
    def title = params.title
    def body = params.body

    def rest = new RestBuilder(connectTimeout:1000, readTimeout:20000)
    def resp = rest.post("https://fcm.googleapis.com/fcm/send") {
      header 'Content-Type', 'application/json'
      header 'Authorization', 'key=AIza*****'
      json {
        notification = {
          title = title
          body = body
          sound = "default"
          click_action = "FCM_PLUGIN_ACTIVITY"
          icon = "fcm_push_icon"
        }
        to = regid
      }
    }

    flash.message = "Notification sent"
    redirect action: "index"
  }
}

Next, create a GSP file in the folder "grails-app/views/fcm/index.gsp". Make that file like this.

<!doctype html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>FCM Sender</title>

    <asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
</head>
<body>
    <div id="content" role="main">
        <section class="row colset-2-its">
            <h1>Send Push Notification</h1>
            <g:if test="${flash.message}">
              <div class="message" role="alert">
                ${flash.message}
              </div>
            </g:if>
            <g:form action="sendPushNotification">
              <fieldset>
                <div class="fieldcontain">
                  <label for="regid">FCM Registration ID</label>
                  <g:textField name="regid" />
                </div>
                <div class="fieldcontain">
                  <label for="title">Title</label>
                  <g:textField name="title" />
                </div>
                <div class="fieldcontain">
                  <label for="body">Message Body</label>
                  <g:textField name="body" />
                </div>
              </fieldset>
              <fieldset>
                <div class="buttons">
                  <g:submitButton class="save" name="submit" value="Send" />
                </div>
              </fieldset>
            </g:form>
        </section>
    </div>
</body>
</html>


5. Run and Test Send Push Notification

Next, run again the Grails application.

run-app

Open "localhost:8080" in the browser, then click the link of controller "grails.fcm.FcmController".

Grails 3 Sending Push Notification using FCM - Push Notification Page

Fill the form the click Send button. Make sure you get the FCM registration id from the Android or iOS app that already implements Firebase Cloud Messaging on it. You can find the source code on our GitHub. More on using Firebase Cloud Messaging using HTTP can be found in the documentation.

Thanks.