Question

使用 rax-plugin-pwa 插件，可以方便快捷的使用 Service Worker 控制缓存，以获得更快的加载速度。

首先，安装 build-plugin-rax-pwa 插件依赖：

$ npm install build-plugin-rax-pwa --save

在工程配置 build.json 中添加 pwa 插件并配置缓存目标：

{
  "plugins": [
    [
      "build-plugin-rax-pwa",
      {
        "serviceWorker": {
          "cacheId": "MyAPP",               // 缓存存储在 CacheStorage 中的 id，默认取应用名称
          "skipWaiting": true,              // 跳过等待，加快 SW 执行，默认 true
          "clientsClaim": false,            // 让没被控制的 clients 受控
          "preCacheUrlList": [],            // 预缓存 url 列表，默认为空
          "ignorePatternList": ["/my-app/ignore.js/i"],       // 不需要缓存的 URL 正则字符串列表
          "savedCachePatternList": ["/my-app/bundle.js/i"],   // 加入缓存的 URL 正则字符串列表，默认为空
          "unregister": false,              // 取消 SW 订阅，默认 false
          "comboPattern": "",               // 匹配 combo url 的正则字符串，默认为空
          "comboSplitSeparator": ",",       // 分割 combo url 分割符，默认 ,
          "htmlLoadingTimeout": 10000       // html 文件加载超时时间，默认 10000
        }
      }
    ]
  ]
}

注意事项

ignorePatternList 和 savedCachePatternList 列表元素为正则字符串，请注意转义。

comboPattern，comboSplitSeparator 两个选项针对以 combo URL 加载的静态资源缓存控制，插件会根据 comboPattern 匹配到静态资源数据并通过 comboSplitSeparator 将资源分割，例如：

• comboPattern： "/\/\?\?(.+)/"

• comboSplitSeparator: ","

• url: "https://g.alicdn.com/??mui/aa/0.1.0/index.js,mui/bb/0.1.0/index.js,mui/cc/0.1.0/index.js,mui/dd/0.1.0/index.js"

将匹配到 ["mui/aa/0.1.0/index.js", "mui/bb/0.1.0/index.js", "mui/cc/0.1.0/index.js", "mui/dd/0.1.0/index.js"]，当资源的请求顺序发生变化而版本无变化时（这在搭建型页面中经常发生），依然可以有效利用之前的缓存。