Service Work离线体验与性能优化

Service Work离线体验与性能优化

一、什么是 Service Worker？

Service Worker是一种可编程的网络代理，允许你拦截和处理惩罚应用发出的全部网络请求，包括拦截和处理惩罚网络请求、管理缓存和处理惩罚推送关照等。它使得开辟者能够在客户端实现强盛的新功能，比如离线支持、推送关照以及缓存管理。Service Worker 运行在独立于主欣赏器进程的背景下，因此不会影响页面的性能。它还能够为网页或应用程序提供雷同于本地应用的特性，它的重要目的是增强 Web 应用的离线体验和性能。
二、 Service Worker的应用场景

• 离线支持：通过缓存静态资源和动态内容，确保应用在没有网络连接时仍然可以使用
  
• 缓存管理：提高应用性能，通过缓存减少网络请求次数和加快页面加载速率。
  
• 推送关照：Service Worker 可以处理惩罚推送关照，即使用户没有打开应用也能接收消息。
  

三、Service Worker的特点

• 独立于主线程： Service Worker 运行在独立的线程中，不会阻塞主页面的执行，是后台运行的脚本。
  
• 生命周期管理：Service Worker 有安装、激活和更新等生命周期变乱，被install后就永远存在，除非被手动卸载。
  
• 跨域与安全限制：同源战略，必须是https的协议才气使用。
  
• 不能直接利用dom：由于Service Worker是个独立于网页运行的脚本。
  
• 可拦截请求和返回，缓存文件。Service Worker可以通过fetch这个api，来拦截网络和处理惩罚网络请求，再共同cacheStorage来实现web页面的缓存管理以及与前端postMessage通讯。
  

四、Service Worker的生命周期

当一个Service Worker被注册成功后，它将开始它的生命周期，我们对Service Worker的利用一般都是在其生命周期里面进行的。Service Worker的生命周期分为这么几个状态 安装中, 安装后, 激活中, 激活后, 废弃。

• 安装( Installing )： 这个状态发生在 Service Worker 注册之后，表示开始安装，这个状态会触发 install 变乱，一般会在install变乱的回调里面进行静态资源的离线缓存， 如果这些静态资源缓存失败了，那 Service Worker 安装就会失败，生命周期停止。
  
• 安装后( Installed )： 当成功捕获缓存到的资源时，Service Worker 会变为这个状态，当此时没有其他的Service Worker 线程在工作时，会立即进入激活状态，如果此时有正在工作的Service Worker 工作线程，则会等候其他的 Service Worker 线程被关闭后才会被激活。可以使用 self.skipWaiting() 方法强制正在等候的servicework工作线程进入激活状态。
  
• 激活( Activating )： 在这个状态下会触发activate变乱，在activate 变乱的回调中去清理旧版缓存。
  
• 激活后( Activated )： 在这个状态下，servicework会取得对整个页面的控制
  
• 废弃状态 ( redundant )： 这个状态表示一个 Service Worker 的生命周期结束。新版本的 Service Worker 替换了旧版本的 Service Worker会出现这个状态
  

五、Service Worker的缓存机制

Service Worker 技术不可或缺的一个方面是 Cache 接口，它是一种完全独立于 HTTP 缓存的缓存机制。可在 Service Worker 作用域和主线程作用域内访问 Cache 接口。
HTTP缓存会受到 HTTP 标头中指定的缓存指令的影响，而 Cache 接口可通过 JavaScript 进行编程。这意味着，网络请求的响应可以基于最得当指定网站的任何逻辑。例如：

• 在第一次请求时将静态资源存储在缓存中，并且仅为每个后续请求从缓存中提供这些资源
  
• 将网页标记存储在缓存中，但仅在离线场景中提供缓存中的标记。
  
• 从缓存中为某些资产提供过期的响应，但要在后台通过网络对其进行更新。
  
• 从网络流式传输部门内容，并将其与缓存中的 App Shell 组合起来，以提升感知性能。
  

六、Service Worker的简朴素践

• 欣赏器兼容性检查
  

   首先，在开始使用 Service Worker 之前，你必要确保用户的欣赏器支持这项技术。Service Worker 对象存在于navigator对象下，可以通过以下代码来检查

