告别“小恐龙”——Service Worker离线优先策略，让你的网页“丝滑”起飞

各位前端er们，有没有遇到过这样的尴尬？好不容易做出来的精美网页，在网速稍差的环境下就变成了“小恐龙”—— Chrome浏览器的离线提示页面，用户体验瞬间跌入谷底。今天，我就来和大家聊聊如何利用Service Worker，打造一套强大的离线优先策略，让你的网页即使在弱网环境下也能“丝滑”起飞！

什么是Service Worker？别被名字唬住，它其实是个“幕后英雄”

Service Worker本质上是一个运行在浏览器后台的JavaScript脚本，它可以拦截和处理网络请求，缓存资源，推送消息等等。你可以把它想象成一个在你网页和服务器之间的“代理”，负责管理你的网页的资源请求和响应。和传统的Web Worker不同，Service Worker具有拦截网络请求的能力，这使得它能够实现离线优先策略。

离线优先？听起来很高级，其实原理很简单！

所谓离线优先，就是指当用户访问你的网页时，Service Worker会首先检查缓存中是否有所需的资源。如果缓存中有，就直接从缓存中返回，避免了网络请求的延迟。如果缓存中没有，Service Worker才会发起网络请求，并将请求结果缓存起来，以备下次使用。这样一来，即使在离线或者弱网环境下，用户也能快速访问你的网页，获得良好的用户体验。

Cache API：Service Worker的“百宝箱”，缓存资源的秘密武器

要实现离线优先策略，Cache API是必不可少的工具。Cache API提供了一套用于缓存网络请求和响应的接口，Service Worker可以通过Cache API将网页的静态资源（如HTML、CSS、JavaScript、图片等）缓存到浏览器中。可以将Cache API理解为Service Worker的“百宝箱”，所有缓存的资源都存放在这里面。

如何使用Cache API？几个关键步骤，让你轻松上手

打开（Open）缓存：

首先，你需要打开一个缓存。可以使用caches.open()方法来打开一个指定名称的缓存。如果缓存不存在，浏览器会自动创建一个新的缓存。

const cacheName = 'my-app-cache-v1'; // 定义缓存名称
caches.open(cacheName).then(cache => {
    // 缓存打开成功后的操作
});

添加（Add）/ 批量添加（addAll）资源到缓存：

打开缓存后，你可以使用cache.add()方法将单个资源添加到缓存中，或者使用cache.addAll()方法将多个资源批量添加到缓存中。

// 添加单个资源
cache.add('/index.html');
// 批量添加资源
cache.addAll([
    '/css/style.css',
    '/js/main.js',
    '/images/logo.png'
]);

从缓存中匹配（Match）资源：

当Service Worker拦截到网络请求时，可以使用caches.match()方法在缓存中查找与该请求匹配的资源。如果找到匹配的资源，就直接从缓存中返回，否则发起网络请求。

caches.match(event.request).then(response => {
    if (response) {
        // 缓存命中，直接返回缓存中的资源
        return response;
    }
    // 缓存未命中，发起网络请求
    return fetch(event.request);
});

更新（Put）缓存：

当网络请求成功后，可以将请求结果添加到缓存中，以便下次使用。可以使用cache.put()方法将请求和响应添加到缓存中。

fetch(event.request).then(response => {
    // 将响应添加到缓存中
    cache.put(event.request, response.clone());
    return response;
});

删除（Delete）缓存：

当需要更新缓存或者清理过期资源时，可以使用caches.delete()方法删除指定的缓存。

caches.delete('old-cache-v1').then(() => {
    // 缓存删除成功后的操作
});

资源更新与版本控制：让你的缓存“永不过时”

缓存虽然可以提高网页的访问速度，但也带来了一个新的问题：如何保证缓存中的资源是最新的？如果缓存中的资源已经过时，用户可能会看到错误的或者过时的内容。因此，我们需要一套有效的资源更新和版本控制机制，让我们的缓存“永不过时”。

版本号控制：给你的缓存打上“时间戳”

最常用的方法是使用版本号来控制缓存。每次更新资源时，都更新缓存的版本号。当Service Worker激活时，会检查缓存的版本号是否与当前的版本号一致。如果不一致，就删除旧的缓存，创建一个新的缓存，并将新的资源添加到新的缓存中。

const cacheName = 'my-app-cache-v2'; // 更新缓存版本号
const filesToCache = [
    '/index.html',
    '/css/style.css',
    '/js/main.js',
    '/images/logo.png'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    );
});

self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheName !== this.cacheName) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

Cache Busting：让浏览器主动更新资源

Cache Busting是指通过修改资源URL的方式，强制浏览器更新缓存。常用的方法是在资源URL后面添加一个查询参数，例如style.css?v=1.0。每次更新资源时，都更新查询参数的值，浏览器就会认为这是一个新的资源，从而重新请求服务器。

<link rel="stylesheet" href="/css/style.css?v=1.1">
<script src="/js/main.js?v=1.2"></script>

定期更新：让你的缓存保持“新鲜”

可以设置一个定期更新机制，定期检查服务器上的资源是否更新。如果资源更新了，就更新缓存。可以使用setTimeout()或者setInterval()函数来设置定期更新的时间间隔。

setInterval(() => {
    // 检查服务器上的资源是否更新
    fetch('/api/check-update').then(response => {
        if (response.status === 200) {
            // 资源更新了，更新缓存
            caches.delete(cacheName).then(() => {
                caches.open(cacheName).then(cache => {
                    return cache.addAll(filesToCache);
                });
            });
        }
    });
}, 3600000); // 每小时检查一次

常见的离线优先策略：选择最适合你的那一款

不同的网页应用有不同的需求，因此需要选择不同的离线优先策略。下面介绍几种常见的离线优先策略，供你参考：

