官方workbox

淘系前端之workbox

workbox-webpack-plugin

3-1.缓存策略

Workbox 策略

TIP

GenerateSW 模式默认使用的是 workbox.precaching.precacheAndRoute 方法，而该方法默认是 CacheFirst 策略。

1.CacheOnly

CacheOnly 策略从缓存中获取资源，如果缓存中找不到资源，则返回 404。

import { registerRoute } from 'workbox-routing'
import { CacheOnly } from 'workbox-strategies'

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly())

2.NetworkOnly

NetworkOnly 策略从网络获取资源，如果网络请求失败，则返回 404。

import { registerRoute } from 'workbox-routing'
import { NetworkOnly } from 'workbox-strategies'

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly())

3.CacheFirst

CacheFirst 策略从缓存中获取资源，如果缓存中找不到资源，则从网络获取资源。

import { registerRoute } from 'workbox-routing'
import { CacheFirst } from 'workbox-strategies'

registerRoute(({request}) => request.destination === 'style', new CacheFirst())

4.NetworkFirst

NetworkFirst 策略从网络获取资源，如果网络请求失败，则从缓存中获取资源。

import { registerRoute } from 'workbox-routing'
import { NetworkFirst } from 'workbox-strategies'

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
)

5.StaleWhileRevalidate

StaleWhileRevalidate 策略从缓存中获取资源，如果缓存中找不到资源，则从网络获取资源，如果网络请求失败，则返回缓存中的资源。

import { registerRoute } from 'workbox-routing'
import { StaleWhileRevalidate } from 'workbox-strategies'

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
)

3-2.workbox-webpack-plugin

workbox-webpack-plugin 是一个 Webpack 插件，用于生成 Service Worker 文件。

它支持两种模式：

1. GenerateSW（默认值）
2. InjectManifest

官方介绍如何选择 GenerateSW 或者 InjectManifest 模式。

简单说一下我对这两种模式的理解：

1. GenerateSW：在该模式下，workbox-webpack-plugin 会自动生成 precache-manifest.js 和 Service Worker 文件，且该 Service Worker 文件内置了对于 precache-manifest.js 文件的处理逻辑。（很方便开发者使用默认逻辑，但缺点是不支持自定义 Service Worker 逻辑）。

2. InjectManifest：在该模式下，workbox-webpack-plugin 只会生成 precache-manifest.js，因此开发者需要手动声明 swSrc 配置以自定义 Service Worker 文件逻辑。workbox-webpack-plugin 会自动利用 importScripts 方法将 precache-manifest.js 注入到自定义 Service Worker 文件中。