我想在 Ionic 2 项目中使用 Firebase Javascript，这样我就可以开发我想要应用的推送通知逻辑，并使用CLI "ionic serve">在浏览器中对其进行测试。
我已经按照node.js/ES2015下文档中的说明进行操作：
我做了一个CLI"npm安装--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线程中描述的问题。
我尝试了另一种方法，通过导入文件"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);
}
}
它不起作用，似乎没有考虑 [我的项目]/src/index.html<script src="assets/js/firebase.js"></script>(使用 Chrome 控制台查看 DOM 时不存在)。
知道如何在没有"npm install"的情况下导入"https://www.gstatic.com/firebasejs/3.6.10/firebase.js"文件吗？
一些更新：
在 ionic 2 项目中有 [my project]/src/index.html 和 [my project]/www/index.html。我正在编辑[我的项目]/src/index.html并且在命令提示符下运行"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);
}
}
之后，我不得不应用此处解释的内容：
我在"[我的项目]/www/"中创建了一个"firebase-messaging-sw.js"空文件。
最后，正如这里所解释的，"[我的项目]/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();
注意：我已经详细介绍了通过实现给我带来麻烦的步骤，除了getToken()或onMessage()之外 firebase.messaging.Messaging 设法在我的PushNotifService课上工作，一旦周围的其他东西到位。我没有详细说明服务器端(用于发送消息的PHP脚本或Firebase项目设置)。
Angular ~12 有一个 angular.json 文件，该文件中间包含一个 "scripts"：[] 数组。 Firebase Messaging 9 似乎加载了"firebase-messaging-sw.js"，而不允许您指定路径。
这对我有用，但您需要重建项目才能输出文件。
"scripts": ["src/firebase-messaging-sw.js"]