firebase messaging error

[piuskamil]

Version info
Angular:6.0.1

Firebase:5.0.3

AngularFire:5.0.0-rc.10

iOS safari

Problem:
when this error persist app crash and i can see only white screen

"{
  "code": "messaging/unsupported-browser",
  "message": "Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).",
  "name": "FirebaseError"
}"

It works well on AngularFIre 5.0.0.rc6 and firebase 4.12.1

app.component.ts

this.msgService.getPermission();
this.msgService.receiveMessage();
this.msgService.refreshToken();

this.msgService.currentMessage.subscribe(d => {
      console.log(d);
    });`

service
`
import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
import { BehaviorSubject, of } from 'rxjs';
import { Action, AngularFirestore } from 'angularfire2/firestore';
import { AngularFireAuth } from 'angularfire2/auth';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { filter, switchMap, take } from 'rxjs/operators';

@Injectable()
export class MessagingService {
  private messaging: firebase.messaging.Messaging = firebase.messaging();
  public currentMessage: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor( private modalService: ModalService, private db: AngularFirestore, private afAuth: AngularFireAuth, private http: HttpClient ) {
  }

  public updateToken( token: string ): void {
    const addToken = ( actions: Action<firebase.firestore.DocumentSnapshot>, currentTokens: string[] ) => {
      actions.payload.ref
        .set({
          token: currentTokens,
        })
        .then(() => {
        });
    };

    this.afAuth.authState
      .pipe(
        switchMap(user => {
          if (!user) {
            return of(null);
          }
          return this.db
            .collection('fcmTokens/')
            .doc(user.uid)
            .snapshotChanges();
        }),
        filter(( action: Action<firebase.firestore.DocumentSnapshot> ) => !!action)
      )

      .subscribe(( actions: Action<firebase.firestore.DocumentSnapshot> ) => {
        if (!actions.payload.data()) {
          addToken(actions, [ token ]);
          return;
        }
        const currentTokens: string[] = actions.payload.data().token;
        const index: number = currentTokens.findIndex(( currentToken: string ) => currentToken === token);
        if (index === -1) {
          currentTokens.push(token);
          addToken(actions, currentTokens);
        }

      });
  }

  public refreshToken(): void {
    this.messaging.onTokenRefresh(() => {
      this.messaging.getToken().then(( refreshedToken: string ) => {
        console.log('refreshedToken: ', refreshedToken);
        this.updateToken(refreshedToken);
      });
    });
  }

  public getPermission(): void {
    if ('Notification' in window && Notification[ 'permission' ] === 'default') {
      this.showPermission();
    } else if ('Notification' in window && Notification[ 'permission' ] === 'granted') {
      this.showPermission();
    }

  }

  private showPermission(): void {
    this.messaging
      .requestPermission()
      .then(() => {
        console.log('Notification permission granted.');
        return this.messaging.getToken();
      })
      .then(( token: string ) => {
        this.updateToken(token);
      })
      .catch(err => {
        console.log('Unable to get permission to notify.', err);
      });
  }

  public receiveMessage(): void {
    this.messaging.onMessage(payload => {
      console.log('Message received. ', payload);
      this.currentMessage.next(payload);
    });
  }
}

[jamesdaniels]

Safari is not supported by FCM, you'll need to catch the error.

[piuskamil]

yea sure. but how? my console says this error is from polyffils.js.
i can't see opportunity to catch this error. Its strange why its works with previous versions

[jamesdaniels]

You'll need either a try/catch around the offending line in your code, a promise catch, or an observable catchError; if you can't find it I'd suggest posting to StackOverflow with a bit more detail in your stack trace.

[agil-NUBBA]

Had your same problem, my whole Angular app broken due to this.

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

import * as firebase from 'firebase/app'
import 'firebase/messaging';
import { BehaviorSubject } from 'rxjs';

import { ApiService } from './api.service';
import { AppApiResponse } from '../interfaces/interfaces'

