离子服务入门：推送

最新推荐文章于 2024-08-03 21:02:21 发布

cunjie3951

最新推荐文章于 2024-08-03 21:02:21 发布

阅读量218

点赞数

文章标签： java android vue python web ViewUI

在本教程中，您将学习Ionic Push，这是一项Ionic服务，可轻松将推送通知发送给用户。

Ionic Push允许您向应用程序的用户发送推送通知。您可以随时选择触发它们。例如，在用户生日那天，您可以自动向他们发送推送通知以向他们打招呼。

这个怎么运作

Ionic Push充当用户设备和Firebase Cloud Messaging之间的中间人。第一步是使应用程序将其设备令牌发送到Ionic Push服务器。该设备令牌用作引用该特定设备的ID。服务器拥有该令牌后，他们现在可以向Firebase Cloud Messaging服务器发出请求，以实际向设备发送推送通知。在每台Android设备上，都运行着名为Google Cloud Messaging服务的Google Play服务。这使设备能够从Firebase Cloud Messaging平台接收推送通知。

这是显示推送通知流程的图表：

您要建造的东西

您将要构建一个简单的应用程序，该应用程序可以通过Ionic Push接收推送通知。它还将使用Ionic Auth服务来登录用户。这使我们能够试用定向的推送通知，该通知将仅将通知发送给特定用户。该应用程序将有两个页面：登录页面和用户页面。用户只能在登录后才能收到通知。

为了让您了解通知的外观，以下是该应用当前打开时收到的通知的屏幕截图：

另一方面，关闭应用程序时，通知如下所示：

设置Android的推送通知

在本部分中，我们将配置Firebase和Ionic云服务以允许推送通知。 Android中的推送通知主要由Firebase Cloud Messaging Service处理。 Ionic Push只是此服务之上的一层，可以更轻松地在Ionic应用程序中使用推送通知。

创建Firebase应用

第一步是创建一个新的Firebase项目。您可以通过转到Firebase控制台并单击“ 添加项目”按钮来做到这一点。您将看到以下表格：

输入项目名称，然后单击创建项目按钮。

创建项目后，您将被重定向到项目仪表板。在此处，点击概述标签旁边的齿轮图标，然后选择项目设置 。

在设置页面上，单击“ 云消息传递”选项卡。在那里您可以找到服务器密钥和发件人ID 。记下这些，因为稍后将需要它们。

创建一个离子应用程序

接下来，您需要在Ionic网站上创建Ionic应用程序。这使您可以使用Ionic Push服务和其他Ionic服务。如果您还没有Ionic帐户，可以通过注册创建一个帐户。创建帐户后，您将被重定向到仪表板，您可以在其中创建新的应用程序。

创建一个安全配置文件

创建您的应用程序后，转到设置 > 证书，然后单击新建安全配置文件按钮。输入配置文件名称的描述性名称，然后将“ 类型”设置为“ 开发 ”：

安全配置文件是安全存储您之前获得的Firebase Cloud Messaging凭据的一种方式。创建后，它将在表格中列出。单击新创建的安全配置文件旁边的“ 编辑”按钮。然后点击“ Android”标签。将您先前从Firebase控制台获取的服务器密钥的值粘贴到FCM服务器密钥字段中。最后，单击保存以保存更改。

引导新的离子应用程序

使用空白模板创建一个新的Ionic 2项目：

ionic start --v2 pushApp blank

创建项目后，安装phonegap-plugin-push插件。提供您从Firebase控制台获得的发件人ID：

cordova plugin add phonegap-plugin-push --variable SENDER_ID=YOUR_FCM_SENDER_ID --save

接下来，您需要安装Ionic Cloud插件。这使得在应用程序内部使用Ionic服务变得容易：

npm install @ionic/cloud-angular --save

最后，您需要更新Ionic配置文件，以便Ionic知道应将此特定项目分配给您先前创建的Ionic应用程序。您可以通过在Ionic应用程序的仪表板页面中复制应用程序ID来实现。您可以在应用名称的正下方找到该应用ID。一旦你复制它，打开.io-config.json和ionic.config.json文件，并粘贴了价值app_id 。