1. if ('serviceWorker' in navigator) {
2.   // 浏览器支持 Service Worker
3.   
4. } else {
5.   console.log('Service Worker not supported');
6. }

复制代码

• 注册Service Worker
  

   注册是启动 Service Worker 的第一步。通常是在主应用中通过 JavaScript 来完成这个过程，在主线程中调用navigator.serviceWorker.register()方法来注册 Service Worker：
    register 方法接受两个参数
第一个参数表示ServiceWork.js相对于origin的路径
第二个参数是 Serivce Worker 的设置项，可选填，其中比力重要的是 scope 属性，用来指定你想让 service worker 控制的内容的目次。 默认值为servicework.js所在的目次。这个属性所表示的路径不能在 service worker 文件的路径之上，默认是 Serivce Worker 文件所在的目次。 成功注册或返回一个promise。

1. if ('serviceWorker' in navigator) {
2.   // 浏览器支持 Service Worker
3.    window.addEventListener('load', () => {
4.      navigator.serviceWorker
5.           .register('/service-worker.js')
6.           .then((registration) => {
7.             console.log('Service Worker registered with scope:', registration.scope)
8.           })
9.           .catch((error) => {
10.             console.error('Service Worker registration failed:', error)
11.           })
12. })
13. } else {
14.   console.log('Service Worker not supported');
15. }

复制代码

  此代码在主线程上运行，并执行以下利用：
1、由于用户初次访问网站发生在没有注册的 Service Worker 的情况下， 等到页面完全加载后再注册一个。 这样可以在 Service Worker 预缓存任何内容时避免带宽争用。
2、进行快速检查有助于避免在不支持此功能的欣赏器出现错误。
3、当页面完全加载且支持 Service Worker 时，注册 /service-worker.js。
  

• Service Worker-安装（Installing）
  

   安装变乱发生在 Service Worker 初次安装时，每个 Service Worker 仅调用一次 install，并且在更新之前不会再次触发。

1. self.addEventListener('install', event => {
2.   event.waitUntil(
3.     caches.open('缓存版本ID').then(cache => {
4.       return cache.addAll([
5.         '/',
6.                   ...
7.       ]);
8.     })
9.   );
10. });

复制代码

  此代码会创建一个新的 Cache 实例并预缓存资产。
此处重点关注：event.waitUntil变乱
event.waitUntil 接受 promise； 并等候该 promise 得到办理。 该 promise 执行两项异步利用：
创建名为 ‘缓存版本ID’ 的新 Cache 实例。
创建缓存后 资源网址数组使用其异步缓存资源预缓存 addAll 方法。
如果传递给 event.waitUntil 的 promise 已拒绝。 如果发生这种情况，Service Worker 会被丢弃。
  

• Service Worker-激活
  

   如果注册和安装成功， Service Worker 激活，并且其状态变为 ‘activating’ ，你可以在这里执行清理旧版本资源的利用：

1. self.addEventListener('activate', event => {
2.   const cacheWhitelist = ['缓存版本ID'];
3.   event.waitUntil(
4.     caches.keys().then(cacheNames => {
5.       return Promise.all(
6.         cacheNames.map(cacheName => {
7.           if (cacheWhitelist.indexOf(cacheName) === -1) {
8.             return caches.delete(cacheName);
9.           }
10.         })
11.       );
12.     })
13.   );
14. });

复制代码

• Service Worker-捕获 Fetch
  

   通过监听Service Worker的 fetch 变乱来拦截网络请求，
调用 event 上的 respondWith() 方法来劫持当前servicework控制域下的 HTTP 请求，该方法会直接返回一个Promise 效果 ，这个效果就会是http请求的响应。上面代码中就一个简朴的逻辑，先劫持http请求，然后看看缓存中是否有这个请求的资源，如果有则直接返回，如果没有就去请求服务器上的资源。 event.respondWith 方法只能在 Service Worker 的 fetch 变乱中使用。

