Web Worer

web worker 介绍

Web Worker 是一种在后台线程运行脚本的技术，可避免主线程阻塞，提升页面响应性，通过创建 Worker 实例及通信机制实现其功能。

// main.js
const worker = new Worker('worker.js');
worker.postMessage('start work');
worker.onmessage = function (e) {
    console.log('Received from worker:', e.data);
};
// worker.js
self.onmessage = function (e) {
    if (e.data ==='start work') {
        self.postMessage('Working...');
    }
};

Service Worker

• Service Worker 本质上是一种特殊的 Web Worker
• Service Worker 是一种在后台运行的脚本，能拦截网络请求、实现离线缓存，提升 Web 应用性能和用户体验，通过注册、事件监听等方式使用。
• Service Worker 是运行在浏览器后台的脚本，独立于主线程。它让 Web 应用具备离线缓存、推送通知等能力。比如注册 Service Worker：

// main.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service - worker.js')
    .then(registration => {
        console.log('Service Worker注册成功，作用域：', registration.scope);
      })
    .catch(error => {
        console.log('Service Worker注册失败：', error);
      });
  });
}

// service-worker.js
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
    .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

应用场景

1. PWA
2. 配合 Service Worker，让服务器能向用户推送消息，即使应用未在前台运行，可用于通知用户新内容、提醒等。
3. 用于管理缓存，Service Worker 借助它来存储和检索资源，实现离线缓存功能，有多种缓存策略可选择。

PWA

• PWA 即渐进式网络应用，融合网页和原生应用优势，通过 Service Worker 等技术实现离线访问、消息推送等功能，提升用户体验。
• PWA 是一种利用现代 Web 技术构建的网络应用，它能像原生应用一样被安装到设备主屏幕，具备离线工作、推送通知等能力。比如创建一个简单 PWA，先在 HTML 文件中配置 manifest.json 描述应用信息：

<link rel="manifest" href="manifest.json">

• 然后创建 manifest.json 文件，描述应用的名称、图标等信息：

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

• 然后注册 Service Worker 实现离线缓存，类似之前示例中注册及编写 service - worker.js 逻辑，拦截请求并管理缓存，这样用户就能像使用原生应用一样便捷访问网页应用。