Как получить push-уведомление, работая с Ionic 4 и Firebase

1656513514 kak poluchit push uvedomlenie rabotaya s ionic 4 i firebase

Филипп Джерга

Полное пошаговое руководство, которое поможет вам на правильном пути для iOS и Android

1*EciBTQhuzIrkzA12dfsQJQ

Настройка push-сообщений может быть действительно неприятной и занимает много времени. Поэтому я прошел все настройки и подготовил вам это руководство.

Обязательное условие

Ionic 4 уже должен быть установлен.

Навигация по разделу

  1. Установка пакета
  2. Настройка Firebase для Android и iOS
  3. Реализация кода push-сообщения
  4. Тестируйте push-сообщение на Android
  5. Предварительная настройка push-уведомлений iOS
  6. Тестируйте push-сообщение на iOS

1. Установка пакета

Откройте свой проект Ionic в редакторе кодирования по вашему выбору, а также откройте свой терминал. Выделите папку вашего проекта.

Поначалу мы установим все нужные пакеты.

Что нам нужно установить:

  • Плагин Cordova для firebase: ionic cordova plugin add cordova-plugin-firebase
  • Собственный пакет Firebase: Поскольку Ionic 4 находится в бета-версии, проверьте свои пакеты Ionic-native package.json и установите ту же версию, что и другие пакеты Ionic. Наконец, давайте введем: npm install --save @ionic-native/firebase@5.0.0-beta.14
1*4R0G8E3rY6N8xrwRYpWO8A
У меня есть версия beta.14
  • Последний пакет, AngularFire 2. Это библиотека для Angular и Firebase: npm install --save angularfire2 firebase

Установка пакетов готова! Переходим ко второму разделу.

2. Настройка Firebase для iOS и Android

Прежде чем мы приступим ко всем настройкам, я должен предупредить вас, что вы не можете проверить свои push-сообщения на эмуляторе iOS. Чтобы проверить это, вам нужно иметь аккаунт Apple Developer, который стоит около 99 долларов США в год. Я предлагаю вам все равно пройти настройки iOS, чтобы это дало вам лучшее понимание будущих проектов.

Примечание: Начать здесь очень важные шаги, поэтому наберитесь терпения. Читайте медленно и убедитесь, что все верно. Искать проблемы после настройки может быть очень неприятным, поверьте мне – я говорю по собственному опыту.

iOS

Откройте страницу Firebase и войдите на консоль. Если у вас еще не созданный проект, сделайте это сейчас. Вы должны увидеть этот экран.

1*YKEMKgcl7nukC-1QOOqmAw

Нажмите кнопку iOS, и вы увидите это:

1*yzwF8xD5qUFfy5yBWmmkZw

Теперь нам необходимо предоставить наш идентификатор пакета iOS, и он должен быть таким же, как в вашем проекте Ionic. Скажем, я хочу назвать пакет com.filipjerga.angularcourseто мне нужно сделать следующее:

Откройте проекты Ionic и перейдите к файлу «config.xml». Давайте проверим элемент виджета. The id атрибут содержит уникальный идентификатор вашего приложения. Я уже говорил раньше, если вы указали название своего пакета com.filipjerga.angularcourse в Firebase, id в вашем Ionic проекте должно быть так же! Вы также можете оставить id поскольку он уже есть в вашем проекте Ionic, но затем вам нужно изменить его в Firebase.

1*nKaEn3rqKjQQSK5DbOTx1Q
Идентификатор элемента виджета – это то, что нам нужно указать в Firebase

После того как вы получите значение идентификатор, не забудьте предоставить его Firebase в качестве идентификатора пакета.

1*80_WthW7_5CQbd5Dcg6BvA
Идентификатор пакета должен совпадать с идентификатором вашего виджета

Это должно быть все на первом шаге регистрации программы. Этот шаг является решающим, поэтому дважды проверьте значение id на идентификатор виджета и пакета вашего приложения Firebase.

Оставьте другие поля пустыми и нажмите кнопку «Зарегистрировать приложение».

Теперь нам нужно скачать «GoogleService-Info.plist».

1*OdG0hBlzpiMMvYT7w6gPxg

Когда он будет загружен, вставьте его в базовую папку ваших проектов. Вы можете увидеть структуру папок в моем проекте здесь.

Мы можем пропустить все дальнейшие шаги, поскольку они не требуются для настройки проекта Ionic. У вас должна быть готовая программа для iOS.

