• 周日. 12月 10th, 2023

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Service worker性能优化 &workbox

admin

11月 28, 2021

定义:

     Service worke 是一个浏览器提供的独立线程,独立于当前网页的进程,在js主线程注册完之后,,开发者可以用编程的方式自己控制关联的页面,拦截并修改访问和资源请求,不局限于图片,甚至是ajax请求等,细粒度地缓存资源

特点

  • 独立的一个线程(不影响页面UI渲染)
  • 独立 生命周期
  • 独立的作用域
  • 通过postMessage进行通信
  • API全异步
  • 只能运行在HTTPS或者localhost环境 

作用

  • 拦截页面的请求,实现缓存预加载。
  • 缓存一些静态资源,实现图片前端资源预加载。
  • 可以做统一url的多个页面之间的通信的桥梁

调试 Service Worker

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

  

Service Worker 日志查看

地址栏输入:chrome://serviceworker-internals

  

 作用域

  sw会监听和代理所有的请求,只想对特定页面监控,可以在注册时指定路径:

navigator.serviceWorker.register('/mytest/sw.js');

  

实践

   页面通信

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

 Workbox 文档

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注