设置“firebase javascript”与“离子发球”一起使用 [英] Set up "firebase javascript" to use with "ionic serve"
问题描述
我想在Ionic 2项目中使用 Firebase Javascript ，以便我可以开发 推送通知逻辑我想要应用，在浏览器中测试，使用 CLIionic serve 。
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".
我已按照 doc ：
我做了一个CLInpm install --save firebase来添加它到我的项目。
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.
我尝试了一种不同的方法，导入文件 https://www.gstatic.com/firebasejs/3.6.10/firebase.js ，然后我将其添加到[我的项目] / src / assets / js / firebase.js。
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.
在[我的项目] /src/index.html中我添加：
In [my project]/src/index.html i added:
<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时不存在）。
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).
任何想法如何导入 https://www.gstatic.com/firebasejs/3.6.10/firebase.js 文件没有使用npm install？
Any idea how to import the "https://www.gstatic.com/firebasejs/3.6.10/firebase.js" file without usin "npm install"?
推荐答案
一些更新：
在离子2项目中有[我的项目] / src /index.html和[我的项目] / www /index.html。我正在编辑[我的项目] / src /index.html并在捆绑更新后更改，而在命令提示符下运行的离子服务不适用于[我的项目] / www /index.html。
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.
现在我更新了[我的项目] / 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>
并且它适用于服务：
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:
我在[my project] / www /\".
I created a "firebase-messaging-sw.js" empty file in "[my project]/www/".
最后，正如此处所述， [我的项目] /www/firebase-messaging-sw.js必须包含：
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 ：我详细说明了导致我遇到麻烦的步骤除了来自
的getToken（）或onMessage（）之外的实现 firebase.messaging.Messaging 设法在我的 PushNotifService 类中工作，一旦其他东西到位。我没有详细说明服务器端（PHP脚本发送消息或Firebase项目设置）。
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).
这篇关于设置“firebase javascript”与“离子发球”一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
