Set up “firebase javascript” to use with “ionic serve”

Question

I want to use Firebase Javascript, in an Ionic 2 project so I can develop the Push Notification logic that I want to apply, and test it in a browser, by using the CLI "ionic serve".

I've followed the step as explain in the doc under node.js / ES2015:

I did a CLI "npm install --save firebase" to add it to my project.

And then at the top of one of my project service I did:

import [regular Ionic 2 and Angular 2 import stuffs];

import * as firebase from 'firebase';
@Injectable()
export class PushNotifService {

  constructor(private platform:Platform){
    console.log("PushNotifService starts");
    console.info(this.platform);
   console.info(firebase);
  }


}

I ran into the problem described in that SO thread.

I've tried then a different approach, by importing the file "https://www.gstatic.com/firebasejs/3.6.10/firebase.js", then I added it to [my project]/src/assets/js/firebase.js.

In [my project]/src/index.html i added:

<body> 
  <ion-app></ion-app> 
  <script src="assets/js/firebase.js"></script>
</body>

And in my service:

import [regular Ionic 2 and Angular 2 import stuffs];

declare var firebase: any;
@Injectable()
export class PushNotifService {

  constructor(private platform:Platform){
    console.log("PushNotifService starts");
    console.info(this.platform);
   console.info(firebase);
  }


}

It does not work, it seems that the <script src="assets/js/firebase.js"></script> [my project]/src/index.html is not taken into account (it is not there when looking at the DOM with the Chrome console).

Any idea how to import the "https://www.gstatic.com/firebasejs/3.6.10/firebase.js" file without usin "npm install"?

nyluje nyluje · Accepted Answer · 2017-03-06T14:09:01

SOME UPDATES:

In the ionic 2 project there is [my project]/src/index.html and [my project]/www/index.html. I was editing [my project]/src/index.html and changes after "bundles update" while "ionic serve" runs in command prompt did not apply on [my project]/www/index.html.

Now I've updated [my project]/www/index.html with:

<body> 
  <ion-app></ion-app> 
  <script src="assets/js/firebase.js"></script> 
 //or   <script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>)

</body>

And it does work with service:

   import [regular Ionic 2 and Angular 2 import stuffs];

    declare var firebase: any;
    @Injectable()
    export class PushNotifService {

      constructor(private platform:Platform){
        console.log("PushNotifService starts");
        console.info(this.platform);
       console.info(firebase);
      }


    }

Afterwards I had to apply what is explained here:

I created a "firebase-messaging-sw.js" empty file in "[my project]/www/".

And finally, as it is explained here, "[my project]/www/firebase-messaging-sw.js" must contain:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR SENDER ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

NB: I've detailed the steps that had caused me troubles thru the implementation, beside that getToken() or onMessage() from firebase.messaging.Messaging managed to work in my PushNotifService class once those other things around were in place. I didn't detail the server side (PHP script to send messages or Firebase project settings).

Set up “firebase javascript” to use with “ionic serve”

1 Answers