Won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit (PWA)

Question

help me. I have a problem after running "npm run dev" warning appears :

WARNING in css/app.css is 4.13 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

What does the warning mean? Can anyone explain? And how to solve it? Thank you good people^^

Answer 1

sw-precache checks which files the service worker will cache (precache) immediately during registration. During build sw-precache sees that app.css is part of your application and wants to and it to the list of precached file. But your app.css is 4.13 MB big, which is to big for the default configuration.

First advise is: Check is you really need that much CSS and if it is possible to reduce file size.

If this is not possible you can adjust maximumFileSizeToCacheInBytes:

I am unsure if you use sw-precache, because it is outdated, you should switch to use workbox-build.

For workbox-build use the following config by setting maximumFileSizeToCacheInBytes:

// build-sw.js

import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  maximumFileSizeToCacheInBytes: <yourMaxFileSizeInBytesGoesHere>
  .....
});

Answer 2

I had a similar issue today working with vue 3 and using the plugin @vue/cli-plugin-pwa. for anyone using vuejs, in the vue.config.js add the following code.

module.exports = {
  pwa: {
    name: "App name",
    themeColor: "#4338ca",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    workboxPluginMode: "GenerateSW",
    workboxOptions: {
      maximumFileSizeToCacheInBytes: 5000000, // <---- increasing the file size to cached 5mb
    },
  },
};

That should resolve the issue. Hope that helps!