Question

我正在尝试将Firebase云消息传递（FCM）用于推送通知到我的Web应用程序（AngularJS）。为此，我在根应用程序文件夹中创建了一个firebase-messaging-sw.js。

// firebase-messaging-sw.js
'use strict';
console.log('Starting service worker');

if ('function' === typeof importScripts) {

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

    // Initialize the Firebase app in the service worker by passing in the
    // messagingSenderId.
    firebase.initializeApp({
        'messagingSenderId': '1043000236721'
    });

    // Retrieve an instance of Firebase Messaging so that it can handle background
    // messages.
    var messaging = firebase.messaging();


    messaging.setBackgroundMessageHandler(function (payload) {
        var shinyData = payload || {};
        var title = 'New Notification';
        console.log('[firebase-messaging-sw.js] Received background message ', payload, shinyData);

        return self.registration.showNotification(title, {
            body: shinyData.body,
            icon: '/resources/images/web-logo.png',
            data: { url: '/#!/home' }
        });
    });

    self.addEventListener("notificationclick", function (event) {
        var urlToRedirect = event.notification.data.url;
        event.notification.close();
        event.waitUntil(self.clients.openWindow(urlToRedirect));
    });
}

和一个包含gcm-sender-id的manifest.json文件，如下所示：

 {
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  "default_locale": "en",
  "description": "A plain text description",
  "gcm_sender_id": "103953800517"

}

在index.html中，我按如下方式初始化了Firebase：

<script>
        var config = {
            apiKey: "API-key",
            authDomain: "some-authdomain",
            databaseURL: "firebase-databaseUrl",
            storageBucket: "storage-bucketUrl",
            messagingSenderId: "senderId"
        };
        firebase.initializeApp(config);
    </script>

通过所有这些配置，FCM推送通知工作正常。但是当我们退出时问题就出现了。在注销时，我取消注册服务工作者，如下所示：

navigator.serviceWorker.getRegistrations().then(function (registrations) {
                            angular.forEach(registrations, function (registration) {
                                registration.unregister();
                            });
                        });

现在，当我尝试再次登录时，推送通知不起作用取消注册所有服务工作者后，我无法做到重新初始化firebase应用程序。如果我在注销后重新加载页面 FCM在重载firebase-messaging-sw.js上运行得非常好再次加载并再次设置服务工作者。

请帮助我提供正确注销和登录的解决方案，以实现FCM的顺利运行。

Answer 1

我还没有真正尝试过该解决方案，但是我相信这应该可以。将此代码编写为以下函数：

async function init() {
  const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
  await navigator.serviceWorker.ready;  
  var config = {
            apiKey: "API-key",
            authDomain: "some-authdomain",
            databaseURL: "firebase-databaseUrl",
            storageBucket: "storage-bucketUrl",
            messagingSenderId: "senderId"
        };
  firebase.initializeApp(config);
  // getToken and all stuffs
}

并在用户登录后立即调用函数init()。

此外，每当用户注销时，您都应使用以下方式注销服务工作者

navigator.serviceWorker.getRegistrations().then(function (registrations) {
  angular.forEach(registrations, function (registration) {
    registration.unregister();
      });
});

希望这对您有用。

如何在注销时取消注册FCM设备令牌和服务工作人员以及如何重新初始化Firebase应用程序？

1 个答案: