Question

我在this文章之后使用服务工作者进行推送通知。一切都在使用Chrome但使用Firefox（v.44.0.2）我有一个奇怪的问题。成功登录我的应用程序后，我注册了服务工作者，除了等待推送事件之外什么都不做;我看到它已正确注册（来自某些日志记录和来自 about：serviceworkers ）。现在，如果我刷新页面（CTRL + R），我的所有POST都会因为这个服务工作者而导致CORS问题（缺少 Access-Control-Allow-Origin 标题），并且用户被重定向到登录页面;从这里开始，所有的POST都不能用于同样的原因。相反，如果我登录，取消注册服务工作者并然后刷新，则根本没有问题。知道发生了什么事吗？我的服务工作者再次处理推送事件，没有缓存没有其他处理完成，它完全适用于Chrome。

这是我的服务工作者代码（SOME_API_URL指向一个不需要用于测试目的的真实API，导致问题发生在服务工作者注册后，不需要推送事件）

self.addEventListener('push', function(event) {
  // Since there is no payload data with the first version
  // of push messages, we'll grab some data from
  // an API and use it to populate a notification
  event.waitUntil(
    fetch(SOME_API_URL).then(function(response) {
      if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
      }

      // Examine the text in the response
      return response.json().then(function(data) {
        if (data.error || !data.notification) {
          console.error('The API returned an error.', data.error);
          throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
          body: message,
          icon: icon,
          tag: notificationTag
        });
      });
    }).catch(function(err) {
      console.error('Unable to retrieve data', err);

      var title = 'An error occurred';
      var message = 'We were unable to get the information for this push message';

      var notificationTag = 'notification-error';
      return self.registration.showNotification(title, {
        body: message,
        tag: notificationTag
      });
    })
  );
});

self.addEventListener('notificationclick', function(event) {
  console.log('On notification click: ', event.notification.tag);
  // Android doesn't close the notification when you click on it
  // See: http://crbug.com/463146
  event.notification.close();

  // 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 == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
          return clients.openWindow('/');
        }
      })
  );
});

Answer 1

Firefox 44有bug 1243453，如果服务工作者不侦听获取事件，则会导致跨源请求的Origin标头被删除。

该漏洞已在Firefox 45中修复，该漏洞将于2016年3月8日（下周，截至本文撰写时）发布。与此同时，对于没有立即升级到最新Firefox版本的用户，您可以通过将此代码添加到服务工作者来解决此问题：

addEventListener('fetch', function(evt) {
  evt.respondWith(fetch(evt.request));
});

服务工作者在Firefox

1 个答案: