CODEWITHSUNDEEP
laravelcachingvue.jslaravel-mixworkbox
Duc Trung Mai
Duc Trung Mai

Reputation: 2588

Workbox: cannot cache all files when build project

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!

->>picture-description

Upvotes: 3

Views: 2726

Answers (2)

Duc Trung Mai
Duc Trung Mai

Reputation: 2588

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'),
  }),
]

Upvotes: 2

Ritwik Kumar
Ritwik Kumar

Reputation: 177

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'
}));

Upvotes: 0

Related Questions