Javascript Angular 2和FireBase messagning-无法注册

我正在开发Angular 2 web应用程序，希望注册Firebase消息并获取令牌

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

五 浏览器错误消息 : “注册ServiceWorker失败：获取脚本时收到错误的HTTP响应代码（404）。” 代码 : “消息传递/serviceworker注册失败” 消息 : “消息：我们无法注册默认的服务工作者。注册服务工作者失败：获取脚本时收到错误的HTTP响应代码（404）。（消息/服务工作者注册失败）。” 堆栈 : “FirebaseError:消息传递：我们无法注册默认的服务工作者。注册ServiceWorker失败：获取脚本时收到错误的HTTP响应代码（404）。（消息传递/ServiceWorker注册失败）。↵ 在↵ 在ZoneDelegate.invoke（）处↵ 在Object.onInvoke（）处↵ 在ZoneDelegate.invoke（）处↵ 在Zone.run（）处↵ 在↵ 在ZoneDelegate.invokeTask（）上↵ 在Object.onInvokeTask（）处↵ 在ZoneDelegate.invokeTask（）上↵ 在Zone.runTask（）处↵ 在drainMicroTaskQueue（）上 proto : 错误

下面是我的服务代码。

从“@angular/core”导入{Inject，Injectable}”；
从“angularfire2”导入{FirebaseApp}；
从“firebase”导入*作为firebase；
@可注射（）
导出类FirebaseMessagingService{
私人消息：firebase.messaging.messaging；
构造函数（@Inject（FirebaseApp）私有FirebaseApp:firebase.app.app）{
log（“FirebaseMessagingService初始化…”）；
this.messaging=firebase.messaging（this.firebaseApp）；
}
init（）{
this.messaging.requestPermission（）
.然后（（）=>{
这个。onfirebeinitialized（）；
})
.catch（（错误）=>{
log（“FirebaseMessagingService请求权限错误：+错误”）；
});
}
私有化{
log（“FirebaseMessagingService已初始化”）；
/*this.messaging.setBackgroundMessageHandler（message=>{
})*/
这个。getToken（）；
//更新实例ID令牌时触发回调。
this.messaging.onTokenRefresh（（）=>{
这个。getToken（）；
});
this.messaging.onMessage（（有效负载）=>{
console.log（“收到消息”，有效载荷）；
// ...
});
}
getToken（）{
this.messaging.getToken（）
。然后（（currentToken）=>{
log（'getToken（）已接收'）；
如果（当前令牌）{
this.sendTokenToServer（currentToken）；
此.updateUIForPushEnabled（currentToken）；
}否则{
//显示权限请求。
log（'没有可用的实例ID令牌。请求生成一个令牌的权限'）；
//显示权限界面。
此.updateUIForPushPermissionRequired（）；
this.setTokenSentToServer（false）；
}
})
.catch（函数（err）{
console.log（'检索令牌时出错'，err）；
//this.showToken（'检索实例ID令牌时出错'，err）；
//this.setTokenSentToServer（false）；
});
}
sendTokenToServer（令牌）{
}
updateUIForPushEnabled（令牌）{
}
updateUIForPushPermissionRequired（）{
}
setTokenSentToServer（isSent:boolean）{
}
}

您需要注册一名服务人员：

创建web应用程序清单，如下所述：

创建一个服务工作者文件，如下面的“接收消息”部分所述

加载这两个文件。例如，在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>

if（导航器中的“serviceWorker”）{
navigator.serviceWorker.register（'/firebase messaging sw.js'）。然后（函数（注册）{
//注册成功
console.log（'ServiceWorker注册成功，作用域：'，registration.scope）；
}).catch（函数（err）{
//注册失败：(
console.log（'ServiceWorker注册失败：'，错误）；
});
}

这篇博文在这个过程中帮助了我：

注意：请注意，Chrome在firebase消息传递方面存在一些问题。如果您没有看到来自

firebase.messaging（firebaseApp.getToken（）的响应

尝试在应用程序选项卡下的开发工具中打开Service worker部分，注销应用程序的Service worker，然后重新加载。在Firefox上不应该出现问题。

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

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

---

您必须在www dir中添加

firebase messaging sw.js

，因为页面会查找

http://localhost/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