1*HVdgpvS2Rv2a1dfuNDPgtw
Пропустите этот шаг

Android

Следующие шаги для Android почти такие же, как и для настройки iOS:

  • Нажмите «Добавить приложение» для Android, как мы делали в iOS раньше.
  • В моем случае название пакета Android должно совпадать с идентификатором нашего виджета: com.filipjerga.angularcourse
  • Далее загрузите google-services.json. По-прежнему с файлом iOS нам нужно скопировать его в базовую папку наших программ
  • Нажмите «Далее», пока не перейдете к последнему шагу, который вы можете пропустить, и, в конечном счете, вы должны создать обе программы.

Ура! Поздравляю! Но радоваться еще рано.

1*QN0VI93SeNd5aJ1-yDHJSg
Созданы как программы iOS, так и Angular.

3. Реализация кода push-сообщения

Импорт пакетов

Пора наконец разогреть пальцы, набрав код. Мы начнем с импорта пакетов, которые мы установили раньше.

  1. Идти в app.module.ts
  2. Ваш файл должен выглядеть так:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { Firebase } from '@ionic-native/firebase/ngx';

const config = {
    apiKey: "AIzaSyD-K6SlFECXKmd8iHwEvggVtavKgyPF2k8",
    authDomain: "angular2-course-9270e.firebaseapp.com",
    databaseURL: "
    projectId: "angular2-course-9270e",
    storageBucket: "angular2-course-9270e.appspot.com",
    messagingSenderId: "443316848633"
  };

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule],
  providers: [
    StatusBar,
    SplashScreen,
    Firebase,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
app.module.ts

Ты можешь видеть Firebase в массиве провайдеров и AngularFirestoreModule и AngularFireModule в импорте

Но откуда взялся config объект пришел из ? Вы можете увидеть много информации там как «apiKey, authDomain» и т.д.

Чтобы ответить на это, нам нужно вернуться к нашей консоли Firebase и создать файл веб-приложение.

1*js9Izqbu8Bceb2kIZSDzRg
Выберите веб-платформу

Нажмите значок веб-платформы справа от значка Android (см. изображение выше). После выбора веб-приложения вам будет представлено собственно конфиг объект.

1*5a3ry984v5Mer9Ob63axZQ
Мой объект конфигурации Firebase после выбора веб-приложения.

Теперь пора скопировать полностью конфиг возражать против app.module.ts в наших ионных проектах. пожалуста убедиться вы изменяете его для своего объекта конфигурации! Мой тебе не подойдет.

1*Gkp_0kiAs4f_t3UL_hUNVw
Предоставьте конфигурацию app.module.ts

Теперь мы можем начать работу по внедрению сервиса push-сообщений.

Служба push-сообщений

Давайте создадим новый сервис. Назовите это, как вам нравится. Я позвоню своим fcm.service.ts. FCM расшифровывается как Firebase Cloud Messaging.

Поначалу давайте посмотрим на реализацию сервиса. Я объясню это строчку за строчкой.

import { Injectable } from '@angular/core';
import { Firebase } from '@ionic-native/firebase/ngx';
import { Platform } from '@ionic/angular';
import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()
export class FcmService {

  constructor(private firebase: Firebase,
              private afs: AngularFirestore,
              private platform: Platform) {}

  async getToken() {
    let token;

    if (this.platform.is('android')) {
      token = await this.firebase.getToken();
    }

    if (this.platform.is('ios')) {
      token = await this.firebase.getToken();
      await this.firebase.grantPermission();
    }

    this.saveToken(token);
  }

  private saveToken(token) {
    if (!token) return;

    const devicesRef = this.afs.collection('devices');

    const data = {
      token,
      userId: 'testUserId'
    };

    return devicesRef.doc(token).set(data);
  }

  onNotifications() {
    return this.firebase.onNotificationOpen();
  }
}
fcm.service.ts

Если мы хотим отправить push-уведомление на устройство, нам необходимо получить уникальный идентификатор устройства. В этом случае это называется а token.

Нам нужно проверить устройство для определенной платформы через дополнительный шаг в настройке iOS. iOS требует четких разрешений для получения push-уведомлений.

Теперь нам нужно где хранить этот маркер, но где? Мы будем хранить токены в База данных Firebase. Вы видите, я творю устройство коллекции, и я их пополняю data содержащий token и просто тестирование UserId. Идеально! Теперь мы сохранили наш токен и можем подписаться на уведомления.

Подписаться на оповещение действительно очень просто. Нам просто нужно позвонить this.firebase.onNotificationOpen()

Удивительный. Сервис проверен!

Все это приятно, но бесполезно, поскольку мы еще не пользуемся нашим сервисом. Исправим это!

Перейдите к своему app.component.ts и напишите следующее:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { FcmService } from './shared/service/fcm.service';
import { ToastService } from './shared/service/toast.service';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FcmService,
    private toastr: ToastService,
    public toastController: ToastController

  ) {
    this.initializeApp();
  }

  private async presentToast(message) {
    const toast = await this.toastController.create({
      message,
      duration: 3000
    });
    toast.present();
  }

  private notificationSetup() {
    this.fcm.getToken();
    this.fcm.onNotifications().subscribe(
      (msg) => {
        if (this.platform.is('ios')) {
          this.presentToast(msg.aps.alert);
        } else {
          this.presentToast(msg.body);
        }
      });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.notificationSetup();
    });
  }
}
app.component.ts

