Question

我想在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”，然后我将其添加到[my project] /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”文件吗？

Answer 1

一些更新：

在离子2项目中有[我的项目] / src /index.html和[我的项目] / www /index.html。我正在编辑[我的项目] / src /index.html并在＆＃34;捆绑更新后更改＆＃34;而＆＃34;离子服务＆＃34;在命令提示符下运行不适用于[我的项目] / 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解释的内容：

我创建了一个＆＃34; firebase-messaging-sw.js＆＃34;空文件在＆＃34; [我的项目] / www /＆＃34;。

最后，正如here所述，＆＃34; [我的项目] /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项目设置）。

设置“firebase javascript”与“离子服务”一起使用

1 个答案: