2017-09-15 15 views
0

サービスワーカーおよびfirebase webをjavascriptで新しくしました。私はFirebaseからペイロードを取得して、ユーザーに通知することでそれを表示したいと考えています。今私は次の問題に苦しんでいます。私はサービスワーカーを登録するには、次のスクリプトを使用する場合javascriptのフロントGUIでアプリを初期化したfirebaseインスタンスを取得する

をどのような作品

は、私がsucceeded応答を取得します。

index.htmlを

<p id="status"></p> 

<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script> 
<script> 

    if ('serviceWorker' in navigator) { 
     // Override the default scope of '/' with './', so that the registration applies 
     // to the current directory and everything underneath it. 
     navigator.serviceWorker.register('sw.js', {scope: './'}).then(function (registration) { 
      // At this point, registration has taken place. 
      // The service worker will not handle requests until this page and any 
      // other instances of this page (in other tabs, etc.) have been 
      // closed/reloaded. 
      document.querySelector('#status').textContent = 'succeeded'; 

     }).catch(function (error) { 
      // Something went wrong during registration. The service-worker.js file 
      // might be unavailable or contain a syntax error. 
      document.querySelector('#status').textContent = error; 
     }); 
    } else { 
     // The current browser doesn't support service workers. 
     var aElement = document.createElement('a'); 
     aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq'; 
     aElement.textContent = 'unavailable'; 
     document.querySelector('#status').appendChild(aElement); 
    } 
</script> 

sw.js

importScripts('https://www.gstatic.com/firebasejs/4.3.0/firebase-app.js'); 
importScripts('https://www.gstatic.com/firebasejs/4.3.0/firebase-messaging.js'); 

var config = { 
    apiKey: "MY_API_KEY", 
    authDomain: "project-xxxxx.firebaseapp.com", 
    databaseURL: "https://project-xxxxx.firebaseio.com", 
    projectId: "project-xxxxx", 
    storageBucket: "project-xxxxx.appspot.com", 
    messagingSenderId: "xxxxx" 
}; 
firebase.initializeApp(config); 

const messaging = firebase.messaging(); 


messaging.setBackgroundMessageHandler(function (payload) { 
    console.log('[firebase-messaging-sw.js] Received background message ', payload); 
    // Customize notification here 
    const notificationTitle = 'Background Message Title'; 
    const notificationOptions = { 
     body: 'Background Message body.', 
     icon: '/firebase-logo.png' 
    }; 

    return self.registration.showNotification(notificationTitle, 
     notificationOptions); 
}); 

問題は何

Uncaught FirebaseError: Messaging: This method is available in a Window context. (messaging/only-available-in-window).

messaging.requestPermission() 
    .then(function() { 
     console.log('Notification permission granted.' + messaging.getToken()); 

     messaging.getToken() 
      .then(function (currentToken) { 
       if (currentToken) { 
        console.log(currentToken); 
       } else { 
        // Show permission request. 
        console.log('No Instance ID token available. Request permission to generate one.'); 
        // Show permission UI. 
       } 
      }) 
      .catch(function (err) { 
       console.log('An error occurred while retrieving token. ', err); 
      }); 
     }) 
     .catch(function (err) { 
      console.log('Unable to get permission to notify.', err); 
     }); 

:今私の問題は、私はコンソールが私に語ったので、次のスクリプトは、唯一のウィンドウのコンテキストで動作することのindex.htmlのサービスワーカーからmessaging定数で処理したいということであり、今、登録からfirebaseのインスタンスを取得するにはどうすればよいですか、それとも間違った理論ですか?

答えて

0

サービス・ワーカーはウィンドウ・コンテキストを使用できません。また、ウィンドウからSWに、そしてその逆に何かを共有することはできません(変数を宣言して両方からアクセスすることはできません)。このエラーメッセージからFirebaseライブラリはウィンドウコンテキストに依存しているため、SWスクリプト内で使用することはできません。

あなたがしようとしていることをどのように処理するのか分かりません。

関連する問題