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

1656513514 kak poluchit push uvedomlenie rabotaya s ionic 4 i firebase

Содержание статьи

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

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

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

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

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

Установка пакета
Настройка Firebase для Android и iOS
Реализация кода push-сообщения
Тестируйте push-сообщение на Android
Предварительная настройка push-уведомлений iOS
Тестируйте 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 и войдите на консоль. Если у вас еще не созданный проект, сделайте это сейчас. Вы должны увидеть этот экран.

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

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

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

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

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

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

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

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

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

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

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

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

Android

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

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

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

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

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

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

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

Идти в app.module.ts
Ваш файл должен выглядеть так:

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 — Нажмите на Облачные сообщения

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

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

Отправьте сообщение, аааа, и поздравляем! Теперь ваша настройка 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 и перейдите к следующему шагу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Филипп