成熟的开发工具特性
- 命令行,构建工具
- 注入已有 Service Worker
- 生成全新 Service Worker
sw-precache 预缓存
什么是预缓存
- App Shell 所需静态资源
- CacheFirst 缓存策略
配置
// webpack.config.js
new SWPrecacheWebpackPlugin({
cacheId: 'sw-tools',
filename: 'service-worker.js'
})
sw-tollbox 动态缓存
什么是动态缓存
- 动态内容
- API
- 第三方资源
- 用户头像
- …..
配置
// webpack.config.js
new SWPrecacheWebpackPlugin({
cacheId: 'sw-tools',
filename: 'service-worker.js',
runtimeCaching: [{
urlPattern: '/.*\.png$',
handler: 'networkFirst'
}]
})
workbox 集大成者
适用于复杂的 Service Worker
// webpack.config.js
new WorkerboxWebpackPlugin({
swSrc: path.resolve(__dirname, 'src/service-worker.js'), // 已有 Service Worker
swDest: 'service-worker.js', // 目标 Service Worker 的名字
exclude: [/\.png$/], // 图片不加入缓存列表
importWorkerboxFrom: 'local' // 使用本地的 Workbox
})
跨域请求的问题
跨域时得到的是一个 Opaque Response(不透明的响应),无法读取响应的内容和状态码,也就是说不知道响应的内容也不知道响应的结果(是否成功)。
解决方案
- 对于服务器端做了 CORS 配置的
使用 CORS(跨域资源共享)
<img crossorigin="anonymous" src="https://cdn.xxx.com/lib.min.js">
- 没有在服务器端配置 CORS
不能存在这种情况