workbox-webpack-plugin not caching chunk in React PWA

578 views Asked by At

I'm currently creating a PWA with the workbox-webpack-plugin that was working fine until I added some modules such as Sentry or react-data-grid. When these two modules are installed, the cache only contains 15Mb instead of 22Mb, which results in a blank page when I try to reload the page offline. The file that isn't cached is '/static/js/****.chunk.js'.

Here's my config-override.js file :

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = function override(config, env) {
    config.plugins = config.plugins.map(plugin => {
        if (plugin.constructor.name === 'GenerateSW') {
            return new WorkboxWebpackPlugin.InjectManifest({
                swSrc: './src/custom-service-worker.js',
                swDest: 'service-worker.js'
            })
        }
        return plugin
    })
    return config;
}

And here's my custom-service-worker.js :

/* eslint-disable */
import { precacheAndRoute } from 'workbox-precaching';
...

precacheAndRoute(self.__WB_MANIFEST);

...

self.addEventListener('install', e => {
    const preCache = async () => {
        caches.open(STATIC_CACHE_NAME).then(cache => {
            cache.addAll(STATIC_CONTENT);
        });
        self.skipWaiting();
    }
    e.waitUntil(preCache());
});

self.addEventListener('activate', e => {
    const deleteOldCaches = async () => {
        caches.keys().then(keys => {
            return Promise.all(keys
                .filter(key => key !== STATIC_CACHE_NAME && key !== DYNAMIC_CACHE_NAME && !key.includes("workbox-precache")) // Si la cache ne correspond pas aux nom des caches actuelles
                .map(key => caches.delete(key))
            );
        });
        self.clients.claim();
    }
    e.waitUntil(deleteOldCaches());
});

If you have any idea about how I could fix that problem, I'd really appreciate your help !

0

There are 0 answers