构建应用

现在您已准备好构建应用程序。您需要做的第一件事是启动Ionic开发服务器，以便在开发应用程序时可以立即看到更改：

ionic serve

编译过程完成后，在浏览器上访问开发URL。

添加Ionic应用程序和推送设置

打开src / app / app.module.ts文件，并添加应用程序的设置（ core ）和推送通知（ push ）。 app_id是您先前创建的Ionic应用程序的ID。 sender_id是您之前从Firebase控制台sender_id的发件人ID。在pluginConfig对象下，您可以选择设置推送通知设置。下面我们仅将sound和vibrate设置设置为true以告诉硬件设备处于静音模式时它可以播放推送通知声音或振动。如果您想进一步了解可用的配置选项，请查看Android的“ 推送通知”选项上的文档。

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'YOUR IONIC APP ID',
  },
  'push': {
    'sender_id': 'YOUR FCM SENDER ID',
    'pluginConfig': {
      'android': {
        'sound': true,
        'vibrate': true
      }
    }
  }
};

接下来，让Ionic知道您要使用cloudSettings ：

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings) // <-- add this
],

主页

空白模板中的默认主页将用作登录页面。打开pages / home / home.html文件并添加以下内容：

<ion-header>
  <ion-navbar>
    <ion-title>
      pushApp
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)='login();'>Login</button>
</ion-content>

为简单起见，我们只有一个登录按钮，而不是完整的登录表单。这意味着我们将用于登录的凭据嵌入在代码本身中。

接下来，打开src / pages / home / home.ts文件并添加以下内容：

import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Push, PushToken, Auth, User, UserDetails } from '@ionic/cloud-angular';
import { UserPage } from '../user-page/user-page';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  constructor(public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) {

    if (this.auth.isAuthenticated()) {
      this.navCtrl.push(UserPage);
    }

  }

  login() {

    let loader = this.loadingCtrl.create({
      content: "Logging in..."
    });

    loader.present();

    setTimeout(() => {
      loader.dismiss();
    }, 5000);

    let details: UserDetails = {
      'email': 'YOUR IONIC AUTH USER',
      'password': "YOUR IONIC AUTH USER'S PASSWORD"
    };

    this.auth.login('basic', details).then((res) => {

      this.push.register().then((t: PushToken) => {
        return this.push.saveToken(t);
      }).then((t: PushToken) => {

        loader.dismiss();
        this.navCtrl.push(UserPage);

      }, (err) => {

        let alert = this.alertCtrl.create({
          title: 'Push registration failed',
          subTitle: 'Something went wrong with push notifications registration. Please try again.',
          buttons: ['OK']
        });
        alert.present();

      });

    }, () => {

      let alert = this.alertCtrl.create({
        title: 'Login Failed',
        subTitle: 'Invalid Credentials. Please try again.',
        buttons: ['OK']
      });
      alert.present();

    });

  }

}

分解上面的代码，首先我们导入使用导航，加载器和警报所需的控制器：

import { NavController, LoadingController, AlertController } from 'ionic-angular';

然后导入使用Push and Auth所需的服务。

import { Push, PushToken, Auth, User, UserDetails } from '@ionic/cloud-angular';

添加这些后，导入“ User页面。由于我们尚未创建该页面，因此暂时将其注释掉。用户页面准备好后，请不要忘记取消注释。

//import { UserPage } from '../user-page/user-page';

在构造函数中，检查当前用户是否已通过身份验证。如果是，请立即导航到用户页面：

constructor(public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) {

    if (this.auth.isAuthenticated()) {
      this.navCtrl.push(UserPage);
    }

}

对于login功能，请显示加载程序并将其设置为5秒后自动关闭。这样，如果认证代码出了问题，则不会给用户留下无限的加载动画：