1. self.addEventListener('fetch', event => {
2.   event.respondWith(
3.     caches.match(event.request).then(response => {
4.       if (response) {
5.         console.log('Serving from cache:', event.request.url);
6.         return response;
7.       }
8.       console.log('Fetching from network:', event.request.url);
9.       return fetch(event.request).then(networkResponse => {
10.         if (networkResponse && networkResponse.ok) {
11.           console.log('Caching new response:', event.request.url);
12.           return caches.open('f69905188ac970f1').then(cache => {
13.             cache.put(event.request, networkResponse.clone());
14.             return networkResponse;
15.           });
16.         }
17.         throw new Error('Network response not ok');
18.       }).catch(error => {
19.         console.error('Fetch failed:', error);
20.         throw error;
21.       });
22.     })
23.   );
24. });

复制代码

  

• 开始：Service Worker监听到fetch变乱。
  
• 缓存中是否存在请求资源：检查缓存中是否有匹配的请求资源。
  
• 从缓存返回资源：如果缓存中有匹配资源，直接返回该资源。
  
• 发起网络请求：如果缓存中没有匹配资源，则发起网络请求。
  
• 网络请求是否成功：检查网络请求是否成功。
  
• 响应状态是否为OK：检查网络响应的状态码是否为200（OK）。
  
• 缓存新响应：如果网络请求成功且响应状态为OK，则将响应缓存。
  
• 抛堕落误：如果响应状态不是OK，则抛堕落误。
  
• 捕获错误并抛出：如果网络请求失败，则捕获错误并抛出。
  
• 结束：流程结束。
  

  七、Service Worker资源缓存-插件自动生成

   通过上述资料可知资料缓存必要设置缓存ID和所必要的缓存文件路径，而每次打包的文件名都是混淆之后的，人工写是非常不实际，以是我们可以通过插件帮我们自动生成Service Worker文件自动插入到dist目次下
    此处我是采用vite提供的插件钩子函数拿到构建后的文件列表，自动生成service-worker.js