import { environment } from 'environments/environment';

@Injectable()
export class MessagingService {

  public messaging;
  public messages = new BehaviorSubject(null);

  private permission: boolean = false;

  constructor(private api: ApiService) {
    try {
      this.messaging = firebase.messaging();
    } catch (e) {
      console.log('Unable to Instantiate Firebase Messaing', e);
    }
  }

  public init() {

    this.getPermission();

    try {
      this.messaging.onMessage((payload) => {

        if (!environment.production) console.log('PUSH: ', payload);

        // [...]
      });
    } catch (e) {
      console.log('Unable to Listen PUSH Messages', e);
    }
  }

  // [...]

  private getPermission() {
    try {
      this.messaging.requestPermission()
      .then(() => {
        this.permission = true;
        return this.messaging.getToken();
      })
      .then(token => this.updateToken(token))
      .catch((err) => console.log('Unable to get permission to notify.', err));
    } catch (e) {
      console.log('Unable to Request PUSH Permission', e);
    }
  }
}

in my case, in safari, the key line was:

this.messaging = firebase.messaging();

MS Edge prints the error, but surprisingly doesn't stop the app.

[gfaganli]

what is the alternative way for sending notifications in safari? can we use APNs with FCM ? or other solutions that not related to FCM

[aminalali8]

Any update on this ?

[suparnavg]

@jamesdaniels is there an official "angularfire2" way to catch the Safari error or is @agil-NUBBA 's answer the only way of doing this? Asking because that answer necessitates importing the entire firebase library which is not recommended in a production environment...

[jamesdaniels]

@suparnavg the RXJS catchError pipe should be sufficient, no?

[tranvicuongit]

Had your same problem, my whole Angular app broken due to this.

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

import * as firebase from 'firebase/app'
import 'firebase/messaging';
import { BehaviorSubject } from 'rxjs';

import { ApiService } from './api.service';
import { AppApiResponse } from '../interfaces/interfaces'

import { environment } from 'environments/environment';

@Injectable()
export class MessagingService {

  public messaging;
  public messages = new BehaviorSubject(null);

  private permission: boolean = false;

  constructor(private api: ApiService) {
    try {
      this.messaging = firebase.messaging();
    } catch (e) {
      console.log('Unable to Instantiate Firebase Messaing', e);
    }
  }

  public init() {

    this.getPermission();

    try {
      this.messaging.onMessage((payload) => {

        if (!environment.production) console.log('PUSH: ', payload);

        // [...]
      });
    } catch (e) {
      console.log('Unable to Listen PUSH Messages', e);
    }
  }

  // [...]

  private getPermission() {
    try {
      this.messaging.requestPermission()
      .then(() => {
        this.permission = true;
        return this.messaging.getToken();
      })
      .then(token => this.updateToken(token))
      .catch((err) => console.log('Unable to get permission to notify.', err));
    } catch (e) {
      console.log('Unable to Request PUSH Permission', e);
    }
  }
}

in my case, in safari, the key line was:

this.messaging = firebase.messaging();

MS Edge prints the error, but surprisingly doesn't stop the app.

thanks agil for solution !!!

[mirupal]

here is an example how to handle the error with RXJS' catchError like @jamesdaniels suggested

Example code for taken from: https://github.com/angular/angularfire2/blob/master/docs/messaging/messaging.md
(see "Requesting permission" there)

With the following code I had an error in Safari

this.afMessaging.requestPermission
  .subscribe(
    () => { console.log('Permission granted!'); },
    (error) => { console.error(error); },  
  );

Catching the error with RXJS suppressed the error and enabled me use alternate logic for safari browsers.

this.afMessaging.requestPermission
  .pipe(
    catchError((err) => {
      
      // you may add here your alternate logic for safari ..

      return of(false);
    })
  )
  .subscribe(
    () => { console.log('Permission granted!'); },
    (error) => { console.error(error); },  
  );