login() {
    let loader = this.loadingCtrl.create({
      content: "Logging in..."
    });

    loader.present();

    setTimeout(() => {
      loader.dismiss();
    }, 5000);
}

之后，使用已经添加到您的应用程序中的用户的硬编码凭据登录用户：

let details: UserDetails = {
    'email': 'YOUR IONIC AUTH USER',
    'password': "YOUR IONIC AUTH USER'S PASSWORD"
};

this.auth.login('basic', details).then((res) => {
    
    ...

, () => {

  let alert = this.alertCtrl.create({
    title: 'Login Failed',
    subTitle: 'Invalid Credentials. Please try again.',
    buttons: ['OK']
  });
  alert.present();

});

如果您还没有现有用户，则Ionic仪表板实际上不会允许您创建新用户，尽管一旦拥有至少一个用户，您就可以创建其他用户。因此，创建新用户的最简单方法是从Auth服务中调用signup()方法。只需取消注释上面的登录代码，然后将其替换为下面的代码即可。请注意，由于电子邮件/密码身份验证方案仅使用HTTP请求，因此可以从浏览器创建用户。

this.auth.signup(details).then((res) => {
    console.log('User was created!', res);
});

现在您已经拥有一个可以登录的用户，您可以继续删除注册代码并取消注释该登录代码。

在用于登录的成功回调函数内部，您需要从Push服务中调用register()方法。此关键步骤使设备能够接收推送通知。它向Ionic Push服务发出请求以获取设备令牌。如前面的“ 如何工作”部分所述，此设备令牌用作设备的唯一标识符，以便它可以接收推送通知。

this.push.register().then((t: PushToken) => {
    return this.push.saveToken(t);
}).then((t: PushToken) => {

    loader.dismiss();
    this.navCtrl.push(UserPage);

}, (err) => {

    let alert = this.alertCtrl.create({
      title: 'Push registration failed',
      subTitle: 'Something went wrong with push notifications registration. Please try again.',
      buttons: ['OK']
    });
    alert.present();

});

Ionic Push的伟大之处在于它与Ionic Auth的集成。我们在登录后立即注册设备令牌的原因是由于这种集成。调用saveToken()方法时，它足够聪明，可以识别出当前正在登录的用户。因此，它将自动将此用户分配给设备。然后，您可以专门向该用户发送推送通知。

用户页面

用户页面是接收推送通知的页面。使用Ionic generate命令创建它：

ionic g page userPage

这将创建src / pages / user-page目录，其中包含三个文件。打开user-page.html文件并添加以下内容：

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-title>User Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)='logout();'>Logout</button>
</ion-content>

为简单起见，我们所拥有的只是一个用于注销用户的按钮。此页面的主要目的是仅接收和显示推送通知。只需添加注销按钮，是因为需要注销用户并测试他们在注销后是否仍然可以接收通知。

接下来，打开user-page.ts文件并添加以下内容：

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Push, Auth } from '@ionic/cloud-angular';

@Component({
  selector: 'page-user-page',
  templateUrl: 'user-page.html',
})

export class UserPage {

  constructor(public navCtrl: NavController, public push: Push, public auth: Auth, public alertCtrl: AlertController) {

    this.push.rx.notification()
      .subscribe((msg) => {

        let alert = this.alertCtrl.create({
          title: msg.title,
          subTitle: msg.text,
          buttons: ['OK']
        });
        alert.present();

      });

  }

  logout() {
    this.auth.logout();
    this.navCtrl.pop();
  }

}

上面的代码是不言自明的，因此，我将仅介绍处理通知的部分。下面的代码处理通知。它使用subscribe()方法来订阅任何传入或打开的推送通知。当我说“打开”时，表示用户已在通知区域中轻按了通知。发生这种情况时，将启动该应用程序，并调用您传递给subscribe()方法的回调函数。另一方面，当当前打开应用程序时，会发生传入的推送通知。发送推送通知时，也会调用此回调函数。唯一的区别是它不再去通知区域。

this.push.rx.notification()
  .subscribe((msg) => {

    let alert = this.alertCtrl.create({
      title: msg.title,
      subTitle: msg.text,
      buttons: ['OK']
    });
    alert.present();

  });

对于每个通知，传递给回调函数的参数都包含对象有效负载：

在上面的代码中，我们仅使用title和text作为警报内容。但是，我们不仅限于警报-从上面的屏幕快照中可以看到，有一个payload对象，该对象存储您想要传递给每个通知的其他数据。实际上，您可以使用这些数据来指示您的应用收到此类通知时将要执行的操作。在上面的示例中， is_cat设置为1 ，如果应用程序收到此通知，我们可以将其背景更改为cat图片。稍后，在“ 发送推送通知”部分中，您将学习如何自定义每个通知的有效负载。

在设备上运行应用

现在是时候在设备上测试应用程序了。继续并添加平台并为该平台构建应用程序。在这里，我们使用的是Android：

ionic platform add android
ionic build android

将platform / android / build / outputs / apk文件夹中的.apk文件复制到您的设备并进行安装。

解决构建错误

第一次尝试运行build命令时，出现以下错误：

如果您遇到相同的错误，请继续。如果您没有遇到任何错误，则可以继续进行下一部分。

这里的问题是提到的SDK组件未安装，或者可能需要安装重要的更新。但是，该错误消息有点令人误解，因为它仅表明需要接受许可协议。

因此，要解决此问题，请启动Android SDK安装程序，然后检查Android支持存储库和Google存储库 。之后，单击“ 安装”按钮并同意许可协议以安装组件。

发送推送通知

现在，您已经在设备上安装了该应用程序，现在该实际发送一些推送通知了。您可以测试以下几种情况：

当前用户未登录时
用户登录时
给所有用户
匹配特定查询的用户
打开应用程序时
当应用关闭时

发送推送通知的第一步是转到您的Ionic应用程序仪表板，然后单击“ 推送”选项卡。由于这是您第一次使用该服务，因此您应该看到以下屏幕：

继续并单击“ 创建您的第一个按钮”。这会将您重定向到用于创建推送通知的页面。在这里，您可以输入广告系列的名称，通知的标题和文本，以及您想要传递的其他任何数据。在这里，我们将is_cat设置为1 。

接下来，您可以选择设置iOS或Android的推送通知选项。由于我们仅要发送到Android设备，因此我们仅设置Android的选项：

下一步是选择将接收通知的用户。如果要将通知发送到注册了推送通知的所有设备，则可以在此处选择“ 所有用户” 。

如果您只想发送给特定用户，则还可以过滤他们：

请注意，用户列表是从通过Auth服务注册的用户中填充的。

最后一步是选择何时发送通知。由于我们只是测试，因此可以立即发送。单击发送此按钮会将通知发送给您选择的用户。

结论和后续步骤

在本教程中，您了解了Ionic Push及其如何使推送通知更易于实现。通过Ionic仪表板，您可以自定义要发送给用户的通知。它还允许您选择要将通知发送到的用户。

如果您还没有现有的后端，这将非常有用。但是，如果您已经拥有后端，则可能会问如何在现有Web应用程序中使用Ionic Push。好吧，答案就是Ionic HTTP API 。这样，只要满足特定条件，您就可以从Web服务器向Ionic的服务器发送HTTP请求。然后，您发送的请求将触发推送通知以发送给您的用户。如果您想了解更多信息，可以查看Ionic Push Service的文档。

翻译自: https://code.tutsplus.com/tutorials/get-started-with-ionic-services-push--cms-28718

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
离子服务入门：推送

在本教程中，您将学习Ionic Push，这是一项Ionic服务，可轻松将推送通知发送给用户。 Ionic Push允许您向应用程序的用户发送推送通知。您可以随时选择触发它们。例如，在用户生日那天，您可以自动向他们发送推送通知以向他们打招呼。这个怎么运作 Ionic Push充当用户设备和Firebase Cloud Messaging之间的中间人。第一步是使应用程序将其设备令...
复制链接

扫一扫