设置“firebase javascript”以与“ionic serve”一起使用答案

【问题标题】：Set up "firebase javascript" to use with "ionic serve"设置“firebase javascript”以与“ionic serve”一起使用
【发布时间】：2017-07-26 08:48:40
【问题描述】：

我想在 Ionic 2 项目中使用Firebase Javascript，以便我可以开发我想要应用的推送通知逻辑，并对其进行测试在浏览器中，使用CLI“ionic serve”。

我已按照 node.js / ES2015 下 doc 中的说明进行操作：

我使用 CLI “npm install --save firebase” 将其添加到我的项目中。

然后在我的一个项目服务的顶部，我做了：

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);
  }


}

我遇到了SO thread 中描述的问题。

我尝试了另一种方法，通过导入文件“https://www.gstatic.com/firebasejs/3.6.10/firebase.js”，然后将其添加到 [我的项目]/src/assets/js/firebase.js。

在 [我的项目]/src/index.html 我添加了：

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

在我的服务中：

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);
  }


}

不起作用，似乎没有考虑<script src="assets/js/firebase.js"></script> [我的项目]/src/index.html（用Chrome控制台查看DOM时不存在）。

知道如何在不使用“npm install”的情况下导入“https://www.gstatic.com/firebasejs/3.6.10/firebase.js”文件吗？

【问题讨论】：

标签： node.js cordova firebase ionic2 firebase-cloud-messaging

【解决方案1】：

一些更新：

在 ionic 2 项目中有 [my project]/src/index.html 和 [my project]/www/index.html。我正在编辑 [my project]/src/index.html 并在“bundles update”后更改，而“ionic serve”在命令提示符下运行不适用于 [my project]/www/index.html.

现在我已将 [我的项目]/www/index.html 更新为：

<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>

它确实适用于服务：

   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);
      }


    }

之后我不得不应用 here 解释的内容：

我在“[我的项目]/www/”中创建了一个“firebase-messaging-sw.js”空文件。

最后，正如 here 所解释的，“[我的项目]/www/firebase-messaging-sw.js”必须包含：

// 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：除了 getToken() 或 onMessage() 从 firebase.messaging.Messaging 设法在我的PushNotifService 课堂上工作，一旦周围的其他东西到位。我没有详细说明服务器端（发送消息的 PHP 脚本或 Firebase 项目设置）。

【讨论】：