App initialisiert Firebase-Instanz vor GUI in Javascript

Question

Ich bin neu zu Service-Arbeiter und Firebase-Web mit Javascript. Ich möchte Payloads von der Firebase abrufen, um sie über eine Benachrichtigung an den Benutzer anzuzeigen. Jetzt habe ich mit folgendem Problem zu kämpfen.

Was

funktioniert, wenn ich das folgende Skript mit einem Servicemitarbeiter zu registrieren, werde ich eine succeeded Antwort.

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); 
}); 

Was das Problem

Nun mein Problem ist, dass ich mit dem messaging Konstante aus dem Servicemitarbeiter auf den index.html behandeln will, da die Konsole mir sagt, dass das folgende Skript nur im Fenster Kontext funktioniert:

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); 
     }); 

Nun, wie kann ich die Firebase-Instanz von der Registrierung bekommen oder ist das eine falsche Theorie?

Answer 1

Der Fensterkontext ist für den Service Worker nicht verfügbar. Es ist auch nicht möglich, etwas vom Fenster zur SW und umgekehrt zu teilen (also kann man keine Variable deklarieren und von beiden darauf zugreifen). Von der Fehlermeldung scheint es, dass die Firebase-Bibliotheken vom Fensterkontext abhängen, so dass Sie sie nicht innerhalb des SW-Skripts verwenden können.

Ich bin mir nicht sicher, wie ich damit umgehen soll, was Sie versuchen zu tun.