2017-02-04 12 views
2

私はAngular 2 Webアプリケーションを開発中で、Firebase Messagingを登録しトークンを取得したいと思います。角2とFireBase messagning - 登録できません

私はAngular 2にanglefire2を使用しています。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. 2つのファイルを読み込みます。例えば、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

注:クロムfirebaseメッセージングに関するいくつかの問題を持っていることに注意してくださいを。 firebase.messaging(firebaseApp).getToken()からの応答が表示されない場合は、[アプリケーション]タブの開発ツールの[サービスワーカー]セクションを開いて、アプリケーションのサービスワーカーの登録を解除してから再ロードしてください。 Firefoxでは問題ありません。

0

ほとんどのfirebaseメッセージング-sw.jsがコンパイルされ、アプリケーションコードにありません:

  • あなたはfirebaseメッセージング・sw.jsという名前のファイルがあることを確認してくださいsrcフォルダー。空のファイルにすることができます。
  • アプリを実行したときに角度CLIを使用してfirebaseメッセージング・sw.jsを含めること.angular-cli.jsonファイルの内容を変更した場合、このファイルは、「/」から提供することができていることを確認しますコンパイルコード:
// ..... .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 
関連する問題