Google Chrome中的服务工作者警告

Question

我正在使用FCM发送网络通知。我收到此警告并单击通知不会给出通常的结果（打开通知URL）。这是Service-Worker代码

importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '<my senderid>'
});

const messaging = firebase.messaging();


messaging.setBackgroundMessageHandler(function(payload) {


  self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    var promise = new Promise(function(resolve) {
      setTimeout(resolve, 1000);
    }).then(function() {
      return clients.openWindow(payload.data.locator);
    });

    event.waitUntil(promise);
  });

  var notificationTitle = payload.data.title;
  var notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon
  };
  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

firebase-messaging-sw.js:108 Event handler of 'notificationclick' event must be added on the initial evaluation of worker script.

这是警告信息，108指的是这一行

self.addEventListener('notificationclick', function(event) {

这是在Chrome版本55.在Firefox上，没有任何错误，它运行完全正常。提前致谢。

Answer 1

你应该搬家

self.addEventListener 

功能之外

messaging.setBackgroundMessageHandler

这样您只需添加一次EventListener。

您的完整代码应如下所示

const messaging = firebase.messaging();

self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    var promise = new Promise(function(resolve) {
      setTimeout(resolve, 1000);
    }).then(function() {
      return clients.openWindow(event.data.locator);
    });

    event.waitUntil(promise);
  });

messaging.setBackgroundMessageHandler(function(payload) {   

  var notificationTitle = payload.data.title;
  var notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon,
    locator:payload.data.locator
  };
  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Answer 2

在messaging.setBackgroundMessageHandler之外使用self.addEventListener并使用notificationOptions的data属性

下面是完整的firebase-messaging-sw.js文件，以便更好地理解

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

 // Initialize Firebase
  var config = {
    apiKey: "apkiiiiiiiKeyyyyyy",
    authDomain: "authhhhhhDomaiiiiinnnnn",
    databaseURL: "urlllllll",
    projectId: "projjjjIIIDDDD",
    storageBucket: "buuuuuuuu",
    messagingSenderId: "111111111111"
  };
  firebase.initializeApp(config);

  var messaging = firebase.messaging();

self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    var promise = new Promise(function(resolve) {
      setTimeout(resolve, 500);
    }).then(function() {
      return clients.openWindow(event.notification.data);
    });
    event.waitUntil(promise);
  });


messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = payload.data.title;
  var notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon,
    vibrate: [200, 100, 200, 100, 200, 100, 200],
    image: payload.data.image,
    data: payload.data.link,
    tag: "bg"
  };

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