Cache First（缓存优先）：

这是最简单的离线优先策略。Service Worker会首先检查缓存中是否有所需的资源。如果缓存中有，就直接从缓存中返回。如果缓存中没有，Service Worker才会发起网络请求，并将请求结果缓存起来，以备下次使用。

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request).then(response => {
                caches.open(cacheName).then(cache => {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

适用场景： 适用于静态资源，例如HTML、CSS、JavaScript、图片等。

Network First（网络优先）：

Service Worker会首先发起网络请求。如果网络请求成功，就将请求结果返回，并将请求结果缓存起来，以备下次使用。如果网络请求失败，Service Worker才会检查缓存中是否有所需的资源。如果缓存中有，就直接从缓存中返回。

self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request).then(response => {
            caches.open(cacheName).then(cache => {
                cache.put(event.request, response.clone());
                return response;
            });
        }).catch(() => {
            return caches.match(event.request);
        })
    );
});

适用场景： 适用于需要实时更新的数据，例如新闻、股票行情等。

Stale-While-Revalidate（过时内容先显示，同时后台更新）：

Service Worker会首先从缓存中返回过时的资源。同时，Service Worker会在后台发起网络请求，更新缓存中的资源。下次用户访问时，就可以看到最新的资源。

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            const fetchPromise = fetch(event.request).then(networkResponse => {
                caches.open(cacheName).then(cache => {
                    cache.put(event.request, networkResponse.clone());
                    return networkResponse;
                });
            });
            return response || fetchPromise;
        })
    );
});

适用场景： 适用于对实时性要求不高，但对访问速度要求较高的场景，例如博客文章、商品详情等。

Cache Only（只使用缓存）：

Service Worker只会从缓存中返回资源。如果缓存中没有所需的资源，就返回一个错误。

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
    );
});

适用场景： 适用于完全离线的应用，例如游戏、工具应用等。

Network Only（只使用网络）：

Service Worker只会发起网络请求。如果网络请求失败，就返回一个错误。

self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request)
    );
});

适用场景： 适用于对实时性要求非常高，不需要离线访问的应用，例如在线支付、实时监控等。

实战演练：打造一个简单的离线优先Web应用

下面，我们通过一个简单的例子来演示如何使用Service Worker实现离线优先策略。我们创建一个简单的HTML页面，包含一个标题、一段文本和一张图片。然后，我们创建一个Service Worker，将这些资源缓存起来，并使用Cache First策略来响应网络请求。

创建HTML文件（index.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>离线优先Web应用</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <h1>欢迎来到我的离线Web应用！</h1>
    <p>这是一个简单的离线Web应用示例。</p>
    <img src="/images/logo.png" alt="Logo">
    <script src="/js/main.js"></script>
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js')
                .then(function(registration) {
                    console.log('Service Worker 注册成功，范围:', registration.scope);
                })
                .catch(function(error) {
                    console.log('Service Worker 注册失败:', error);
                });
        }
    </script>
</body>
</html>

创建CSS文件（css/style.css）：

body {
    font-family: sans-serif;
    text-align: center;
}
img {
    width: 200px;
}

创建JavaScript文件（js/main.js）：

console.log('Hello from main.js!');

创建图片文件（images/logo.png）：

你可以使用任何你喜欢的图片作为Logo。

创建manifest文件（manifest.json）：

{
    "name": "离线优先Web应用",
    "short_name": "离线应用",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#fff",
    "theme_color": "#3f51b5",
    "icons": [
        {
            "src": "/images/logo.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

创建Service Worker文件（sw.js）：

const cacheName = 'my-app-cache-v1';
const filesToCache = [
    '/index.html',
    '/css/style.css',
    '/js/main.js',
    '/images/logo.png',
    '/manifest.json'
];

self.addEventListener('install', event => {
    console.log('Service Worker 安装');
    event.waitUntil(
        caches.open(cacheName)
            .then(cache => {
                console.log('Service Worker 缓存资源');
                return cache.addAll(filesToCache);
            })
            .then(() => {
                console.log('Service Worker 资源缓存完成');
                return self.skipWaiting();
            })
            .catch(error => {
                console.error('Service Worker 缓存失败:', error);
            })
    );
});

self.addEventListener('activate', event => {
    console.log('Service Worker 激活');
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheName !== this.cacheName) {
                        console.log('Service Worker 清理旧缓存:', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        }).then(() => {
            console.log('Service Worker 旧缓存清理完成');
            return self.clients.claim();
        })
    );
});

self.addEventListener('fetch', event => {
    console.log('Service Worker 拦截请求:', event.request.url);
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    console.log('Service Worker 缓存命中:', event.request.url);
                    return response;
                }
                console.log('Service Worker 缓存未命中，发起网络请求:', event.request.url);
                return fetch(event.request);
            })
    );
});

部署Web应用：

将所有文件部署到你的Web服务器上。

测试离线访问：

在Chrome浏览器中打开你的Web应用，然后打开开发者工具，切换到“Application”选项卡，选择“Service Workers”，勾选“Offline”复选框，模拟离线环境。刷新页面，你应该仍然能够看到你的Web应用的内容，因为Service Worker已经将资源缓存起来了。

总结：Service Worker，让你的Web应用更上一层楼

通过本文的介绍，相信你已经对Service Worker和离线优先策略有了更深入的了解。Service Worker不仅可以提高Web应用的访问速度，还可以增强Web应用在弱网环境下的可用性，提升用户体验。赶快行动起来，将Service Worker应用到你的Web应用中，让你的Web应用更上一层楼吧！记住，告别“小恐龙”，从Service Worker开始！

告别“小恐龙”——Service Worker离线优先策略，让你的网页“丝滑”起飞

点评评价