有大佬知道在 umi4 中怎么配置 workbox-webpack-plugin 的 pwa 吗? CRA 中直接成功, 在 umi 一直都没有成功. 缺少 index.html 的配置.

[xxxxue]

如题, 用的 workbox-webpack-plugin 库

umi.js 生成出来的 service-worker.js 一直没有 index.html , 所以断网后还是访问的服务器,

---

.umirc.ts 配置

chainWebpack(memo, args) {
    const { GenerateSW } = require('workbox-webpack-plugin')
    memo.plugin("workbox").use(GenerateSW, [
      {
        skipWaiting: true,
        clientsClaim: true,
      }
    ])
  },

  links: [{ rel: 'manifest', src: '/manifest.json' }],

  scripts: [`if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(registration => {
        console.log('SW registered: ', registration);
        }).catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
        });
    });
  }`],

结果: ( 没有 index.html, 其他的都有)

define(["./workbox-25b15de9"], (function(e) {
	"use strict";
	self.skipWaiting(), e.clientsClaim(), e.precacheAndRoute([{
		url: "/702.async.js",
		revision: "6164c6218eec057292935357aacaa542"
	}, {
		url: "/favicon.ico",
		revision: "24c4628793282e21b09d15baecb23fd3"
	}, {
		url: "/layouts__index.async.js",
		revision: "00285e8c475b8ed859583c6238ef2065"
	}, {
		url: "/manifest.json",
		revision: "e343e185e001939dbaa0085f58e8c18f"
	}, {
		url: "/src__pages__index.async.js",
		revision: "56d34d7addfe5fd7c42ec96c3c63efe1"
	}, {
		url: "/umi.css",
		revision: "18648d5228464a5dfc0c91cc4d7310d5"
	}, {
		url: "/umi.js",
		revision: "6d74b2279eb6d371e3e18788c6cb6888"
	}], {})
}));

Create React App 中一切正常 , (有 index.html , 断网后也正常显示 )

react-app-rewired 配置:

const {
  override,
  addWebpackPlugin
} = require("customize-cra");

const { GenerateSW } = require('workbox-webpack-plugin')

module.exports = override(

  addWebpackPlugin(new GenerateSW({
    skipWaiting: true,
    clientsClaim: true,
  }))

);

结果:

define(["./workbox-25b15de9"], (function(e) {
	"use strict";
	self.skipWaiting(), e.clientsClaim(), e.precacheAndRoute([{
		url: "/index.html",
		revision: "656256153ac2403edbbed85b34f976d1"
	}, {
		url: "/static/css/main.7bd9fd49.css",
		revision: null
	}, {
		url: "/static/js/main.5e037f3e.js",
		revision: null
	}, {
		url: "/static/js/main.5e037f3e.js.LICENSE.txt",
		revision: "b114cc85da504a772f040e3f40f8e46a"
	}], {})
}));

版本号:

"umi": "^4.0.48",
"workbox-webpack-plugin": "^6.5.4"

[fz6m]

因为 umi 4 的 html 不是 webpack 生成的，所以在 webpack 流程里这个插件识别不到。

应该可以自己配额外的文件的，参考 https://developer.chrome.com/docs/workbox/reference/workbox-webpack-plugin/ 给 index.html 这个资源配一下应该就可以了。

[xxxxue]

原来如此, 谢谢大佬,
我这就去研究一下

[geyitu]

大佬，手动配置index.html，他的version无法用workbox自动生成，导致问题，还有别的方案吗

[zhuman90]

precacheAndRoute([
  {
    url: '/index.html',
    revision: null,
  },
]);

registerRoute(new NavigationRoute(createHandlerBoundToURL('/index.html')))

这样虽然可以缓存，但是需要手动维护index.html的revision，不太靠谱，要是能在编译的时候判断index.html是否被修改，然后给设置一个版本号就好了

[xxxxue]

最终我的解决方案是
在根目录public 文件夹里新建了一个 "index.html" ,
workbox-webpack-plugin 就可以知道有这个文件了 (流程里估计是 copy 动作在前, workbox 在后),
编译的最后阶段, umi 会用真正的 html 覆盖掉旧文件.

[damin-zhang]

大佬, 请教一下service-worker.js里面怎么写?

[zhuman90]

这样虽然在sw.js中有了index.html的revision，但是修改了任何组件，build之后index.html的revision并没有改变，也就会导致缓存无法刷新

[fz6m]

统一回复下，我又本地试了下 workbox 插件最新版，可以和 umi 一起正常工作，参考配置如下：

