Service Worker 是在后台运行的脚本，为现代 Web 应用程序提供强大的缓存功能和其他功能。
这些功能为网络浏览器带来了本机应用程序的无缝且用户友好的体验。
Service Worker 是创建渐进式 Web 应用程序 (PWA) 的基本组成部分。
目录
了解 Service Worker
Service Worker 是一种 JavaScript Web Worker，它在后台运行，与主 JavaScript 线程分开，因此它是非阻塞的。 这意味着它不会导致应用程序的用户界面或用户与其交互的延迟或中断。
Service Worker 充当代理服务器——位于 Web 应用程序和网络之间。 它们可以拦截请求和响应、缓存资源并提供离线支持。 这有助于确保网络应用程序感觉更加无缝和用户友好，即使用户不在线也是如此。
Service Worker 的关键应用
Service Worker 有多种应用程序。 他们包括：
- PWA：Service Worker 为渐进式 Web 应用程序提供了强大的功能。 它们执行自定义网络请求、推送通知、离线支持和快速加载。
- 缓存：服务工作人员可以将应用程序的资产（图像、JavaScript 代码和 CSS 文件）存储在浏览器的缓存存储中。 这使得浏览器可以从缓存中检索它们，而不是通过网络从远程服务器获取它们。 因此，内容加载速度更快，这对于互联网连接速度慢或不可靠的用户特别有用。
- 后台同步：即使用户未主动与应用程序交互或应用程序未在浏览器中打开，服务工作人员也可以同步数据并运行其他后台任务。
在 Next.js 应用程序中集成 Service Worker
在深入研究代码之前，了解 Service Worker 的工作原理会有所帮助。 使用 Service Worker 有两个关键阶段：注册和激活。
在第一阶段，浏览器注册 Service Worker。 这是一个简单的例子：
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};registerServiceWorker();
该代码首先检查浏览器是否支持 Service Worker，所有现代 Web 浏览器都支持 Service Worker。 如果存在此支持，它将继续注册位于指定文件路径的服务工作线程。
在激活阶段，您需要通过使用 JavaScript 事件侦听器侦听安装和激活事件来安装和激活 Service Worker。 以下是实现这一目标的方法：
registration.addEventListener("install", () => {
console.log("Service worker installed");
});registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
您可以在注册过程后立即添加此代码。 它应该在 Service Worker 注册过程成功后立即运行。
您可以在其中找到该项目的代码 GitHub 存储库。
创建 Next.js 项目
首先，运行以下命令在本地搭建 Next.js 项目：
npx create-next-app next-project
将 Service Worker 添加到 Next.js 应用程序涉及以下步骤：
添加 Service Worker
首先，注册一个 Service Worker。 按如下方式更新 src/pages/_app.js 文件。 在此文件中包含代码可确保 Service Worker 在应用程序加载时注册并有权访问应用程序的所有资产。
import { useEffect } from 'react';export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
useEffect 钩子在组件安装时触发。 与前面的示例一样，代码首先检查用户的浏览器是否支持 Service Worker。
如果支持存在，它会注册位于指定文件路径的 Service Worker 脚本，并将其范围指定为“/”。 这意味着 Service Worker 可以控制应用程序中的所有资源。 如果需要，您可以提供更细粒度的范围，例如“/products”。
如果注册成功，它会记录一条成功消息及其范围。 如果注册过程中出现错误，代码将捕获它并记录错误消息。
安装并激活 Service Worker
将以下代码添加到新文件 public/service-worker.js 中。
const installEvent = () => {
self.addEventListener('install', () => {
console.log('service worker installed!!!!');
});
};installEvent();
const activateEvent = () => {
self.addEventListener('activate', () => {
console.log('service worker activated!!!');
});
};
activateEvent();
要测试 Service Worker 是否已成功注册、安装和激活，请启动开发服务器并在浏览器中打开您的应用程序。
npm run dev
打开 Chrome 的开发人员工具窗口（或浏览器的等效窗口），然后导航到“应用程序”选项卡。 在 Service Workers 部分下，您应该会看到已注册的 Service Worker。
成功注册、安装和激活 Service Worker 后，您可以实现缓存、后台同步或发送推送通知等多种功能。
使用 Service Worker 缓存资源
在用户设备上缓存应用程序资产可以通过允许更快的访问来提高性能，特别是在互联网连接不可靠的情况下。
要缓存应用程序的资源，请在 service-worker.js 文件中包含以下代码。
const cacheName="test-cache";self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
当用户第一次访问主页时，此代码会检查缓存中是否有针对该请求的缓存响应。 如果存在缓存的响应，服务会将其返回给客户端。
如果不存在缓存的响应，Service Worker 将通过网络从服务器获取资源。 它向客户端提供响应并缓存它以供将来的请求使用。
要查看缓存的资源，请打开开发人员工具中的“应用程序”选项卡。 在“缓存存储”部分下，您应该会看到缓存资源的列表。 您还可以选中 Service Worker 部分下的 Offline 选项并重新加载页面以模拟离线体验。
现在，一旦您访问主页，浏览器将提供缓存存储中存储的资源，而不是尝试发出网络请求来获取数据。
使用 Service Worker 来提高性能
Service Worker 是增强 Next.js 应用程序性能的强大工具。 它们可以缓存资源、拦截请求并提供离线支持，所有这些都可以改善用户体验。
然而，值得注意的是，Service Worker 的实施和管理也可能很复杂。 在使用 Service Worker 之前，仔细考虑它们的潜在优点和缺点非常重要。
