Fix broken SW caching

CHANGELOG.md

@@ -8,6 +8,8 @@ This file is manually updated. Please file an issue if something is missing.
 - **Feature**: Multiple timeline paths can be specified ([#178](https://github.com/pulsejet/memories/issues/178))
 - Support for server-side encrypted storage ([#99](https://github.com/pulsejet/memories/issues/99))
 - Mouse wheel now zooms on desktop
+- Improved caching performance
+  - Due to incorrect caching in previous versions, your browser cache may have become very large. You can clear it to save some space.
 
 ## v4.7.0, v3.7.0 (2022-11-14)
 

src/services/Utils.ts

@@ -334,7 +334,11 @@ export function cacheData(url: string, data: Object) {
     if (!cache) return;
 
     const response = new Response(str);
+    const encoded = new TextEncoder().encode(str);
     response.headers.set("Content-Type", "application/json");
+    response.headers.set("Content-Length", encoded.length.toString());
+    response.headers.set("Cache-Control", "max-age=604800"); // 1 week
+    response.headers.set("Vary", "Accept-Encoding");
     await cache.put(url, response);
   })();
 }

webpack.js

@@ -26,6 +26,18 @@ webpackConfig.watchOptions = {
 };
 
 if (!isDev) {
+    const imageCacheOpts = (expiryDays) => ({
+        handler: 'CacheFirst',
+
+        options: {
+            cacheName: 'images',
+            expiration: {
+                maxAgeSeconds: 3600 * 24 * expiryDays, // days
+                maxEntries: 20000, // 20k images
+            },
+        },
+    });
+
     webpackConfig.plugins.push(
         new WorkboxPlugin.GenerateSW({
             swDest: 'memories-service-worker.js',
@@ -37,17 +49,33 @@ if (!isDev) {
 
             // Define runtime caching rules.
             runtimeCaching: [{
-                // Match any preview file request
+                // Do not cache video related files
+                urlPattern: /^.*\/apps\/memories\/api\/video\/.*/,
+                handler: 'NetworkOnly',
+            }, {
+                // Do not cache raw editing files
+                urlPattern: /^.*\/apps\/memories\/api\/image\/jpeg\/.*/,
+                handler: 'NetworkOnly',
+            }, {
+                // Do not cache webdav
+                urlPattern: /^.*\/remote.php\/.*/,
+                handler: 'NetworkOnly',
+            }, {
+                // Do not cache downloads
+                urlPattern: /^.*\/apps\/files\/ajax\/download.php?.*/,
+                handler: 'NetworkOnly',
+            }, {
+                // Preview file request from core
                 urlPattern: /^.*\/core\/preview\?fileId=.*/,
-                handler: 'CacheFirst',
-
-                options: {
-                    cacheName: 'images',
-                    expiration: {
-                        maxAgeSeconds: 3600 * 24 * 7, // one week
-                        maxEntries: 20000, // 20k images
-                    },
-                },
+                ...imageCacheOpts(7),
+            }, {
+                // Albums from Photos
+                urlPattern: /^.*\/apps\/photos\/api\/v1\/preview\/.*/,
+                ...imageCacheOpts(7),
+            }, {
+                // Face previews from Memories
+                urlPattern: /^.*\/apps\/memories\/api\/faces\/preview\/.*/,
+                ...imageCacheOpts(1),
             }, {
                 // Match page requests
                 urlPattern: /^.*\/.*$/,