javascript - Angular 2 和 FireBase 消息传递 - 无法注册

Question

我正在开发 Angular 2 网络应用程序并想注册 Firebase Messaging 并获取 token 。

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

V browserErrorMessage : "Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script." code : "messaging/failed-serviceworker-registration" message : "Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration)." stack : "FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration).↵ at http://localhost:4200/vendor.bundle.js:96468:225↵ at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:102953:26)↵ at Object.onInvoke (http://localhost:4200/vendor.bundle.js:33052:37)↵ at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:102952:32)↵ at Zone.run (http://localhost:4200/vendor.bundle.js:102824:43)↵ at http://localhost:4200/vendor.bundle.js:103246:57↵ at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:102986:35)↵ at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:33043:37)↵ at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:102985:40)↵ at Zone.runTask (http://localhost:4200/vendor.bundle.js:102862:47)↵ at drainMicroTaskQueue (http://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. 按照此处所述创建网络应用程序 list :https://firebase.google.com/docs/cloud-messaging/js/client
2. 创建服务 worker 文件，如以下接收消息部分所述。

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() 的响应，请尝试在“应用程序”选项卡下的开发工具中打开“服务 worker ”部分，取消注册应用程序的服务 worker ，然后重新加载。在 Firefox 上应该没有问题。