Phonegap PushNotification to open a specific app page

Question

I am doing pushnotification for both Android/IOS.I have used a phonegap push-plugin https://github.com/phonegap-build/PushPlugin, it seems to work great.

I am receiving message on my device now the problem is When i click on the received message it goes to app index.html page.But i want to open someother page eg home.html when i clicked the message and in home.html i will be showing the message.

How to achieve this?

MyPhoneGapActivity.java

package com.test;

import org.apache.cordova.DroidGap;
import android.os.Bundle;

public class MyPhoneGapActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.setIntegerProperty("loadUrlTimeoutValue", 60000); 
        super.loadUrl("file:///android_asset/www/index.html", 10000);
    }
}

index.js

<script type="text/javascript">
    var pushNotification;

    function onDeviceReady() {
        $("#app-status-ul").append('<li>deviceready event received</li>');

        document.addEventListener("backbutton", function(e)
        {
            $("#app-status-ul").append('<li>backbutton event received</li>');

            if( $("#home").length > 0)
            {
                // call this to get a new token each time. don't call it to reuse existing token.
                //pushNotification.unregister(successHandler, errorHandler);
                e.preventDefault();
                navigator.app.exitApp();
            }
            else
            {
                navigator.app.backHistory();
            }
        }, false);

        try 
        { 
            pushNotification = window.plugins.pushNotification;
            if (device.platform == 'android' || device.platform == 'Android') {
                $("#app-status-ul").append('<li>registering android</li>');
                pushNotification.register(successHandler, errorHandler, {"senderID":"661780372179","ecb":"onNotificationGCM"});     // required!
            } else {
                $("#app-status-ul").append('<li>registering iOS</li>');
                pushNotification.register(tokenHandler, errorHandler, {"badge":"true","sound":"true","alert":"true","ecb":"onNotificationAPN"});    // required!
            }
        }
        catch(err) 
        { 
            txt="There was an error on this page.\n\n"; 
            txt+="Error description: " + err.message + "\n\n"; 
            alert(txt); 
        } 
    }

    // handle APNS notifications for iOS
    function onNotificationAPN(e) {
        if (e.alert) {
             $("#app-status-ul").append('<li>push-notification: ' + e.alert + '</li>');
             navigator.notification.alert(e.alert);
        }

        if (e.sound) {
            var snd = new Media(e.sound);
            snd.play();
        }

        if (e.badge) {
            pushNotification.setApplicationIconBadgeNumber(successHandler, e.badge);
        }
    }

    // handle GCM notifications for Android
    function onNotificationGCM(e) {
        $("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');

        switch( e.event )
        {
            case 'registered':
            if ( e.regid.length > 0 )
            {
                $("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
                // Your GCM push server needs to know the regID before it can push to this device
                // here is where you might want to send it the regID for later use.
                console.log("regID = " + e.regID);
            }
            break;

            case 'message':
                // if this flag is set, this notification happened while we were in the foreground.
                // you might want to play a sound to get the user's attention, throw up a dialog, etc.
                if (e.foreground)
                {
                    $("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');

                    // if the notification contains a soundname, play it.
                    var my_media = new Media("/android_asset/www/"+e.soundname);
                    my_media.play();
                }
                else
                {   // otherwise we were launched because the user touched a notification in the notification tray.
                    if (e.coldstart)
                        $("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
                    else
                    $("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
                }

                $("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
                $("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
            break;

            case 'error':
                $("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
            break;

            default:
                $("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
            break;
        }
    }

    function tokenHandler (result) {
        $("#app-status-ul").append('<li>token: '+ result +'</li>');
        // Your iOS push server needs to know the token before it can push to this device
        // here is where you might want to send it the token for later use.
    }

    function successHandler (result) {
        $("#app-status-ul").append('<li>success:'+ result +'</li>');
    }

    function errorHandler (error) {
        $("#app-status-ul").append('<li>error:'+ error +'</li>');
    }

    document.addEventListener('deviceready', onDeviceReady, true);

 </script>

Solution 1

You can easily accomplish this,

Step 1 : Open your GCMIntentService.java file

Check for the method onMessage

in that method you will find from here they are passing the intent to your MyPhoneGapActivity.java ...Now what you have to do is you pass some extra information.... Passing some extra information to the intent

Check for this line

Intent notificationIntent = new Intent(context, MyPhoneGapActivity.class);
//here you pass the information
notificationIntent.putExtra ("url",url);

Can you see above i have passed extra information url ...for the complete code see below

  protected void onMessage(Context context, Intent intent) {
    Log.d(TAG, "onMessage - context: " + context);

    // Extract the payload from the message
    Bundle extras = intent.getExtras();
    if (extras != null)
    {
        boolean foreground = this.isInForeground();

        extras.putBoolean("foreground", foreground);

        if (foreground){
            PushHandlerActivity.sendToApp(extras);
        }else{
            String message = extras.getString("message");
            String title = extras.getString("title");
            Notification notif = new Notification(android.R.drawable.btn_star_big_on, message, System.currentTimeMillis() );
            notif.flags = Notification.FLAG_AUTO_CANCEL;
            notif.defaults |= Notification.DEFAULT_SOUND;
            notif.defaults |= Notification.DEFAULT_VIBRATE;

            String url = "notify";

            Intent notificationIntent = new Intent(context, MyPhoneGapActivity.class);
            //here you pass the information
            notificationIntent.putExtra ("url",url);
            notificationIntent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
            PendingIntent contentIntent = PendingIntent.getActivity(context, 0, notificationIntent, 0);

            notif.setLatestEventInfo(context, title, message, contentIntent);
            String ns = Context.NOTIFICATION_SERVICE;
            NotificationManager mNotificationManager = (NotificationManager) context.getSystemService(ns);
            mNotificationManager.notify(1, notif);
        }
    }
  }

Step 2:

In your MyPhoneGapActivity.java

package com.test;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MyPhoneGapActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.setIntegerProperty("loadUrlTimeoutValue", 60000); 

        Bundle extras = getIntent().getExtras();
        String message = extras.getString("url");
        if(message == "notify"){
            super.loadUrl("file:///android_asset/www/home.html", 10000);
        }else{
            super.loadUrl("file:///android_asset/www/index.html", 10000);
        }
    }
}

Thats it now when you click the notification it will load the home.html file:-)

Solution 2

I've never used this plugin before but it looks like it passes a message in the notification that you can process in your application. It seems therefore that in your index.html you could read this message and if it contains some certain string, redirect to main.html or wherever you want to go. You could do this while a splash screen is still visible or something so that the user doesn't see a jarring page redirect.

Solution 3

I am facing same problem after some research finally Got My Solution, If any one Have Same Problem .Please Follow these link

https://github.com/phonegap-build/PushPlugin/issues/213

Comments

[Swapnil Tandel]

Is there anyway to do the same thing with Apple push notification? I attached Phonegap Apple push notification plugin and want to change page when user click on notification.

[Yashar]

every thing that I am writing in this main activity class is disappearing after every cordova build. what should I do to keep my changes?

[Anas Azeem]

@sdg: Really helpful that was. One problem is, when the condition is satisfied if(message == "notify") the screen goes white after the splash screen. One thing to notice is, in the false condition it goes fine.

[ajbraus]

Is there a way to do this is pure javascript? Perhaps a timeout and window.location.assign('/foo/bar')?

[Fabrizio]

I do something very similar to this for my App. I pass a parameter to the notification and if I find that parameter I open a different page or call a function or ....

[lastoneisbearfood]

It would be simpler and more flexible to append url hash to the launchUrl, e.g., file:///android_asset/www/index.html#custompage or some parameters, e.g. file:///android_asset/www/index.html?page=custom. There is no need for home.html. Just use javascript to process window.location.hash or the url parameters when your device is ready.