Some files not being cached in workbox-webpack-plugin | react

Question

Some files not being cached in workbox-webpack-plugin | react

panwaranuj01 opened this issue 8 months ago · comments

Welcome! Please use this template for reporting bugs or requesting features. For questions about using Workbox, the best place to ask is Stack Overflow, tagged with [workbox]: https://stackoverflow.com/questions/ask?tags=workbox

Library Affected:
worbox-webpack-plugin

Browser & Platform:

Issue or Feature Request Description:

So basically some files are not being cached in service worker files.
I'm using the react with webpack and that's why i choose the workbox-webpack-plugin

code -:

webpack cofig

 plugins.push(
        new WorkboxWebpackPlugin.GenerateSW({
            exclude: [
                /\.html$/,
                /js\.map$/,
                /^(package|config-env|config).*\.js(?:on)?$/,             ],
             ],
            clientsClaim: true,
            skipWaiting: true,
            disableDevLogs: false,
            cleanupOutdatedCaches: true,
            runtimeCaching: [
                {
                    urlPattern: /\.(png|jpg|jpeg|svg|gif)$/,
                    handler: "CacheFirst",
                    options: {
                        cacheName: "my-images-cache",
                        expiration: {
                            maxAgeSeconds: 7 * 24 * 60 * 60, // Cache images for 7 days
                        },
                    },
                },
                {
                    urlPattern: /\.css$/,
                    handler: "StaleWhileRevalidate",
                    options: {
                        cacheName: "my-css/js-cache",
                        expiration: {
                            maxAgeSeconds: 7 * 24 * 60 * 60, // Cache images for 7 days
                        },
                    },
                },

                {
                     urlPattern: /\.js$/, 
                    handler: "NetworkFirst",
                     options: {
                         cacheName: "my-js-cache",
                         expiration: {
                             maxAgeSeconds: 7 * 24 * 60 * 60, // Cache images for 7 days
                         },
                     },
                 },
            ],
        })

Automatically generated file [service-worker.js]

if (!self.define) {
  let e,
    i = {};
  const n = (n, l) => (
    (n = new URL(n + ".js", l).href),
    i[n] ||
      new Promise((i) => {
        if ("document" in self) {
          const e = document.createElement("script");
          (e.src = n), (e.onload = i), document.head.appendChild(e);
        } else (e = n), importScripts(n), i();
      }).then(() => {
        let e = i[n];
        if (!e) throw new Error(`Module ${n} didn’t register its module`);
        return e;
      })
  );
  self.define = (l, b) => {
    const s =
      e ||
      ("document" in self ? document.currentScript.src : "") ||
      location.href;
    if (i[s]) return;
    let c = {};
    const r = (e) => n(e, s),
      d = { module: { uri: s }, exports: c, require: r };
    i[s] = Promise.all(l.map((e) => d[e] || r(e))).then((e) => (b(...e), c));
  };
}
define(["./workbox-bb4a901c"], function (e) {
  "use strict";
  self.skipWaiting(),
    e.clientsClaim(),
    e.precacheAndRoute(
      [
        { url: "/1.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/10.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/100.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/101.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/102.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/103.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/104.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/105.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/106.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/107.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/108.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/11.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/13.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/14.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/15.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/16.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/17.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/18.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/19.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/2.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/20.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/21.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/22.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/23.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/24.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/25.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/26.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/27.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/28.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/29.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/3.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/30.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/31.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/32.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/33.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/34.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/35.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/36.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/37.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/38.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/39.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/4.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/40.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/41.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/42.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/43.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/44.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/45.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/46.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/47.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/48.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/49.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/5.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/50.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/51.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/52.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/53.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/54.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/55.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/56.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/57.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/58.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/59.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/6.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/60.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/61.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/62.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/63.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/64.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/65.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/66.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/67.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/68.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/69.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/7.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/70.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/71.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/72.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/73.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/74.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/75.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/76.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/77.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/78.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/79.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/8.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/80.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/81.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/82.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/83.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/84.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/85.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/86.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/87.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/88.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/89.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/9.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/90.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/91.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/92.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/93.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/94.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/95.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/96.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/97.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/98.221d2b3018f8164c406b.bundle.js", revision: null },
        { url: "/99.221d2b3018f8164c406b.bundle.js", revision: null },
      ],
      {}
    ),
    e.cleanupOutdatedCaches(),
    e.registerRoute(
      /\.(png|jpg|jpeg|svg|gif)$/,
      new e.CacheFirst({
        cacheName: "my-images-cache",
        plugins: [new e.ExpirationPlugin({ maxAgeSeconds: 604800 })],
      }),
      "GET"
    ),
    e.registerRoute(
      /\.css$/,
      new e.StaleWhileRevalidate({
        cacheName: "my-css-cache",
        plugins: [new e.ExpirationPlugin({ maxAgeSeconds: 604800 })],
      }),
      "GET"
    ),
    e.registerRoute(
      /\.js$/,
      new e.NetworkFirst({
        cacheName: "my-js-cache",
        plugins: [new e.ExpirationPlugin({ maxAgeSeconds: 604800 })],
      }),
      "GET"
    );
});

When reporting bugs, please include relevant JavaScript Console logs and links to public URLs at which the issue could be reproduced.

Anuj Panwar · Answer 1 · Wed Dec 20 2023 18:44:47 GMT+0800 (China Standard Time)

Build folder

Anuj Panwar · Answer 2 · Wed Dec 20 2023 18:47:00 GMT+0800 (China Standard Time)

@jeffposnick can you please help here? It's important to me because it will solve my chunk load error.

https://stackoverflow.com/questions/60697927/chunkloaderror-loading-chunk-xy-failed-randomly-getting-fatal-on-production