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

EDIT: Some time ago, a guy on GitHub helped me figure this out.

It's because there's a Workbox config property called maximumFileSizeToCacheInBytes. By default it is set to 2MB, which means it will only cache files that are smaller than (or equal to) 2MB. Some of my built files are larger than that. I only needed to increase the maximumFileSizeToCacheInBytes to solve the issue and include those larger files in the generated service worker.

My updated Workbox config looks like this:

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

Why are you dealing it manually? Even though you can cache all static asset using

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

and for dynamic request please use routing with strategy:-

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