首页 文章

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

提问于
浏览 次
0

我想在Ionic 2项目中使用Firebase Javascript，所以我可以使用 CLI "ionic serve" develop Push Notification logic that I want to apply 和 test it in a browser .

我在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时，它不存在） .

知道如何导入“https://www.gstatic.com/firebasejs/3.6.10/firebase.js " file without usin " npm install”吗？

node.js cordova firebase ionic2 firebase-cloud-messaging

1 回答

  • 0

    SOME UPDATES:

    在离子2项目中有[我的项目] / src /index.html和[我的项目] / www /index.html . 我正在编辑[我的项目] / src /index.html并在"bundles update"之后更改而"ionic serve"在命令提示符下运行时不适用于[我的项目] / 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解释：

    我在“[my project] / www /”中创建了一个“firebase-messaging-sw.js”空文件 .

    最后，正如here所述，"[my project]/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 ：我已经详细介绍了通过实现导致我遇到麻烦的步骤，除了来自firebase.messaging.Messaging的getToken（）或onMessage（）之后设法在我的 PushNotifService 类中工作了一旦其他东西到位 . 我没有详细说明服务器端（PHP脚本发送消息或Firebase项目设置） .

    回复于

相关问题