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 !