Service worker实践 作用

地址栏输入：chrome://inspect/#service-workers

// app.js

// 加载sw.js这个service worker
navigator.serviceWorker.register(‘./sw.js‘)
.then(reg => {
  console.log(‘SW registered!‘, reg)
})
.catch(err => console.log(‘Boo!‘, err));

// 监听service worker发送过来的消息
navigator.serviceWorker.addEventListener(‘message‘, function (event) {
	console.log(‘Client ‘ + clientId + ‘ says: ‘ + event.data.message)
});

// 页面上有一个按钮，点击之后向service worker发送hello的消息
button.addEventListener(‘click‘, function() {
  navigator.serviceWorker.controller.postMessage(‘hello‘);
});

// sw.js
// 监听页面上发送过来的消息，然后发送给其他页面消息
self.addEventListener(‘message‘, function(event){
	var promise = self.clients.matchAll()
  .then(function(clientList) {
    // event.source.id contains the ID of the sender of the message.
    var senderID = event.source.id;

    clientList.forEach(function(client) {
      // Skip sending the message to the client that sent it.
      if (client.id === senderID) {
        return;
      }
      client.postMessage({
        client: senderID,
        message: event.data
      });
    });
  });

  // If event.waitUntil is defined, use it to extend the
  // lifetime of the Service Worker.
  if (event.waitUntil) {
    event.waitUntil(promise);
  }
});