Google Chrome中的Service Worker警告

a11xaf1n 于 2023-06-03 发布在 Go

关注(0)|答案(3)|浏览(558)

我正在使用FCM发送Web通知。我收到此警告，点击通知不会给予出通常的结果（打开通知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上，没有任何问题，运行完全正常。先谢谢你了。

google-chrome

来源：https://stackoverflow.com/questions/41266567/service-worker-warning-in-google-chrome

3条答案

按热度按时间

yhxst69z1#

你应该搬走

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

赞(0）回复(0）举报 2023-06-03

z4bn682m2#

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

赞(0）回复(0）举报 2023-06-03

nhjlsmyf3#