【问题标题】:How to send/receive push notifications from ionic mobile app?如何从 ionic 移动应用发送/接收推送通知?
【发布时间】:2015-03-16 06:00:14
【问题描述】:

我有一个使用 Ionic 框架(在 cordova 上)构建的消息传递应用程序。我计划为 android 构建这个,我想要一种使用 javascript/ionic 从应用程序发送和接收推送通知的方法。

有没有关于如何设置这样的东西的好教程?

【问题讨论】:

标签: android cordova push-notification ionic-framework


【解决方案1】:

Holly Schinsky 提供了example application。它的核心是 PushPlugin 的使用,这是在 Cordova 上处理推送通知的标准方法。在该 GitHub 存储库上的文档中为此主题提供了相当广泛的教程。主要方法是pushNotification.register,注册设备监听推送通知。

如果您需要在本地触发通知,您可能需要查看Local notification plugin。有了它,您可以添加要在设备上显示的通知,而无需外部服务来发送推送通知。

【讨论】:

    【解决方案2】:

    使用这个插件https://github.com/phonegap-build/PushPlugin

    Android 设备通过 Google Cloud Messaging (GCM) 服务接收推送通知,而 iOS 设备通过 Apple Push Notifications (APN) 服务接收它们。

    接收通知的方式(通过声音、警报等)是注册时应用程序代码中设置的选项以及用户设备通知设置的组合。

    如果您想要更具体的教程,请遵循以下教程:

    http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

    【讨论】:

      【解决方案3】:

      ngCordova 有一个支持推送通知的插件。它有适用于 iOS 和 Android 的示例代码。看看吧:http://ngcordova.com/docs/plugins/pushNotifications/

      【讨论】:

        【解决方案4】:

        最新的 phonegap-plugin-push 允许您在 ionic 应用中注册和接收推送通知。它在以下 Github 链接中维护:

        https://github.com/phonegap/phonegap-plugin-push

        安装:

        cordova plugin add https://github.com/phonegap/phonegap-plugin-push --variable SENDER_ID="XXXXXXX"
        

        SENDER_ID="XXXXXXX" 中的XXXXXXX 映射到Google Developer Console 中的项目编号。要查找项目编号登录到 Google Developer Console,请选择您的项目并单击下面屏幕截图中的菜单项以显示您的项目编号。

        如果您不创建 Android 应用程序,您可以为此值添加任何内容。

        注意:您可能需要在 package.json 中指定 SENDER_ID 变量。

        "cordovaPlugins": [
            {
              "variables": {
                "SENDER_ID": "XXXXXXX"
              },
              "locator": "phonegap-plugin-push"
            }
          ]
        

        注意:如果您计划使用 prepare 方法安装/恢复插件,则需要在 config.xml 中指定 SENDER_ID 变量。否则 prepare 方法将跳过安装插件。

        <plugin name="phonegap-plugin-push" spec="1.6.0">
            <param name="SENDER_ID" value="XXXXXXX" />
        </plugin>
        

        安装后,您现在可以将以下代码添加到您的主 javascript 文件中以注册和接收推送通知:

            $ionicPlatform.ready(function () {
        
                 var push = PushNotification.init({
                   android: {
                     senderID: "XXXXXXX"//, //project token number (12 digit) from https://console.developers.google.com
                     // forceShow: "true", //force show push notification when app is in foreground on Android only.
                   },
                   browser: {
                     pushServiceURL: 'http://push.api.phonegap.com/v1/push'
                   },
                   ios: {
                     /*senderID: "XXXXXXX",*/ //If using GCM for ios, project token number (12 digit) from https://console.developers.google.com
                     /*gcmSandbox: 'true',*/ //If using GCM for ios
                     alert: 'true',
                     badge: 'true',
                     sound: 'true',
                   },
                   windows: {}
                 });
        
                 PushNotification.hasPermission(function (permissionResult) {
                   if (permissionResult.isEnabled) {
                     $log.debug("has permission for push notification");
        
                     /*Register device with GCM/APNs*/
                     push.on('registration', function (data) {
                       // data.registrationId
                       $log.debug("data.registrationId: " + data.registrationId);          
                     });
        
                     push.on('notification', function (data) {
                       // data.message,
                       // data.title,
                       // data.count,
                       // data.sound,
                       // data.image,
                       // data.additionalData
                       $log.debug(JSON.stringify(data));
                     });
        
                     push.on('error', function (e) {
                       // e.message
                       $log.debug("e.message: " + e.message);
                       //alert(e.message);
                     });
                   }
                 });
               }
             }
        

        【讨论】:

        • 如何注入这个,因为我尝试但显示错误,如.init is not defined
        • @Pedro Miguel Pimienta Morales 您是否在浏览器或设备上收到错误“.init 未定义”。该插件仅适用于设备。要停止在浏览器上出现错误,您可以将调用包装在条件“if (window.cordova) {}”中。
        • 这是必要的"locator": "phonegap-plugin-push"
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-08-19
        • 1970-01-01
        • 2017-10-24
        • 2020-06-25
        • 2017-06-13
        • 1970-01-01
        相关资源
        最近更新 更多