I'm working on an Angular application which primarily deals with documents (PDFs).
To make the experience smoother for our users, we've implemented the following service worker cache settings, which cache certain endpoints that handle these PDFs and their thumbnails, to reduce loading time:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
],
"dataGroups": [
{
"name": "imageStoreCache",
"urls": ["/api/the-image-store/*/*"],
"cacheConfig": {
"maxSize": 100,
"maxAge": "7d",
"timeout": "10s",
"strategy": "performance"
}
},
{
"name": "imageStoreCache",
"urls": ["/api/the-image-store/*"],
"cacheConfig": {
"maxSize": 100,
"maxAge": "7d",
"timeout": "10s",
"strategy": "performance"
}
}
]
}
The cache sizes here are quite limited per item, however with my users handling thousands of images a day, within a few months some of my users have a cache size of ~30Gb.
Another side effect of this is if their hard drive space becomes limited, they experience high CPU and RAM usage (thrashing), and the service worker fails to install the updated versions of our application with the following error message:
What is the best way to handle this?
At the moment I'm considering writing my own cache-busting code when my application initializes to delete old entries if it exceeds a threshold (of ~2Gb), but this feels like a problem that can/should be solved in another way.
