Chrome Extension & FCM Registrierungs-Token abrufen

Question

Ich erstelle eine Chrome-Erweiterung, die Push-Benachrichtigungen empfangen kann. Eine Alternative wäre das Abfragen des Servers alle X Sekunden, aber das scheint keine gute Wahl zu sein. Aus diesem Grund habe ich Firebase gewählt. Die benutzerdefinierte JWT-Token-Authentifizierung scheint erledigt und funktioniert. Der nächste Schritt besteht darin, das Registrierungs-Token abzurufen und dieses an den Server zu senden.

Das Problem:

Das Token scheint nie abgerufen werden:

var config = { 
    apiKey: "<KEY>", 
    authDomain: "<DOMAIN>", 
    messagingSenderId: "<SENDER_ID>" 
}; 
var app = firebase.initializeApp(config); 
var messaging = firebase.messaging(app); 

function initApp() { 
    firebase.auth().onAuthStateChanged(function(user) { 
     if(user) { 
      // Update UI 
      fetchToken(); 
     } else { 
      // no user is signed in 
     } 
    }); 
} 

function fetchToken() { 
    messaging.requestPermission() 
     .then(function() { 
      messaging.getToken() 
       .then(function(currentToken) { 
        if (currentToken) { 
         sendRegistrationTokenToServer(currentToken); 
        } else { 
         console.log('No token available') 
        } 
       }) 
       .catch(function(err) { 
        console.debug('An error occurred while retrieving token. ', err); 
       }); 
    }).catch(function(err) { 
     console.log('Notification permissions denied.', err); 
    }); 


    firebase.messaging().onTokenRefresh(function() { 
     messaging.getToken() 
      .then(function(refreshedToken) { 
       sendRegistrationTokenToServer(refreshedToken); 
       console.log('Token refreshed') 
      }) 
      .catch(function(err) { 
       console.log('Unable to retrieve refreshed token', err); 
      }); 
    }); 
} 

$(document).ready(function() { 
    initApp(); 

    // some other stuff 
}); 

Weiß jemand, warum das Token nicht geholt wird?

In der Entwicklerkonsole (zum Abrufen des Tokens) ist keine Netzwerkaktivität zu sehen. Es wird auch kein Fehler gedruckt. Ich sehe jedoch Netzwerkaktivität für getAccountInfo?key=<somekey>, die eine idToken damit trägt, obwohl ich nicht sicher bin, dass dies eine verwandte Anfrage ist (Antwort scheint kein Token zurückzugeben).

Answer 1

FCM für das Internet erfordert die Verwendung von Service-Mitarbeitern, die meines Wissens nicht in den Chrome-Erweiterungen/Apps unterstützt werden.

Sie sollten jedoch einen Fehler gesehen haben.

Answer 2

Das Problem ist, dass Sie messaging.requestPermission() nicht aus dem Hintergrundskript aufrufen können. Wenn der Benutzer keine Benachrichtigungen zugelassen hat, versucht dieser Aufruf, den Benutzer anzurufen, was im Hintergrund fehlschlägt. Was können Sie tun, ist es, die Benachrichtigungen Erlaubnis irgendwo anders in Ihrer Erweiterung anfordern, die eine Benutzeroberfläche hat (zB Ihre Seite Optionen) mit:

Notification.requestPermission().then((permission) => { ... 

Sobald der Benutzer die Berechtigung erlaubt hat, können Sie die Permissions API, verwenden, wenn Sie abfragen haben Sie die Erlaubnis, anstelle des Anrufs messaging.requestPermission(). Dies ist eine Funktion, die ich, dies zu tun, schrieb:

/** 
* Determine if navigator Notifications permission has been granted 
* Note: this will work from the background script of an extension, 
* unlike the other solutions 
* @see https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web 
* @see https://w3c.github.io/permissions/ 
* @see https://www.chromestatus.com/features/6443143280984064 
* @returns {Promise<boolean>} true if granted 
* @memberOf app.Notify 
*/ 
hasNavigatorPermission: function() { 
    return navigator.permissions.query({ 
    name: 'notifications', 
    }).then((status) => { 
    if (status.state === 'granted') { 
     return Promise.resolve(true); 
    } 
    return Promise.resolve(false); 
    }); 
}, 

Und es wie folgt verwenden:

/** 
* Get the registration token for fcm 
* @returns {Promise<token>} A registration token for fcm 
* @memberOf app.Fb 
*/ 
getRegToken: function() { 
    return app.Notify.hasNavigatorPermission().then((granted) => { 
    if (!granted) { 
     return Promise.reject(new Error(ERROR_NOTIFICATIONS)); 
    } 
    return _messaging.getToken(); 
    }).then((token) => { 
    if (token) { 
     return Promise.resolve(token); 
    } 
    return Promise.reject(new Error(ERROR_TOKEN)); 
    }); 
}, 

Ein paar andere Dinge zu beachten:

nicht auf Notification.permission in einer Verlängerung Verlassen Sie sich . Es hat nicht den richtigen Wert.

Ab Chrome 59, wenn Sie den Benachrichtigungsdialog während der Entwicklung zu oft schließen, wird die Anzeige für eine bestimmte Zeit nicht mehr angezeigt. Sie müssen Ihre Browserdaten löschen, damit sie erneut angezeigt werden können.