ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split service worker image cache into multiple

Browse Source
This commit is contained in:
schroda
2026-01-18 16:34:20 +01:00
parent 25b8c85ef2
commit 7b13c1dcc1
3 changed files with 99 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/settings/screens/ImagesSettings.tsx
View File

@@ -28,7 +28,7 @@ export const ImagesSettings = () => {
const clearCache = async () => {
try {
await Promise.all([triggerClearServerCache(), ImageCache.clear()]);
await Promise.all([triggerClearServerCache(), ImageCache.clearAll()]);
makeToast(t`Cleared the cache`, 'success');
} catch (e) {
makeToast(t`Could not clear the cache`, 'error', getErrorMessage(e));

51
src/lib/service-worker/ImageCache.ts
View File

@@ -6,12 +6,41 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
const CACHE_NAME = 'image-cache';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
// !!! IMPORTANT !!! - Update along with vite.config.ts workbox config
export enum ImageCacheKey {
OTHER = 'image-cache-other',
EXTENSION_ICONS = 'image-cache-extension-icons',
MANGA_THUMBNAILS = 'image-cache-manga-thumbnails',
CHAPTER_PAGES = 'image-cache-chapter-pages',
}
const IMAGE_CACHE_KEYS = Object.values(ImageCacheKey);
caches.delete('image-cache').catch(defaultPromiseErrorHandler('ImageCache: delete removed "image-cache"'));
export class ImageCache {
static async has(url: string): Promise<boolean> {
// !!! IMPORTANT !!! - Update along with vite.config.ts workbox config
static getKeyFor(url: string): ImageCacheKey {
if (url.match(/\/chapter\/[0-9]+\/page\/[0-9]+/g)) {
return ImageCacheKey.CHAPTER_PAGES;
}
if (url.match(/\/manga\/[0-9]+\/thumbnail/g)) {
return ImageCacheKey.MANGA_THUMBNAILS;
}
if (url.includes('/extension/icon/')) {
return ImageCacheKey.EXTENSION_ICONS;
}
return ImageCacheKey.OTHER;
}
static async has(url: string, key: ImageCacheKey = this.getKeyFor(url)): Promise<boolean> {
try {
const cache = await caches.open(CACHE_NAME);
const cache = await caches.open(key);
const response = await cache.match(url, { ignoreVary: true });
return response !== undefined;
@@ -20,9 +49,9 @@ export class ImageCache {
}
}
static async get(url: string): Promise<Response | null> {
static async get(url: string, key: ImageCacheKey = this.getKeyFor(url)): Promise<Response | null> {
try {
const cache = await caches.open(CACHE_NAME);
const cache = await caches.open(key);
const response = await cache.match(url);
return response || null;
@@ -31,10 +60,14 @@ export class ImageCache {
}
}
static async clear(): Promise<void> {
const cache = await caches.open(CACHE_NAME);
const keys = await cache.keys();
static async clear(key: ImageCacheKey): Promise<void> {
const cache = await caches.open(key);
const imageKeys = await cache.keys();
await Promise.all(keys.map((key) => cache.delete(key)));
await Promise.all(imageKeys.map((imageKey) => cache.delete(imageKey)));
}
static async clearAll(): Promise<void> {
IMAGE_CACHE_KEYS.forEach(ImageCache.clear);
}
}

68
vite.config.ts
View File

@@ -61,23 +61,67 @@ export default defineConfig(({ command }) => ({
globPatterns: [],
runtimeCaching: [
{
urlPattern: ({ request, url }) => {
if (request.destination === 'image') {
return true;
}
urlPattern: ({ url }) => {
const { pathname } = url;
return (
pathname.match(/\/chapter\/[0-9]+\/page\/[0-9]+/g) ||
pathname.match(/\/manga\/[0-9]+\/thumbnail/g) ||
pathname.includes('/extension/icon/')
);
return pathname.match(/\/chapter\/[0-9]+\/page\/[0-9]+/g);
},
handler: 'CacheFirst',
options: {
cacheName: 'image-cache',
// !!! IMPORTANT !!! - Update along with ImageCache.ts
cacheName: 'image-cache-chapter-pages',
expiration: {
maxEntries: 10000,
maxEntries: 2500,
purgeOnQuotaError: true,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: ({ url }) => {
const { pathname } = url;
return pathname.match(/\/manga\/[0-9]+\/thumbnail/g);
},
handler: 'CacheFirst',
options: {
// !!! IMPORTANT !!! - Update along with ImageCache.ts
cacheName: 'image-cache-manga-thumbnails',
expiration: {
maxEntries: 5000,
purgeOnQuotaError: true,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: ({ url }) => {
const { pathname } = url;
return pathname.includes('/extension/icon/');
},
handler: 'CacheFirst',
options: {
// !!! IMPORTANT !!! - Update along with ImageCache.ts
cacheName: 'image-cache-extension-icons',
expiration: {
maxEntries: 300,
purgeOnQuotaError: true,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: ({ request }) => request.destination === 'image',
handler: 'CacheFirst',
options: {
// !!! IMPORTANT !!! - Update along with ImageCache.ts
cacheName: 'image-cache-other',
expiration: {
maxEntries: 500,
purgeOnQuotaError: true,
},
cacheableResponse: {