如何从服务人员那里获得通知

Question

我想创建浏览器通知。但我想遵循以下方式：

1. 我想为浏览器创建 Service Worker。
2. Service Worker 将每 60 分钟向位于我服务器上的 Web api 请求一次。
3. 通过使用服务器响应服务工作者将创建通知。
4. 然后通知将在客户端工作。

是否可行，请建议。

Answer 1

尝试这样的事情...确保阅读代码中的 cmets。

这里是服务人员your-service-worker.js。

self.addEventListener('install', function(event) {
  console.log("Service Worker installed");
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function(event) {
  console.log("Service Worker activated");
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('message', function(event) {
  console.log("Service Worker message event: " + JSON.stringify(event.data));
  var sender = ( event.ports && event.ports[0] ) || event.source;
  switch (event.data) {
    case 'fetchNotifications': {
      // send notifications when client is ready
      sender.postMessage("Here are your queued notifications!");
      break;
    }
    // case 'command': // handle some command, respond
    default: {
      if(sender)
        sender.postMessage("Unknown command: " + event.data);
      break;
    }
  }
});

console.log("Service Worker initialized");

setInterval(function() {
  // request to your API
  // create notification
  // queue to send to client
}, 60*60*1000);

在您的网页中，您必须安装并与 service worker 对话。您必须与 Service Worker 交谈，因为可以将多个客户端页面注册到同一个 Service Worker。

这里是为您的网页安装服务工作者并与之通信的 JavaScript。

if ('serviceWorker' in navigator) {
  var serviceWorkerLocation = '/your-service-worker.js';
  navigator.serviceWorker
    .register(serviceWorkerLocation)
      .then(function() {
        console.log("Service worker is registered.");
        if (!navigator.serviceWorker.controller) {
          console.log("Service worker needs to be activated.");
          //location.reload(); // you may choose to reload to sync up with a version change of the service worker
        } else {
          console.log("Service worker is active.");
          // setTimeout(function() { serviceWorkerVersionCheck(true); },250); // you might need to check it's version
        }
      });

} else {
  // panic, fall back, etc.
}

function serviceWorkerRequest(message) {
  if ('serviceWorker' in navigator) {
    if ( navigator.serviceWorker.controller == null ) {
      return Promise.reject("No service worker controller.");
    }
    return new Promise(function(resolve, reject) {
      var messageChannel = new MessageChannel();
      messageChannel.port1.onmessage = function(event) {
        if (event.data.error) {
          reject(event.data.error);
        } else {
          resolve(event.data);
        }
      };
      navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
    });
  } else {
    return Promise.reject("No service worker.");
  }
}

然后你会调用serviceWorkerRequest('fetchNotifications') 或serviceWorkerRequest('listenForNotifications') 等...取决于你的实现。

Answer 2

您可以使用Worker。每隔六十分钟向工人发布一条消息。 Worker 执行请求，将消息发布到文档。

在文档中

var worker = new Worker("/path/to/worker.js");

worker.addEventListener("message", function(e) {
  console.log(e.data);
  if (e.data.constructor.name === "Error") {
    clearInterval(interval);
    console.log(e.data.message)
  }
});

worker.postMessage("request"); // make first post to worker

var interval = null;

var duration = 1000 * 60 * 60;  

interval = setInterval(function() {
    worker.postMessage("request")
}, duration);

在worker.js

self.addEventListener("message", function(e) {
  if (e.data === "request") {
    var request = fetch("/path/to/api");
    request.then(function(response) {
      return response.text()
    })
    .then(function(data) {
      self.postMessage(data)
    })
    .catch(function(err) {
       self.postMessage(new Error(err))
    })
  }
});