Столкнувшись с проблемой интеграции push-уведомлений в приложение ionic 3 для веб-платформы

Question

Я работаю в приложении ionic 3, где -:

объяснение -: 1. Я работаю над приложением ionic, в котором я пытаюсь интегрировать PUSH-уведомление в майское приложение с использованием firebase

Iвыполнили все шаги из https://ionicframework.com/docs/native/push/

Проблема: Push-уведомление не работает для веб-платформы для iOS и Android, оно работает.

**

Пожалуйста, смотрите: может быть, я неправильно ввожу fcm, так как ионный fcm не поддерживается для веб-сайтов.

**

Я помещаю код ниже:

ts file -:

import { Push, PushOptions , PushObject } from '@ionic-native/push/ngx';


export class MyApp {
  rootPage:any = TabsPage;
  fcmId: any;

  constructor(   private storage: Storage , private alertCtrl: AlertController , private push: Push  , public navCtrl: NavController  , platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }



  initPushNotification() {
    // to check if we have permission
    this.push.hasPermission().then((res: any) => {
      if (res.isEnabled) {
        console.log('We have permission to send push notifications');
      } else {
        console.log("We don't have permission to send push notifications");
      }
    });

    // to initialize push notifications
    const options: PushOptions = {
      android: {
        senderID: '839584699716',
      },
      ios: {
        alert: 'true',
        badge: true,
        sound: 'false',
      },
      windows: {},
      browser: {
        pushServiceURL: 'http://push.api.phonegap.com/v1/push',
      },
     };

const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((notification: any) => {
console.log('Received a notification', notification);
//Notification Display Section
let confirmAlert = this.alertCtrl.create({
title: 'New Notification',
message: JSON.stringify(notification),
buttons: [
  {
    text: 'Ignore',
    role: 'cancel',
  },
  {
    text: 'View',
    handler: () => {
      //TODO: Your logic here
      //self.nav.push(DetailsPage, {message: data.message});
    },
  },
],
});
confirmAlert.present();
//
});
pushObject.on('registration').subscribe((registration: any) => {
console.log('Device registered', registration);
this.fcmId = registration.registrationId;
console.log(this.fcmId);
this.storage.set('fcmId', this.fcmId);
});

pushObject.on('error').subscribe(error => console.error('Error with Push plugin.....', error));
}

}

app.module.ts

import { AngularFireModule } from 'angularfire2';
import firebase from 'firebase';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireAuthModule } from 'angularfire2/auth'

import { Push } from '@ionic-native/push/ngx';
export const firebaseConfig = {
  apiKey: "AIzaSyBrU5I4_hK-M4Ai3#############",
  authDomain: "primeval-wind-230006.firebaseapp.com",
  databaseURL: "https://primeval-wind-230006.firebaseio.com",
  projectId: "primeval-wind-230006",
  storageBucket: "primeval-wind-230006.appspot.com",
  messagingSenderId: "##########"
}
firebase.initializeApp(firebaseConfig)

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    SecondtryPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    IonicStorageModule.forRoot()

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    SecondtryPage
  ],
  providers: [
    StatusBar,Push,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    GooglePlus
  ]
})
export class AppModule {}

Answer 1

Я поделюсь здесь тем, что работает для одного из моих приложений (Ionic 3, Angular 5.2.3):

В своем сервисном работнике добавьте следующий код:

// FIREBASE:
importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase-messaging.js');

// firebase messaging part:
firebase.initializeApp({
    // get this from Firebase console, Cloud messaging section
    'messagingSenderId':'YOURIDHERE'
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler((payload) => {
    console.log('Received background message ', payload);
    // here you can override some options describing what's in the message;
    // however, the actual content will come from the Webtask
    const notificationOptions = {
        icon: '/assets/img/mstile-150x150.png'
    };
    return self.registration.showNotification(notificationTitle, notificationOptions);
});

Затем вВаши модули app.module.ts для импорта и обмена сообщениями:

import { AngularFireModule } from '@angular/fire';
import { AngularFireMessagingModule } from '@angular/fire/messaging';

убедитесь, что вы также добавили модули в раздел импорта @NgModule:

AngularFireModule.initializeApp(ENV.FIREBASE_CONFIG),
AngularFireMessagingModule,

Над конфигурацией ENV содержитсяваши конфиги fcm:

FIREBASE_CONFIG: {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: ""
    },

Теперь ваш провайдер сообщений:

import { AngularFireMessaging } from '@angular/fire/messaging';
...
constructor(
    private firebaseMessaging: AngularFireMessaging,
) {}
...

initFCMforPWA() {
    navigator.serviceWorker.getRegistration().then((registration)=>{
        this.firebaseMessaging.messaging.subscribe(
          (messaging) => {
            // we use this trick here to access useServiceWorker method:
            messaging.useServiceWorker(registration);

            // small workaround below (as I use ANGULAR FIRE 5.0.0):
            messaging.onTokenRefresh = messaging.onTokenRefresh.bind(messaging);
            // small work around above

            this.enableNotifications();
            // set flag that messaging was init:
            this.appHasFCMInitDone = true;
            messaging.onMessage((message)=>{
              console.log(message);
              this.toaster.presentSimpleToast(message.notification.title, "top");
            });
          },
          (error)=>{ console.log("failed to subscribe to firebase messaging")}
        );
      });
}

enableNotifications() {
    console.log("Requesting permission and token...");
    this.firebaseMessaging.requestToken.subscribe((token) => {
        console.log("Permission and token granted");
        this.fcmPermissionGranted = true;
        // send token to our server and set this for current user:
        this.setFCMToken(token).subscribe(
          () => { this.pushToken = token; console.log("token was set on server side") },
          (error) => {this.handleError(error)}
        )
      }, (error)=>{
        this.fcmPermissionGranted = false;
        console.log(error);
      });
  };

disableNotifications() {
    return new Promise((resolve, reject) =>{
      this.revokeFCMToken().subscribe(() => {
        this.pushToken = null;
        this.userID = null;
        this.userData = null;
        console.log("removed notification token from morphistic server");
          this.firebaseMessaging.getToken.pipe(mergeMap(token => this.firebaseMessaging.deleteToken(token))).subscribe(() => {
              console.log('deleted notification token from firebase');
              resolve();
            }
          );
        }
      );
    })
  };

Обратите внимание, что вам нужно иметь свои собственные методы бэкэнда для установки и отзыва токенов.

ThisКонфигурация работает на Ionic 3 / Angular 5.2.3 с AngularFire 5.0.0