JavaScript中的 `Service Worker`

Articles

本文将解释JavaScript中 Service Worker 的概念。

我们将从 Service Worker 的基础知识到实际缓存控制逐步进行讲解。

YouTube Video

offline.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>Offline</title>
 6</head>
 7<body>
 8  <h1>You are offline</h1>
 9  <p>This is the offline fallback page.</p>
10</body>
11</html>

style.css

1body {
2  font-family: sans-serif;
3  background-color: #f0f0f0;
4  padding: 20px;
5}
6h1 {
7  color: #333;
8}

javascript-service-worker.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <div class="container">
111        <h2>HTML Sample</h2>
112        <button id="fetchBtn">Fetch Test</button>
113    </div>
114
115    <script>
116        // Override console.log to display messages in the #output element
117        (function () {
118            // Override console.log
119            const originalLog = console.log;
120            console.log = function (...args) {
121                originalLog.apply(console, args);
122                const message = document.createElement('div');
123                message.textContent = args.map(String).join(' ');
124                output.appendChild(message);
125            };
126
127            // Override console.error
128            const originalError = console.error;
129            console.error = function (...args) {
130                originalError.apply(console, args);
131                const message = document.createElement('div');
132                message.textContent = args.map(String).join(' ');
133                message.style.color = 'red'; // Color error messages red
134                output.appendChild(message);
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-service-worker.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-service-worker.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-service-worker.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

JavaScript中的 `Service Worker`

Service Worker 是一种介于浏览器和网络之间的JavaScript功能，可实现请求缓存和离线支持。它是PWA（渐进式Web应用）的核心技术，使Web应用拥有类似原生应用的体验。

什么是 `Service Worker`？

Service Worker 是在浏览器后台线程中运行的JavaScript文件。它在与页面不同的线程上运行，无法访问UI，但可以拦截网络请求、管理缓存和处理推送通知。

Service Worker 的主要特点包括：。

除localhost外，仅在HTTPS环境下工作。
它使用基于Promise的异步API。
它基于事件驱动，使用如 install、activate、fetch 和 push 等事件。

注册 `Service Worker`

首先，让我们编写在浏览器中注册 Service Worker 的代码。

 1if ('serviceWorker' in navigator) {
 2    window.addEventListener('load', () => {
 3        navigator.serviceWorker.register('/sw.js')
 4        .then(registration => {
 5            console.log(
 6                'Service Worker registered with scope:',
 7                registration.scope
 8            );
 9        })
10        .catch(error => {
11            console.error('Service Worker registration failed:', error);
12        });
13    });
14}

解释

使用 navigator.serviceWorker.register() 注册 /sw.js（Service Worker 文件）。
在注册过程中，可以使用 then 处理成功，catch 处理错误。
registration.scope 表示受 Service Worker 影响的路径范围（作用域）。
默认情况下，作用域是已注册文件（在此例中为 /sw.js）所在的目录及其子目录。

`Service Worker` 作用域

如果想要限制作用域，可以通过 register 的第二个参数指定 scope。

1navigator.serviceWorker.register('/sw.js', { scope: '/app/' })
2.then(registration => {
3    console.log(
4        'Service Worker registered with scope:',
5        registration.scope
6    );
7});

解释

通过此设置，只有 /app/ 下的页面会被 Service Worker 控制。

创建 `Service Worker` 文件

接下来，创建一个名为 sw.js 的文件并实现基本事件。

1// sw.js
2const CACHE_NAME = 'my-cache-v1';
3const urlsToCache = [
4    '/',
5    '/index.html',
6    '/styles.css',
7    '/script.js',
8    '/offline.html'
9];

此代码定义了要缓存的资源列表。

各事件的作用和机制

`install`

 1// Install event (initial caching)
 2self.addEventListener('install', event => {
 3    console.log('[ServiceWorker] Install');
 4    event.waitUntil(
 5        caches.open(CACHE_NAME).then(cache => {
 6            console.log('[ServiceWorker] Caching app shell');
 7            return cache.addAll(urlsToCache);
 8        })
 9    );
10});

当首次注册 Service Worker 时，将触发 self.addEventListener('install')。在此阶段，会预缓存所需文件。

`activate`

 1// Activation event (delete old caches)
 2self.addEventListener('activate', event => {
 3    console.log('[ServiceWorker] Activate');
 4    event.waitUntil(
 5        caches.keys().then(keyList => {
 6            return Promise.all(keyList.map(key => {
 7                if (key !== CACHE_NAME) {
 8                    console.log('[ServiceWorker] Removing old cache:', key);
 9                    return caches.delete(key);
10                }
11            }));
12        })
13    );
14    return self.clients.claim();
15});

在 activate 事件中，会删除旧缓存以优化存储空间。只保留新版本的缓存。

`fetch`

1// Fetch event (cache-first strategy)
2self.addEventListener('fetch', event => {
3  console.log('[ServiceWorker] Fetch', event.request.url);
4    event.respondWith(
5        caches.match(event.request).then(response => {
6            return response || fetch(event.request).catch(() => caches.match('/offline.html'));
7        })
8    );
9});

所有HTTP请求都会被拦截——如果存在缓存版本，则返回缓存，否则从网络获取。当离线时，会返回备用页面（例如 offline.html）。

正在确认操作

让我们实际检查一下 Service Worker 是如何工作的。

 1document.getElementById('fetchBtn').addEventListener('click', () => {
 2    fetch('/style.css')
 3        .then(response => response.text())
 4        .then(data => {
 5            console.log('Fetched data:', data);
 6        })
 7        .catch(error => {
 8            console.error('Fetch failed:', error);
 9        });
10});

在这里，我们通过点击测试按钮来检查 Service Worker 的注册情况以及获取资源时的行为。

缓存策略示例

以下是常见的缓存策略：。

优先缓存（Cache First）

以下是优先缓存策略的实现示例：。

1self.addEventListener('fetch', event => {
2    event.respondWith(
3        caches.match(event.request).then(response => {
4            return response || fetch(event.request);
5        })
6    );
7});

此代码实现了缓存优先策略，即如果缓存中有请求的资源，则直接返回；如果没有，则从网络获取。

优先网络（Network First）

以下是优先网络策略的实现示例：。

 1self.addEventListener('fetch', event => {
 2    event.respondWith(
 3        fetch(event.request)
 4            .then(response => {
 5                return caches.open(CACHE_NAME).then(cache => {
 6                    cache.put(event.request, response.clone());
 7                    return response;
 8                });
 9            })
10            .catch(() => caches.match(event.request))
11    );
12});

此代码实现了网络优先策略，即首先尝试从网络获取请求的资源，如果获取失败，则从缓存中获取。

仅缓存样式和JavaScript，API实时访问

以下是只缓存样式和JavaScript、API实时访问的实现示例：。

 1self.addEventListener('fetch', event => {
 2    if (event.request.url.includes('/api/')) {
 3        // Fetch API responses in real-time without caching
 4        return;
 5    }
 6
 7    // Use cache-first strategy for static files
 8    event.respondWith(
 9        caches.match(event.request).then(response => {
10            return response || fetch(event.request);
11        })
12    );
13});

此代码对API请求始终进行实时访问，并对样式表和JavaScript等静态文件采用缓存优先策略。

更新流程

Service Worker 的更新流程如下：。

检测到新的 sw.js。
触发 install 事件。
等待上一个 Service Worker 空闲。
触发 activate 事件。
切换到新的Service Worker。
触发 controllerchange 事件。

更新检测

Service Worker 安装后，旧版本会一直被使用，直到下次访问。为了应用更新，通常会编写检测更新并重新加载页面的代码。

1navigator.serviceWorker.addEventListener('controllerchange', () => {
2    window.location.reload();
3});

controllerchange 事件在 Service Worker 的控制器（即控制当前页面的 Service Worker）发生变化时被触发。
已经打开的页面会继续使用当前的 Service Worker，新安装的 Service Worker 不会立刻在这些页面生效。因此，通常会利用 controllerchange 事件来检测新的控制器是否已激活，然后通过重新加载页面来立即应用更新。

注意事项与最佳实践

使用 Service Worker 时，请注意以下几点：。

需要HTTPS 由于安全限制，除 localhost 外不能在 http:// 上运行。
哈希文件名 缓存名称可以包含文件名、URL和版本信息。
与客户端的通信 通过 postMessage 实现 Service Worker 与页面JavaScript之间的通信。

总结

Service Worker 是网页实现离线支持和性能提升的关键技术。通过掌握安装、激活和请求处理的基本流程，并实现合适的缓存策略，可以开发出更高质量的Web应用程序。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。请也查看我们的YouTube频道。

YouTube Video

JavaScript中的Web Workers JavaScript中的共享工作者

JavaScript中的 `Service Worker`

YouTube Video

JavaScript中的 Service Worker

什么是 Service Worker？

注册 Service Worker

解释

Service Worker 作用域

解释

创建 Service Worker 文件

各事件的作用和机制

install

activate

fetch

正在确认操作

缓存策略示例

优先缓存（Cache First）

优先网络（Network First）

仅缓存样式和JavaScript，API实时访问

更新流程

更新检测

注意事项与最佳实践

总结

YouTube Video

JavaScript中的 `Service Worker`

什么是 `Service Worker`？

注册 `Service Worker`

`Service Worker` 作用域

创建 `Service Worker` 文件

`install`

`activate`

`fetch`