Web Worker，Service Worker，Web Worker

最新推荐文章于 2024-04-17 17:18:15 发布

let user = 百晓生

最新推荐文章于 2024-04-17 17:18:15 发布

阅读量529

点赞数 1

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/WH_Crx/article/details/130103693

版权

Web Worker、Worker Service和Service Worker

Service Worker、Worker Service和Web Worker都是Web中的多线程技术。

1、都是在浏览器中运行的JavaScript线程，可以独立于主线程运行，不会阻塞页面渲染和用户交互。

2、都可以通过异步通信的方式与主线程通信，实现消息的传递和共享。

3、都可以进行数据缓存和离线访问等功能的实现，提高Web应用的性能和可靠性。

4、都可以通过与IndexedDB等Web API的配合使用，实现数据的存储和访问

需要注意的是，Service Worker和Worker Service是Web标准中的一种，而Web Worker是另一种。它们的实现机制和用途有所不同，但都是在Web中实现多线程的重要技术。

1、Service Worker

Service Worker 是一种在 Web Worker 上下文中运行的 JavaScript 文件，可以拦截和处理网页请求。其实现原理可以概括为以下几个步骤：

注册 Service Worker：在网页中注册 Service Worker，浏览器会下载 Service Worker 文件，并在后台线程中启动它。
安装 Service Worker：在 Service Worker 文件中通过监听 install 事件，缓存需要离线访问的资源。
激活 Service Worker：当 Service Worker 安装完成之后，通过监听 activate 事件，删除旧的缓存。
拦截网络请求：通过监听 fetch 事件，拦截网页发起的请求，根据缓存策略返回缓存或网络请求的结果。
与网页进行通信：Service Worker 与网页之间通过 postMessage 进行通信，网页可以向 Service Worker 发送消息，Service Worker 也可以向网页发送消息。

需要注意的是，Service Worker 只能在 HTTPS 网站中使用，以确保网站的安全性。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      // 注册成功
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // 注册失败
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

1.1 Service Worker 中应用 IndexedDB

IndexedDB

IndexedDB是一种在浏览器中本地存储数据的NoSQL数据库，它可以在客户端存储结构化数据，支持查询和索引，

而不需要联网请求服务器。它是HTML5规范中的一部分，可以用来存储大量结构化数据，比如JavaScript对象。

IndexedDB使用的是异步API，因此它能够处理大量的数据，而不会影响浏览器的性能。同时，IndexedDB还支持

事务、事件和游标，使得它可以被用于处理复杂的数据操作。

// 在 Service Worker 中打开 IndexedDB 数据库
self.addEventListener('activate', function(event) {
  event.waitUntil(
    // 打开或创建名为 'my-db' 的 IndexedDB 数据库
    idb.open('my-db', 1, function(upgradeDB) {
      // 在数据存储空间中创建一个名为 'my-store' 的对象存储区
      if (!upgradeDB.objectStoreNames.contains('my-store')) {
        upgradeDB.createObjectStore('my-store');
      }
    })
  );
});

// 在 Service Worker 中读取和写入 IndexedDB
self.addEventListener('fetch', function(event) {
  event.respondWith(
    // 在 'my-store' 对象存储区中查找匹配请求的数据
    idb.open('my-db').then(function(db) {
      var tx = db.transaction('my-store', 'readonly');
      var store = tx.objectStore('my-store');
      return store.get(event.request.url);
    }).then(function(response) {
      // 如果匹配到数据，直接返回
      if (response) {
        return new Response(response.body, response);
      }
      // 否则发起请求并将响应写入 IndexedDB
      return fetch(event.request.clone()).then(function(response) {
        if (response.status < 400) {
          // 克隆响应对象，避免出现只能使用一次的问题
          var responseToCache = response.clone();
          // 将响应写入 IndexedDB
          idb.open('my-db').then(function(db) {
            var tx = db.transaction('my-store', 'readwrite');
            var store = tx.objectStore('my-store');
            store.put(responseToCache, event.request.url);
            // 最多储存 50 条数据
            store.openCursor(null, 'prev').then(function(cursor) {
              return cursor.advance(50);
            }).then(function deleteRest(cursor) {
              if (!cursor) return;
              cursor.delete();
              return cursor.continue().then(deleteRest);
            });
          });
        }
        return response;
      });
    })
  );
});