1. import path from 'path'
2. import * as fs from 'fs'
3. import * as crypto from 'crypto'
5. // 定义插件选项类型
6. interface ManifestPluginOptions {
7.   outputPath: string
8.   version?: string
9.   serviceWorkerFileName?: string
10. }
12. export default function ServiceWorkerManifestPlugin(options: ManifestPluginOptions) {
13.   const { outputPath, version, serviceWorkerFileName } = options
15.   // 生成随机版本号
16.   const generateRandomVersion = (): string => {
17.     return crypto.randomBytes(8).toString('hex')
18.   }
20.   const manifestVersion = version || generateRandomVersion()
22.   // 使用默认的 service-worker.js 文件名，如果没有传入自定义文件名
23.   const serviceWorkerPath = `/${serviceWorkerFileName || 'service-worker.js'}`
25.   // 递归遍历目录并获取所有文件路径
26.   const getAllFiles = (dirPath: string, relativePath: string = ''): string[] => {
27.     let files: string[] = []
28.     const entries = fs.readdirSync(dirPath, { withFileTypes: true })
30.     for (const entry of entries) {
31.       const fullPath = path.join(dirPath, entry.name)
32.       const relativeFullPath = path.join(relativePath, entry.name)
34.       if (entry.isDirectory()) {
35.         files = files.concat(getAllFiles(fullPath, relativeFullPath))
36.       } else {
37.         files.push(`/${relativeFullPath}`)
38.       }
39.     }
41.     return files
42.   }
44.   // 生成 service-worker.js 文件内容
45.   const generateServiceWorkerContent = (cachedFiles: string[], manifestVersion: string): string => {
46.     return `
47. self.addEventListener('install', event => {
48.   event.waitUntil(
49.     caches.open('${manifestVersion}').then(cache => {
50.       return cache.addAll([
51.         ${cachedFiles.map((file) => `'${file}'`).join(',\n')}
52.       ]);
53.     })
54.   );
55. });
57. //Service Worker监听到fetch事件。
58. self.addEventListener('fetch', event => {
59.   event.respondWith(
60.   // 缓存中是否存在请求资源：检查缓存中是否有匹配的请求资源。
61.     caches.match(event.request).then(response => {
62.       // 从缓存返回资源：如果缓存中有匹配资源，直接返回该资源。
63.       if (response) {
64.         console.log('Serving from cache:', event.request.url);
65.         return response;
66.       }
67.       console.log('Fetching from network:', event.request.url);
69.       // 发起网络请求：如果缓存中没有匹配资源，则发起网络请求。
70.       return fetch(event.request).then(networkResponse => {
71.         // 缓存新资源：如果网络请求成功，则将新资源缓存。
72.         if (networkResponse && networkResponse.ok) {
73.           console.log('Caching new response:', event.request.url);
74.           // 缓存新响应：如果网络请求成功且响应状态为OK，则将响应缓存。
75.           return caches.open('${manifestVersion}').then(cache => {
76.             cache.put(event.request, networkResponse.clone());
77.             return networkResponse;
78.           });
79.         }
80.         // 如果响应状态不是OK，则抛出错误。
81.         throw new Error('Network response not ok');
82.       }).catch(error => {
83.         console.error('Fetch failed:', error);
84.         throw error;
85.       });
86.     })
87.   );
88. });
90. self.addEventListener('activate', event => {
91.   const cacheWhitelist = ['${manifestVersion}'];
93.   event.waitUntil(
94.     caches.keys().then(cacheNames => {
95.       return Promise.all(
96.         cacheNames.map(cacheName => {
97.           if (cacheWhitelist.indexOf(cacheName) === -1) {
98.             return caches.delete(cacheName);
99.           }
100.         })
101.       );
102.     })
103.   );
104. });
105. `
106.   }
108.   // 修改 index.html 文件
109.   const modifyIndexHtml = (indexPath: string, serviceWorkerPath: string): void => {
110.     try {
111.       let indexContent = fs.readFileSync(indexPath, 'utf-8')
113.       // 确保 <html> 标签存在
114.       if (indexContent.includes('<html')) {
115.         // 添加 Service Worker 注册脚本
116.         const serviceWorkerRegistrationScript = `
117. <script>
118.   if ('serviceWorker' in navigator) {
119.     // 浏览器支持 Service Worker
120.     window.addEventListener('load', () => {
121.       navigator.serviceWorker.register('${serviceWorkerPath}')
122.         .then(registration => {
123.           console.log('Service Worker registered with scope:', registration.scope);
124.         })
125.         .catch(error => {
126.           console.error('Service Worker registration failed:', error);
127.         });
128.     });
129.   } else {
130.     console.log('Service Worker not supported');
131.   }
132. </script>
133. `
135.         // 将脚本插入到 </head> 标签之前
136.         indexContent = indexContent.replace('</head>', `${serviceWorkerRegistrationScript}</head>`)
137.         fs.writeFileSync(indexPath, indexContent)
138.         console.log('index.html modified successfully.')
139.       } else {
140.         console.warn('index.html does not contain a <html> tag.')
141.       }
142.     } catch (error) {
143.       console.error('Failed to modify index.html:', error)
144.     }
145.   }
147.   return {
148.     name: 'manifest-plugin', // 必须的，将会在 warning 和 error 中显示
149.     writeBundle() {
150.       try {
151.         const cachedFiles = getAllFiles(outputPath)
153.         // 确保 service-worker.js 也被缓存
154.         if (!cachedFiles.includes(serviceWorkerPath)) {
155.           cachedFiles.push(serviceWorkerPath)
156.         }
158.         // 生成 service-worker.js 文件内容
159.         const serviceWorkerContent = generateServiceWorkerContent(cachedFiles, manifestVersion)
161.         // 写入 service-worker.js 文件
162.         const serviceWorkerFilePath = path.join(outputPath, serviceWorkerPath.replace(/^\//, ''))
163.         fs.writeFileSync(serviceWorkerFilePath, serviceWorkerContent)
164.         console.log('service-worker.js generated successfully.')
166.         // 修改 index.html 文件
167.         const indexPath = path.join(outputPath, 'index.html')
168.         if (fs.existsSync(indexPath)) {
169.           modifyIndexHtml(indexPath, serviceWorkerPath)
170.         } else {
171.           console.warn('index.html not found in the output directory.')
172.         }
173.       } catch (error) {
174.         console.error('Failed to write bundle:', error)
175.       }
176.     },
177.   }
178. }

复制代码

八、Service Worker调试与监控

   通过Chrome DevTools可看到我们的文件被正确的缓存，且通过Application工具管理我们的Service Workers

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。