laravel - Workbox: cannot cache all files when build project

Question

I use Vuejs and I use workbox-webpack-plugin in order to make my site offline, I want to cache a folder which contains all my files (3 files) like picture below, but when I build my project(using Laravel-mix). The main.js (which contains everything of Vue) cannot be cached in service-woker.js. I tried some ways to fix that but those didn't work. Does anybody face this issue, do you have any solution, many thanks!

->>

Answer 1

编辑：前段时间，GitHub 上的一个人帮我解决了这个问题。

这是因为有一个名为maximumFileSizeToCacheInBytes. 默认情况下，它设置为 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'
}));