Angular 2和FireBase消息 - 无法注册

Question

我正在开发Angular 2 Web应用程序，并希望注册Firebase Messaging并获取令牌。

我正在使用angularfire2 for Angular 2.我使用Angular ng服务于本地开发环境。 不幸的是，浏览器控制台显示以下错误：

V browserErrorMessage：“无法注册ServiceWorker：获取脚本时收到了错误的HTTP响应代码（404）。” 代码：“messaging / failed-serviceworker-registration”消息：“消息：我们无法注册默认服务工作者。无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）。（消息/失败-serviceworker注册）“。 stack：“FirebaseError：Messaging：我们无法注册默认服务工作者。无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）。（messaging / failed-serviceworker-registration）.↵at http：// localhost：4200 / vendor.bundle.js：96468：225↵在ZoneDelegate.invoke（ http：// localhost：4200 / vendor.bundle.js：102953：26 ）↵在Object.onInvoke（ http：/ /localhost:4200/vendor.bundle.js:33052:37）↵在Zone.leun（ http：// localhost：4200 / vendor.bundle.js：102952：32 ）↵在Zone.run（ http：// localhost） ：4200 / vendor.bundle.js：102824：43 ）↵在http：// localhost：4200 / vendor.bundle.js：103246： 57↵在ZoneDelegate.invokeTask（ http：// localhost：4200 / vendor.bundle。 js：102986：35 ）↵在Object.onInvokeTask（ http：// localhost：4200 / vendor.bundle.js：33043：37 ）↵在ZoneDelegate.invokeTask（ http：// localhost：4200 / vendor.bundle.js： 102985：40 ）↵在Zone.runTask（ http：// localhost：4200 / vendor.bundle.js：102862：47 ）↵在drainMicroTaskQueue（ ht） tp：// localhost：4200 / vendor.bundle.js：103144：35 ）“ proto ：error

以下是我的服务代码。

 import { Inject, Injectable } from "@angular/core"; import { FirebaseApp } from "angularfire2"; import * as firebase from 'firebase'; @Injectable() export class FirebaseMessagingService { private messaging: firebase.messaging.Messaging; constructor( @Inject(FirebaseApp) private firebaseApp: firebase.app.App) { console.log("FirebaseMessagingService init..."); this.messaging = firebase.messaging(this.firebaseApp); } init() { this.messaging.requestPermission() .then(() => { this.onFirebaseInitialized(); }) .catch((error) => { console.log("FirebaseMessagingService requestPermission error:" + error); }); } private onFirebaseInitialized() { console.log("FirebaseMessagingService initialized"); /*this.messaging.setBackgroundMessageHandler(message => { })*/ this.getToken(); // Callback fired if Instance ID token is updated. this.messaging.onTokenRefresh(() => { this.getToken(); }); this.messaging.onMessage((payload) => { console.log("Message received. ", payload); // ... }); } getToken() { this.messaging.getToken() .then((currentToken) => { console.log('getToken() received'); if (currentToken) { this.sendTokenToServer(currentToken); this.updateUIForPushEnabled(currentToken); } else { // Show permission request. console.log('No Instance ID token available. Request permission to generate one.'); // Show permission UI. this.updateUIForPushPermissionRequired(); this.setTokenSentToServer(false); } }) .catch(function (err) { console.log('An error occurred while retrieving token. ', err); //this.showToken('Error retrieving Instance ID token. ', err); //this.setTokenSentToServer(false); }); } sendTokenToServer(token) { } updateUIForPushEnabled(token) { } updateUIForPushPermissionRequired() { } setTokenSentToServer(isSent: boolean) { } } 

Answer 1

您需要注册ServiceWorker：

1. 按照此处所述创建网络应用清单： https ： //firebase.google.com/docs/cloud-messaging/js/client
2. 创建服务工作文件，如以下部分接收消息中所述 。

3. 加载这两个文件。 例如，在index.html中：

     <link rel="manifest" href="/manifest.json"> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/firebase-messaging-sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); } </script> 

这篇博文在这个过程中帮助了我： https ： //houssein.me/progressive-angular-applications

注意：请注意，Chrome在firebase消息传递方面存在一些问题。 如果您没有看到来自firebase.messaging(firebaseApp).getToken()的响应，请尝试在“应用程序”选项卡下的开发工具中打开“服务工作者”部分，取消注册应用程序的服务工作者，然后重新加载。 在Firefox上应该没有问题。

Answer 2

很可能在编译的应用程序代码中缺少firebase-messaging-sw.js ：

• 确保在src文件夹中有一个名为firebase-messaging-sw.js的文件。 可以是一个空文件。
• 确保在运行应用程序时，如果使用angular cli修改.angular-cli.json文件的内容以在编译代码中包含firebase-messaging-sw.js，则可以从'/'提供此文件。

 // ..... .angular-cli.json "apps": [{ "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "firebase-messaging-sw.js" // this will copy this file in the root path of the compilation folder ], // ..... more config options 

Answer 3

您必须在www dir中添加firebase-messaging-sw.js ，因为该页面将查找http://localhost/firebase-messaging-sw.js而不是我们的项目目录。