CODEWITHSUNDEEP
progressive-web-appsservice-workerworkbox-webpack-pluginsw-precache
Abbas Zabier Mohammad
Abbas Zabier Mohammad

Reputation: 81

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

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^^

Upvotes: 7

Views: 14096

Answers (4)

ChrisTheButcher
ChrisTheButcher

Reputation: 259

For Vite:

import { VitePWA } from "vite-plugin-pwa";

const pwaPlugin = VitePWA({
  registerType: "autoUpdate",
  workbox: {
    maximumFileSizeToCacheInBytes: 5 * 1024 ** 2, // 5 MB or set to something else
  }
  // etc
});

Upvotes: 7

moeinghasemi
moeinghasemi

Reputation: 109

The answer of @stef-chäser is correct, if someone uses vite-plugin-pwa refer to this: https://vite-pwa-org.netlify.app/guide/faq#missing-assets-from-sw-precache-manifest

this worked for me.

I used it and finally using this in my vite.config.ts and it finally worked:

 injectManifest: {
            globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
            maximumFileSizeToCacheInBytes: 3000000
        },

Upvotes: -1

fotiecodes
fotiecodes

Reputation: 626

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!

Upvotes: 3

Stef Ch&#228;ser
Stef Ch&#228;ser

Reputation: 2058

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

Upvotes: 6

Related Questions