Service Worker 开发者工具

成熟的开发工具特性

• 命令行，构建工具
• 注入已有 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

不能存在这种情况