如何从service worker获取通知

How to get notification from service worker

本文关键字：获取 通知 worker service      更新时间：2023-09-26

我想创建浏览器通知。但是我想按照下面的方式:

  1. 我想为浏览器创建service worker。
  2. Service worker每隔60分钟就会向我服务器上的web api发出请求。
    3. 通过使用服务器响应，service worker将创建通知。
  3. 通知将在客户端工作。

这个方案可行吗?

试试这样做…请务必阅读代码中的注释。

这是服务工作者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中。

这是你要安装并与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')等…

您可以使用Worker。每隔60分钟给员工发一条信息。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))
    })
  }
});
相关文章：