Особенно важна здесь функция notificationSetup.

Сначала мы получаем уникальный токен устройства.

Мы также подписываемся на входящие уведомления от Firebase.

Когда сообщение получено, нам нужно снова проверить определенные платформы. На iOS текст вашего сообщения находится под aps.alert . На Android это под body.

Тогда мы просто отразим полученное сообщение как a Toast.

Теперь настройка кода завершена. Мы подходим очень близко! Пора проверить это.

4. Проверьте push-сообщение на Android

Все необходимые настройки для Android следует выполнить прямо сейчас. Вы можете начать эмуляцию своего приложения:

ionic cordova emulate android

или

ionic cordova build android и откройте свой сборник вручную в Android Studio.

Давайте запустим наши программы и перейдем в главное меню, чтобы мы увидели там push-уведомление. Убедитесь, что программа была правильно запущена в эмуляторе и у вас нет ошибок.

Вернитесь к своим браузерам в свои приложения Firebase. Теперь пора проверить нашу базу данных Firebase. Вы можете найти параметр базы данных на левой панели под Развивать категория.

1*ev05fxLy5yySp_Xa-uA4JQ
База данных Firebase

После запуска программы в эмуляторах код из app.component.ts мы писали несколько минут назад, бег. Неудивительно, что наша база данных заполнена. В функции saveToken мы указали коллекцию devices и сохранили маркер с идентификатором пользователя как документ в этой коллекции устройств. Это то, что мы видим в нашей базе данных.

В моем случае у меня есть несколько маркеров в моей базе данных, но у вас должен быть только один, поскольку мы запустили нашу программу впервые. Вы создаете новый документ для каждого уникального устройства/эмулятора, на котором запускаете свою программу.

Теперь пора скопировать этот маркер, чтобы отправить push-уведомление на определенное устройство.

1*tGtpXyvp46jGuGr9SzsBTg
Коллекция базы данных Firebase, вы увидите только один документ

Перейдите на левую панель к вкладке роста и нажмите на облачные сообщения.

1*_oO9cu4Gw3IAXbvGuWeWOQ
Нажмите на Облачные сообщения

Теперь нам нужно заполнить требуемые данные. Введите текст своего сообщения и передайте маркер устройства из базы данных, которую мы только что скопировали.

1*vdXEcVntcKkfqr8ll49r6Q

При отправке сообщения одновременно откройте эмульированное устройство и посмотрите, что происходит.

Отправьте сообщение, аааа, и поздравляем! Теперь ваша настройка Android завершена, и вы можете отправлять push-уведомления! Разве это не потрясающе?

1*HwQKVZAHeF6Tb1QZV46Zzw
Push-уведомления на Android.

5. Предварительная настройка push-сообщения iOS

Пристегивайтесь, ребята, наступает настройка iOS. Давайте разделим эту настройку на несколько шагов, чтобы у нас не было панической атаки. Давайте копаться!

Сначала, создайте свое приложение для iOS: ionic cordova build ios

Откройте свой Xcode и найдите встроенное приложение platforms/ios/nameofyourapp.xcodeproj . Открой это.

1*2J27mF3dE36yro4TDuDbZA
Откройте свой .xcodeproj

Это должно открыть древовидную структуру программы с левой стороны. Дважды щелкните корневой файл этой структуры. Это откроет дополнительное меню с дополнительными настройками для программы.

