Service Work离线体验与性能优化 - ToB企服应用市场:ToB评测及商务社交产业平台

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

复制代码

if ('serviceWorker' in navigator) {
// 浏览器支持 Service Worker
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then((registration) => {
console.log('Service Worker registered with scope:', registration.scope)
})
.catch((error) => {
console.error('Service Worker registration failed:', error)
})
})
} else {
console.log('Service Worker not supported');
}

复制代码

self.addEventListener('install', event => {
event.waitUntil(
caches.open('缓存版本ID').then(cache => {
return cache.addAll([
'/',
...
]);
})
);
});

复制代码

self.addEventListener('activate', event => {
const cacheWhitelist = ['缓存版本ID'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});

复制代码

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
console.log('Serving from cache:', event.request.url);
return response;
}
console.log('Fetching from network:', event.request.url);
return fetch(event.request).then(networkResponse => {
if (networkResponse && networkResponse.ok) {
console.log('Caching new response:', event.request.url);
return caches.open('f69905188ac970f1').then(cache => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
}
throw new Error('Network response not ok');
}).catch(error => {
console.error('Fetch failed:', error);
throw error;
});
})
);
});

复制代码

import path from 'path'
import * as fs from 'fs'
import * as crypto from 'crypto'
// 定义插件选项类型
interface ManifestPluginOptions {
outputPath: string
version?: string
serviceWorkerFileName?: string
}
export default function ServiceWorkerManifestPlugin(options: ManifestPluginOptions) {
const { outputPath, version, serviceWorkerFileName } = options
// 生成随机版本号
const generateRandomVersion = (): string => {
return crypto.randomBytes(8).toString('hex')
}
const manifestVersion = version || generateRandomVersion()
// 使用默认的 service-worker.js 文件名，如果没有传入自定义文件名
const serviceWorkerPath = `/${serviceWorkerFileName || 'service-worker.js'}`
// 递归遍历目录并获取所有文件路径
const getAllFiles = (dirPath: string, relativePath: string = ''): string[] => {
let files: string[] = []
const entries = fs.readdirSync(dirPath, { withFileTypes: true })
for (const entry of entries) {
const fullPath = path.join(dirPath, entry.name)
const relativeFullPath = path.join(relativePath, entry.name)
if (entry.isDirectory()) {
files = files.concat(getAllFiles(fullPath, relativeFullPath))
} else {
files.push(`/${relativeFullPath}`)
}
}
return files
}
// 生成 service-worker.js 文件内容
const generateServiceWorkerContent = (cachedFiles: string[], manifestVersion: string): string => {
return `
self.addEventListener('install', event => {
event.waitUntil(
caches.open('${manifestVersion}').then(cache => {
return cache.addAll([
${cachedFiles.map((file) => `'${file}'`).join(',\n')}
]);
})
);
});
//Service Worker监听到fetch事件。
self.addEventListener('fetch', event => {
event.respondWith(
// 缓存中是否存在请求资源：检查缓存中是否有匹配的请求资源。
caches.match(event.request).then(response => {
// 从缓存返回资源：如果缓存中有匹配资源，直接返回该资源。
if (response) {
console.log('Serving from cache:', event.request.url);
return response;
}
console.log('Fetching from network:', event.request.url);
// 发起网络请求：如果缓存中没有匹配资源，则发起网络请求。
return fetch(event.request).then(networkResponse => {
// 缓存新资源：如果网络请求成功，则将新资源缓存。
if (networkResponse && networkResponse.ok) {
console.log('Caching new response:', event.request.url);
// 缓存新响应：如果网络请求成功且响应状态为OK，则将响应缓存。
return caches.open('${manifestVersion}').then(cache => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
}
// 如果响应状态不是OK，则抛出错误。
throw new Error('Network response not ok');
}).catch(error => {
console.error('Fetch failed:', error);
throw error;
});
})
);
});
self.addEventListener('activate', event => {
const cacheWhitelist = ['${manifestVersion}'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
`
}
// 修改 index.html 文件
const modifyIndexHtml = (indexPath: string, serviceWorkerPath: string): void => {
try {
let indexContent = fs.readFileSync(indexPath, 'utf-8')
// 确保 <html> 标签存在
if (indexContent.includes('<html')) {
// 添加 Service Worker 注册脚本
const serviceWorkerRegistrationScript = `
<script>
if ('serviceWorker' in navigator) {
// 浏览器支持 Service Worker
window.addEventListener('load', () => {
navigator.serviceWorker.register('${serviceWorkerPath}')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
});
} else {
console.log('Service Worker not supported');
}
</script>
`
// 将脚本插入到 </head> 标签之前
indexContent = indexContent.replace('</head>', `${serviceWorkerRegistrationScript}</head>`)
fs.writeFileSync(indexPath, indexContent)
console.log('index.html modified successfully.')
} else {
console.warn('index.html does not contain a <html> tag.')
}
} catch (error) {
console.error('Failed to modify index.html:', error)
}
}
return {
name: 'manifest-plugin', // 必须的，将会在 warning 和 error 中显示
writeBundle() {
try {
const cachedFiles = getAllFiles(outputPath)
// 确保 service-worker.js 也被缓存
if (!cachedFiles.includes(serviceWorkerPath)) {
cachedFiles.push(serviceWorkerPath)
}
// 生成 service-worker.js 文件内容
const serviceWorkerContent = generateServiceWorkerContent(cachedFiles, manifestVersion)
// 写入 service-worker.js 文件
const serviceWorkerFilePath = path.join(outputPath, serviceWorkerPath.replace(/^\//, ''))
fs.writeFileSync(serviceWorkerFilePath, serviceWorkerContent)
console.log('service-worker.js generated successfully.')
// 修改 index.html 文件
const indexPath = path.join(outputPath, 'index.html')
if (fs.existsSync(indexPath)) {
modifyIndexHtml(indexPath, serviceWorkerPath)
} else {
console.warn('index.html not found in the output directory.')
}
} catch (error) {
console.error('Failed to write bundle:', error)
}
},
}
}

复制代码