2017-02-04 90 views
2

我正在開發Angular 2 Web應用程序,並且想要註冊Firebase消息並獲取令牌。Angular 2和FireBase消息 - 無法註冊

我正在爲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) { 
 

 
    } 
 

 
    
 

 
}

回答

0

您需要註冊一個ServiceWorker:

  1. 創建一個web應用程序清單如下所述: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.messaging(firebaseApp).getToken()的響應,請嘗試打開「應用程序」選項卡下開發工具中的「服務工作者」部分,取消註冊應用程序的服務人員,然後重新加載。在Firefox上不應該有問題。

0

最有可能的火力點的消息,sw.js在編譯應用程序代碼所缺少:

  • 確保你有一個文件名爲火力點的消息,sw.jssrc文件夾。可以是空文件。
  • 確保當你運行你的應用程序,這種文件可以從「/」送達,如果採用角CLI修改.angular-cli.json文件的內容包括火力點的消息,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