3

How do I add my Web API key for Google Firebase? in my ionic app for web platform**

explanation -: 1. I am working on ionic App where I am trying to integrate it with PUSH (https://ionicframework.com/docs/native/push/) using firebase

  1. I have followed all the steps from https://ionicframework.com/docs/native/push/

  2. Problem: Push notification is not working for web platform for ios and android it is working .

I am putting the code below :

ts file -:

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

    constructor(private push: Push) { }

          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 { Push } from '@ionic-native/push';


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

import firebase from 'firebase';

export const firebaseConfig = {
  apiKey: "###############################",
  authDomain: "premier11-109eb.firebaseapp.com",
  databaseURL: "https://premier11-109eb.firebaseio.com",
  projectId: "premier11-109eb",
  storageBucket: "premier11-109eb.appspot.com",
  messagingSenderId: "########" 
}
firebase.initializeApp(firebaseConfig);

@NgModule({
  declarations: [
    MyApp,
   // ContentDrawer
    // HomePage
  ],
  imports: [
    HttpClientModule,
    FormsModule,
    MbscModule,
    BrowserModule,

    AboutusPageModule,
    AllcontestPageModule,
    CaptainselectionPageModule,
    CashcontestPageModule,
    CreateteamPageModule,
    ContestsPageModule,
    FairplayPageModule,
    HelpdeskPageModule,
    HomePageModule,
    JoinedpagePageModule,
    LegalityPageModule,
    LoginmobilePageModule,
    LoginwebPageModule,
    MatchcenterPageModule,
    NotificationPageModule,
    OtpverificationloginPageModule,
    PayPageModule,
    PaymentPageModule,
    PaymentgatewayPageModule,
    PlayerdetailsPageModule,
    PrivacypolicyPageModule,
    ProfilePageModule,
    SignupPageModule,
    TabsPageModule,
    TeamselectionPageModule,
    ViewteamPageModule,
    ErrorPageModule,
    FeedbackformPageModule,

    HttpModule,

    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    AngularFireAuthModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    SharedsecondProvider,
    EmailComposer,
    SocialSharing,
    P11dataProvider,Push,GooglePlus,Facebook,Network,AndroidPermissions,
  ],
})
export class AppModule {}
Anurag Ranjan
  • 105
  • 13
  • are you running application by ionic serve right? – Khurshid Ansari Dec 09 '18 at 11:31
  • yes I am running application by ionic serve – Anurag Ranjan Dec 09 '18 at 18:53
  • it will not work with ionic serve. you have to run in device or try "ionic platform add browser" - ionic cordova run browser, because @ionic-native/push support browser platform so hopefully it will work. – Khurshid Ansari Dec 10 '18 at 05:08
  • @KhurshidAnsari I am adding some code of how I get the token and getting notifications: FCM.TS – Anurag Ranjan Dec 10 '18 at 05:21
  • You can run in device and log token in console. because i am doing same for sending push notification for android and ios. you can send notification to that device only. – Khurshid Ansari Dec 10 '18 at 05:23
  • @KhurshidAnsari for ios and Android push notification is working , but for web platform it is not working . you can see that ionic only provide plugin for getting fcm in ios and Android https://ionicframework.com/docs/native/fcm/ . so what is the other way of getting fcm for web – Anurag Ranjan Dec 10 '18 at 05:28
  • you are changing plugin https://ionicframework.com/docs/native/push/ to https://ionicframework.com/docs/native/fcm/. previouse plugin support browser platform – Khurshid Ansari Dec 10 '18 at 05:37
  • Hi, I'm facing the same issue with ionic browser platform. For android it is working fine, but for browser it gives me and error that states `Error: Error subscribing for Push notifications.`. I build for browser and then run it in localhost. **Version Details:** Ionic: ionic (Ionic CLI) : 4.0.5 (/usr/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.5 @ionic/app-scripts : 3.2.2 Cordova: cordova (Cordova CLI) : 8.0.0 Cordova Platforms : android 6.3.0, browser 5.0.4 – TheCleverIdiot Dec 11 '19 at 10:03

0 Answers0