设置“firebase javascript”以与“ionic serve”一起使用
Posted
技术标签:
【中文标题】设置“firebase javascript”以与“ionic serve”一起使用【英文标题】：Set up "firebase javascript" to use with "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”文件吗？
【问题讨论】：
【参考方案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 项目设置）。
【讨论】：
以上是关于设置“firebase javascript”以与“ionic serve”一起使用的主要内容，如果未能解决你的问题，请参考以下文章
如何设置安装了 conda 的 R 以与 RStudio 一起使用？
如何将对象设置为表单值以与 Material UI 做出反应？