goldhand/sw-precache-webpack-plugin

Error caching large amount of files

JFGHT opened this issue · 6 comments

JFGHT commented

BEFORE YOU SUBMIT please read the following:

  • I'm submitting a bug report
  • I'm submitting a feature request
  • I'm submitting a support request

webpack version:
3.8.1

sw-precache-webpack-plugin version:
0.11.4

Please tell us about your environment:
Ubuntu 16.04

Browser: Chomre 61.0.3163.91

Current behavior:
When importing large amount of files like the included in bootstrap.css (all the fonts and so on) sometimes the installation fails not caching all the files and showing:

ServiceWorker failed to install: ServiceWorker failed to handle event (event.waintUntil Promise rejected).

Expected/desired behavior:
It should be caching at files at once.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with your:

main.js:

`// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './static/css/style.css';
import 'font-awesome/css/font-awesome.min.css';

// JS
import 'jquery/dist/jquery.min';
import 'bootstrap/dist/js/bootstrap.min';`

goldhand commented

Hmm do you know how large all the assets are together? You may have maxed the browser cache size limit

JFGHT commented

I'll answer you back on monday with the exact data but it was the standard for a project I guess: a big vendors bundle, 2 main app js files (code splitting), the css and a few fonts.

JFGHT commented

I'm really sorry for not delivering results when promised. I'll bring them ASAP.

JFGHT commented

Here you are, @goldhand.

Parsed
Gzipped

goldhand commented

Hey @JFGHT sorry for the delay, it looks like there is a lot more being cached than what is emitted in your webpack bundle. I'm willing to bet that everything together is larger than the browser's cache limit. You may want to try to filter out some of the things such as font awesome and media. Font awesome may be cached somewhere else if you load it from a cdn.

JFGHT commented

@goldhand
I'm using Font awesome from CDN as your recomendation, still having:

service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

Thing is, I did in console:

navigator.storage.estimate().then(info => console.log(info));

Which shows:

{ quota: 13923145591, usage: 24732642 }

So, unless I'm addressing the wrong way to get current's cache limit, there's something weird going on here.

Edit:

It's showing the error each page refresh, increasing usage size till one last refresh that makes the whole thing work:

Content is cached for offline use.

{ quota: 13923145591, usage: 33545314 }

So it's adding more files to cache on each refresh till all are there.