Question

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

我想为浏览器创建服务工作者。
服务人员将在每60分钟后向我位于我服务器的网络API发送请求。
使用服务器响应服务工作人员将创建通知。
然后通知将在客户端上运行。

是否可行解决方案请提出建议。

Answer 1

尝试这样的事情......请务必阅读代码中的注释。

这是服务工作者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);

从您的网页，您必须安装并与服务工作者交谈。您必须与服务工作者交谈，因为可以将多个客户端页面注册到同一服务工作者。

这是用于安装网页的服务工作者并与之通信的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。每隔六十分钟向工作人员发送一条消息。工作人员执行请求，将消息发布到文档。

在文件

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

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

如何从服务工作者那里获得通知

2 个答案: