在 Ionic 中单击通知时如何打开详细信息页面

Posted 2023-02-24

【中文标题】在 Ionic 中单击通知时如何打开详细信息页面

【英文标题】：How to open detail page when click notification in Ionic

【发布时间】：2015-08-26 12:26:06

【问题描述】：

我正在使用 Ionic 平台创建移动应用程序，需要有关这种情况的帮助。我可以使用此代码获取 regId，然后可以发送通知。

但是当我从我的应用程序发送关于商店的通知时，当我收到点击通知时如何打开该商店的页面？

var pushNotification;

function onDeviceReady() 
    document.addEventListener("backbutton", function (e) , false);

    var pushNotification = window.plugins.pushNotification;
    if (device.platform == 'android' || device.platform == 'Android' || device.platform ==
        'amazon-fireos') 
        pushNotification.register(successHandler, errorHandler, 
            "senderID": "788xxxxxxxx",
            "ecb": "onNotificationGCM"
        );
    

// handle APNS notifications for ios

function onNotificationAPN(e) 
    // alert('apn');
    if (e.alert) 
        // showing an alert also requires the org.apache.cordova.dialogs plugin
        navigator.notification.alert(e.alert);
    
    if (e.sound) 
        // playing a sound also requires the org.apache.cordova.media plugin
        var snd = new Media(e.sound);
        snd.play();
    
    if (e.badge) 
        pushNotification.setApplicationIconBadgeNumber(successHandler, e.badge);
    

// handle GCM notifications for Android

//function onNotification(e) 
onNotificationGCM = function (e) 
    //  alert('onnoti');
    switch (e.event) 
        case 'registered':
            if (e.regid.length > 0) 
                // alert('f');
                // 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.
                alert("regID = " + e.regid);
                $rootScope.regidx = 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) 
                // on Android soundname is outside the payload.
                // On Amazon FireOS all custom attributes are contained within payload
                var soundfile = e.soundname || e.payload.sound;
                // if the notification contains a soundname, play it.
                // playing a sound also requires the org.apache.cordova.media plugin
                var my_media = new Media("/android_asset/www/" + soundfile);
                my_media.play();
            
            break;
        case 'error':
            break;
        default:
            break;
    


function tokenHandler(result) 
    alert('device token = ' + result);
    // 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) 
    alert('Callback Success! Result = ' + result)


function errorHandler(error) 
    alert(error);

【参考方案1】：

这里有更好的解决方案：

从您的服务器发送一个带有额外值名称“id”的推送通知。

收到通知后，应用会使用“localStorage.setItem”保存此“额外值”的值。

最后，在“onresume”事件中，应用程序使用 localStorage.getItem 读取此“id”的值，并根据该值使用 $state.go( ....); 打开相应的页面；

示例： 您想在发送特定推送时在您的应用程序中打开名为“profile”的页面。 您发送包含“额外值”的通知，id=profile，根据平台以打开消息的相同方式发送。 当应用收到推送时，您保存此值 window.localStorage.setItem("page", id); 在“onresume”事件中：

它读取“page”的值 ... var page= window.localStorage.getItem("page"); 它重定向到页面 if (page!=null) $stete.go('page.name');根据页面的值。 它删除了页面 window.localStorage.revomeItem(page) 的值（因为如果页面值为 null，则应用程序必须正常加载）。 如果应用程序关闭（不是从后台）打开应用程序也是如此

代码示例：

//************************************  OUTSIDE DEVICE READY
    // handle APNS notifications for iOS
    function onNotificationAPN(e) 
    // storage the e.id value  (the extra value sent in push notification)
    window.localStorage.setItem("push_que", e.id);
    var push_que=e.id;
    // if the push notification is coming inline
    if (e.foreground=="1")
    
   // storage the e.numero value  (the extra value sent in push notification)
    window.localStorage.setItem("push_que", e.id);
    var push_que=e.id;
   /// some code here to open a message  if a new push is recieved inline
    ;
    if ( event.alert )
    
    navigator.notification.alert(event.alert);
    
    if ( event.sound )
    
    var snd = new Media(event.sound);
    snd.play();
    
    if ( event.badge )
    
    pushNotification.setApplicationIconBadgeNumber(successHandler, errorHandler, event.badge);
    
    

    // handle GCM notifications for Android
    function onNotificationGCM(e) 

                switch( e.event )
                
                     if (e.foreground)
                     
    //  if the push is recieved inline
   //  storage the value of  playoad.id,  the extra value sent by push
    window.localStorage.setItem("push_que", e.payload.id);
    var push_que=e.payload.id;

    
    else
    
    // otherwise we were launched because the user touched a notification in the notification tray

    if (e.coldstart)
    
  //  storage the value of  playoad.numero, the extra value sent by push
window.localStorage.setItem("push_que", e.payload.id);


else

  //  storage the value of  playoad.numero, the extra value sent by push
window.localStorage.setItem("push_que", e.payload.id);





                    break;

                    case 'error':

                    break;

                    default:

                    break;
                
            






    //********************************** END OUTSIDE DEVICE READY

找到here

您可以使用 Eddy Verbruggen 的 LaunchMyApp 插件。

只是：

cordova plugin add https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=ionicapp

在 URL_SCHEME=ionicapp 中，您可以更改为您自己的方案。

您可以在以下位置找到更多信息：http://mcgivery.com/using-custom-url-schemes-ionic-framework-app/

【讨论】：

首先非常感谢您的帖子，我的朋友，但我不明白 url 的部分。 var handleOpenURL = function(url) alert("RECEIVED URL:" + url);;据我了解，此代码是获取网址。但是我将如何以及从何处发送此网址？ （我正在使用 c# web 项目向我的应用发送通知）

如何在触摸此通知时将用户重定向到 ionic 应用程序上的特定页面？我正在使用github.com/katzer/cordova-plugin-background-mode 并通过您的代码执行cordova.plugins.backgroundMode.onactivate = function () var id = guid(); setInterval(function () cordova.plugins.backgroundMode.configure( title: 'Invest in this artwork!! :)' ) , 5000); onNotificationGCM(id);

我使用了与您提到的相同的代码，但是当我单击它时，它不会在 android 和 ios 设备中显示任何警报消息。请帮我解决这个问题

嗨@Will，感谢您的回答，我有一个问题，如果托盘中有多个通知，我该如何处理打开特定通知？提前致谢