Workbox:无法在生成项目时缓存所有文件

Question

为了使我的站点离线，我使用Vuejs和workbox-webpack-plugin，我想缓存一个文件夹，其中包含我的所有文件(3个文件)，如下图所示，但是当我构建我的项目时(使用Laravel-mix)。main.js (包含Vue的所有内容)不能在service-woker.js中缓存。我试过一些方法来解决这个问题，但这些方法都没有用。有没有人面对这个问题，你有什么解决办法吗，非常感谢！

->>

​

Answer 1

编辑:不久前，GitHub上的一个家伙帮我解决了这个问题。

这是因为有一个名为maximumFileSizeToCacheInBytes的Workbox配置属性。默认情况下，它被设置为2MB，这意味着它将只缓存小于(或等于) 2MB的文件。我构建的一些文件比这个还要大。我只需要增加maximumFileSizeToCacheInBytes来解决这个问题，并将那些更大的文件包含在生成的服务工作者中。

更新后的Workbox配置如下所示：

plugins: [
  new workboxPlugin({
    globDirectory: DIST_DIR,
    globPatterns: ['js/*.{html,js,css}'],
    maximumFileSizeToCacheInBytes: 5000000, // <-- Added (5 MB)
    swDest: path.join(DIST_DIR, 'sw.js'),
  }),
]

Answer 2

你为什么要手动处理？即使可以使用以下方法缓存所有静态资产

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

对于动态请求，请使用路由策略：-

workbox.routing.registerRoute('end point url', workbox.strategies.networkFirst({
cacheName: 'cache-name'
}));