// .umirc.ts

chainWebpack(config) {
    // sw
    if (process.env.NODE_ENV === 'development') {
      return
    }
    const { GenerateSW } = require('workbox-webpack-plugin')
    const pkg = require('./package.json')
    config.plugin('sw').use(GenerateSW, [
      {
        // 🟡 缓存版本：建议增加一种缓存版本标识符的设定，不一定是 pkg.name 和 version 一起的，可能是和你的基建环境变量或者 timestamp 等相关的，看你自己设定。
        cacheId: `${pkg.name}-${pkg.version}`,
        clientsClaim: true,
        skipWaiting: true,
        // 🟡 这里 exclude 的区别：通常来说 workbox 插件会自动识别 webpack 产物列表，然后自动添加产物的那些文件到 cache 列表中，你可以在 service-worker.js 这个产物中看到缓存文件列表，此时配 exclude: [/\.html/] 只排除 html 就行了。
        // 但如果你资源都托管在 cdn 上，建议 exclude 掉任何资源，然后 workbox 就会只缓存符合 `runtimeCaching` 规则的资源，这样更安全也更统一，因为不一定所有的资源都是你构建出来的，一些大型站点可能 cdn 有一堆，图片 cdn ，本站 cdn 等等，为了让他们都缓存，所以仅使用 `runtimeCaching` 是最好的方案。
        // exclude: [/\.html/],
        exclude: [/.+?/],
        // 🟡 下面的规则中域名需要换成你的 cdn 的，然后其他就是模板代码，优先级不需要动，这是最佳实践
        //      注意其中的一些配置需要根据你的情况修改。
        runtimeCaching: [
          // js css
          {
            urlPattern: /^https:\/\/fastly\.jsdelivr\.net(.+?)\.(js|css)$/,
            handler: 'StaleWhileRevalidate',
            options: {
              cacheName: `${pkg.name}:cdn`,
              expiration: {
                maxEntries: 30,
              },
            },
          },
          // img
          {
            urlPattern:
              /^https:\/\/fastly\.jsdelivr\.net(.+?)\.(png|jpg|jpeg|gif|svg)$/,
            handler: 'CacheFirst',
            options: {
              cacheName: `${pkg.name}:cdn-img`,
              expiration: {
                maxEntries: 30,
                maxAgeSeconds: 60 * 60 * 12,
              },
              cacheableResponse: {
                statuses: [0, 200],
              },
            },
          },
          // html
          {
            urlPattern: (e) => {
              if (e.url.host === 'domain.com') {
                return ['/'].includes(e.url.pathname)
              }
              return false
            },
            handler: 'NetworkFirst',
            options: {
              cacheName: `${pkg.name}:html`,
              expiration: {
                maxEntries: 20,
              },
            },
          },
        ],
      },
    ])
  },
  publicPath:
    process.env.NODE_ENV === 'production'
      ? '//fastly.jsdelivr.net/gh/owner/repo@gh-pages/'
      : '/',
  headScripts: [
    // 这是模板代码
    process.env.NODE_ENV === 'production'
      ? `;(function () {
      if (!('serviceWorker' in navigator)) {
        return
      }
      window.addEventListener('load', function () {
        var e = 'https://domain.com/service-worker.js?v=${Date.now()}'
        navigator.serviceWorker
          .register(e)
          .then(function (n) {
            n.onupdatefound = function () {
              var e = n.installing
              e.onstatechange = function () {
                switch (e.state) {
                  case 'installed':
                    navigator.serviceWorker.controller
                      ? console.log('New or updated content is available.')
                      : console.log('Content is now available offline!')
                    break
                  case 'redundant':
                    console.error(
                      'The installing service worker became redundant.'
                    )
                }
              }
            }
          })
          .catch(function (e) {
            console.error('Error during service worker registration:', e)
          })
      })
    })()`
      : '',
  ],

如果你不用 cdn ，就没必要配 runtimeCaching 了，开 exclude: [/\.html/] 只缓存产物内容就 ok 了。

关于 sw 的内容其实都比较老了，上面的代码是我在很久以前读过一些关于淘宝、网易的 sw 文章里面的最佳实践代码 copy 出来的，我也不记得 sw 的工作分类细节了，那些文章貌似也找不到了。

sw 的这种 pwa 方案是越来越没落了，缓存更新和过时问题本来就会造成体验不好，坑也要吃一壶，目前在除了 h5 、文档站 上以外没看到过哪个站点会用 sw 了，由于现代网速都很快，如果没有充分的路由用 sw 还是不要用 sw 。