1*CwCbrVvqy_lYJhOHahe5qQ
Больше настроек

Войдите в свой аккаунт разработчика.

1*AD1U9EEfHRozZHoUn3d5Ng
Войдите с помощью учетной записи разработчика

5. Откройте вкладку «Возможности» и включите «Push-сообщение».

1*4lOdzB6p9BWGiVkYuC1G1w
Включить Push-сообщение

6. Перейдите на страницу аккаунта разработчика Apple. В разделе «Сертификаты» выберите «Все» и нажмите «+" к добавить новый сертификат.

1*M_sJ-0Y6UcfCSXvZexoh9g
Нажмите на знак плюс.

Включите службу Apple Push Notification и перейдите к следующему шагу.

1*sUsADfJUdEJcyi2xblFjwg

Теперь давайте выберем ваше приложение.

1*nXick1xCKeQt8Xrv5LSdvw

Нам надо спросить сертификат. На вашем Mac перейдите к «Доступ к брелоку» -> «Помощник по сертификатам» -> «Запрос на сертификат от центра сертификации».

1*rhTf5N0TL1AmKoXcWbhfoQ

Заполните всю необходимую информацию — ваш адрес электронной почты и общее имя — и сохраните ее на диске.

1*ytVFGho1inBYnv2pYYLLbA

В консоли Apple перейдите к следующему шагу и скачать ваш запрос на сертификат.

1*Qlz9edFubew4V3ozdt2X7A

На следующем шаге нужно создать сертификат, и вы сможете загрузить его. Он вам понадобится позже.

1*n5YZm8E6QYxNCDb9Ns7tyQ

Теперь нам нужно создать сервисный ключ чтобы включить push-сообщение Apple. В разделе «Ключи» выберите «Все». Выберите имя ключа. Включите службу push-сообщений Apple (APN).

1*8lXVFTpEjwrApP2FArRaew

Нажмите кнопку «Продолжить» и подтвердите ключ. Никогда не делитесь с другими данными. Теперь вы можете загрузить ключ.

1*S_gRFhnecm29gSTASWpfiA

Теперь нам нужно вернуться в Firebase.

В Firebase откройте приложение iOS и перейдите к «Обмен сообщениями в облаке».

1*10JoxYxq7LPUNv_magHS9A

Нам надо скачать наш ключ аутентификации APN, который мы создали некоторое время назад. Нажмите кнопку «Загрузить».

1*jZtNNpy7gTjsv4tjZfsy9A

Предоставьте всю информацию и загрузите ключ.

Сначала загрузите файл «.p8», загруженный из консоли Apple ранее. Введите идентификатор ключа. Вы можете получить префикс идентификатора программы из консоли Apple в «Идентификаторы»->«Идентификаторы приложений»->«Ваша программа»->«Префикс».

1*TKeh5ZvgKRN6MXZvw7e0qw
1*l7g5BPKU9GvG0c9RJFWTUA
Загрузите файл p8 и получите ключ ID и префикс ID

Это оно. По лицу текут слезы радости.

Мы можем протестировать Push-сообщение на iOS. Не забывайте, что нам нужно использовать настоящее устройство.

6. Проверьте push-сообщение на iOS

Сначала нам нужно создать наши программы, поэтому давайте запустим: ionic cordova build ios

В Xcode вы можете запустить свое приложение на устройстве, подключенном через USB к компьютеру.

1*f4NOHT2xCJPgd2SXCXl-EA
Выберите устройство

Подождем, пока все запустится. Теперь мы можем повторить шаги для отправки push-сообщений Глава 4, потому что это тоже самое, что и на Android.

Помните, что вам нужно использовать новый маркер теперь это было создано для устройства iOS. Перейдите к Базе данных, получите новый маркер и отправьте push-уведомление. Ваш результат должен выглядеть следующим образом.

1*ZOE5hMQpOWxUIfE9zjDyfg
1*zBEkbPOB6EEurPt5j3qzrw

Надеюсь, вам удалось настроить свои push-сообщения. Чтобы все сделать правильно, нужно некоторое время и терпение, но результат и преимущества поражают.

Если вам нравится мой учебник и вас интересует больше, вы можете просмотреть мой курс на Udemy: Ускоренный курс Ionic 4 по API Heartstone и Angular.

Полный проект см. в моем Github Repo.

Счастливого кодирования!

Филипп

Добавить комментарий

Ваш адрес email не будет опубликован.