javascript - Service Worker 仅显示第一个推送通知(来自云消息传递)，直到我重新加载 - 工作人员收到消息

Question

我正在尝试使用此 Web 推送演练让我的客户能够将推送通知发送到他们的手机/台式机:https://framework.realtime.co/demo/web-push/

网站上的演示对我有用，当我将它复制到我的服务器时，我能够向下推送消息，并且我看到它们被我的服务人员记录在 JavaScript 控制台中，每次向下推送 channel .

但是，只有推送到 channel 的第一条消息会导致出现通知，其余的根本不会出现。如果我撤销 service-worker 并重新加载页面(以获取新页面)，它会再次工作——1 次推送。

我正在使用 the same ortc.js file they are ，一个几乎相同的 service-worker.js，修改后能够为图像/URL 选项传递 JSON。我修改后的 Service Worker 代码如下。

我在 JS 控制台中没有收到任何错误(上图中的 2 来自其他东西)，但我在服务 worker 旁边看到一个红色的 x 图标，尽管它旁边的数字没有似乎与我能说的任何事情有关(点击它什么也没做；点击 service-worker.js 一侧只会让我跳转到下面 service-worker.js 文件的第 1 行。

我的问题是:为什么我收到第一个通知，而其他任何通知都没有？或者我该如何调试它？我的 JS 控制台正在显示有效负载，并且使用断点单步执行 JS 让我迷失在缩小的 firebase 代码中(我已经为 firebase.js 尝试了 3.5 和 6.5文件)。

这是我的服务人员:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/3.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.5.0/firebase-messaging.js');

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

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

// Buffer to save multipart messages
var messagesBuffer = {};

// Gets the number of keys in a dictionary
var countKeys = function (dic) {
  var count = 0;
  for (var i in dic) {
      count++;
  }
  return count;
};

// Parses the Realtime messages using multipart format
var parseRealtimeMessage = function (message) {
  // Multi part
  var regexPattern = /^(\w[^_]*)_{1}(\d*)-{1}(\d*)_{1}([\s\S.]*)$/;
  var match = regexPattern.exec(message);

  var messageId = null;
  var messageCurrentPart = 1;
  var messageTotalPart = 1;
  var lastPart = false;

  if (match && match.length > 0) {
      if (match[1]) {
          messageId = match[1];
      }
      if (match[2]) {
          messageCurrentPart = match[2];
      }
      if (match[3]) {
          messageTotalPart = match[3];
      }
      if (match[4]) {
          message = match[4];
      }
  }

  if (messageId) {
      if (!messagesBuffer[messageId]) {
          messagesBuffer[messageId] = {};
      }
      messagesBuffer[messageId][messageCurrentPart] = message;
      if (countKeys(messagesBuffer[messageId]) == messageTotalPart) {
                lastPart = true;
      }
  }
  else {
      lastPart = true;
  }

  if (lastPart) {
      if (messageId) {
          message = "";

          // Aggregate all parts
          for (var i = 1; i <= messageTotalPart; i++) {
              message += messagesBuffer[messageId][i];
              delete messagesBuffer[messageId][i];
          }

          delete messagesBuffer[messageId];
      }

      return message;
  } else {
    // We don't have yet all parts, we need to wait ...
    return null;
  }
}

// Shows a notification
function showNotification(message, settings) {
  // In this example we are assuming the message is a simple string
  // containing the notification text. The target link of the notification
  // click is fixed, but in your use case you could send a JSON message with
  // a link property and use it in the click_url of the notification

  // The notification title
  var notificationTitle = 'Web Push Notification';
  var title = "Company Name";
  var icon = "/img/default.png";
  var url = "https://www.example.com/";
  var tag = "same";

  if(settings != undefined) {
      if(hasJsonStructure(settings)) settings = JSON.parse(settings);
      title = settings.title;
      icon = settings.icon;
      url = settings.click_url;
      tag = "same";
  }

  // The notification properties
  const notificationOptions = {
    body: message,
    icon: icon,
    data: {
      click_url: url
    },
    tag: tag
  };

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

// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
fb_messaging.setBackgroundMessageHandler(function(payload) {
  console.log('Received background message ', payload);

  // Customize notification here
  if(payload.data && payload.data.M) {
    var message = parseRealtimeMessage(payload.data.M);
    return showNotification(message, payload.data.P);
  }
});

// Forces a notification
self.addEventListener('message', function (evt) {
   if(hasJsonStructure(evt.data)) {
       var opts = JSON.parse(evt.data);
       var message = opts.message;
       evt.waitUntil(showNotification(message, opts));
   }
   else evt.waitUntil(showNotification(evt.data));
});

// The user has clicked on the notification ...
self.addEventListener('notificationclick', function(event) {
  // Android doesn’t close the notification when you click on it
  // See: http://crbug.com/463146
  event.notification.close();

  if(event.notification.data && event.notification.data.click_url) {
    // gets the notitication click url
    var click_url = event.notification.data.click_url;

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(clients.matchAll({
      type: "window"
    }).then(function(clientList) {
      for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == click_url && 'focus' in client)
          return client.focus();
      }
      if (clients.openWindow) {
        var url = click_url;
        return clients.openWindow(url);
      }

    }));
  }
});

function hasJsonStructure(str) {
    if (typeof str !== 'string') return false;
    try {
        const result = JSON.parse(str);
        const type = Object.prototype.toString.call(result);
        return type === '[object Object]'
            || type === '[object Array]';
    } catch (err) {
        return false;
    }
}

Answer 1

我遇到了类似的问题。我正在使用选项对象中的标签属性。我给出了固定值而不是唯一值。所以只有第一个通知出现了。然后我读到这个:

tag: An ID for a given notification that allows you to find, replace,or remove the notification using a script if necessary.

在文档中并理解它需要是唯一值的原因。所以现在每个通知都显示出来了。我怎么也看到你的标签变量是硬编码的。