perf(files): fetch previews faster and cache properly

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

1 files changed, 33 insertions, 0 deletions

diff --git a/webpack.common.js b/webpack.common.js
index 1c589a6ce8d..3a33915d027 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -4,6 +4,8 @@ const path = require('path')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 const webpack = require('webpack')
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+const WorkboxPlugin = require('workbox-webpack-plugin')
+
 const modules = require('./webpack.modules.js')
 
 const formatOutputFromModules = (modules) => {
@@ -161,6 +163,37 @@ module.exports = {
 			// and global one).
 			ICAL: 'ical.js',
 		}),
+
+		new WorkboxPlugin.GenerateSW({
+			swDest: 'preview-service-worker.js',
+			clientsClaim: true,
+			skipWaiting: true,
+			exclude: [/.*/], // don't do pre-caching
+			inlineWorkboxRuntime: true,
+			sourcemap: false,
+
+			// Define runtime caching rules.
+			runtimeCaching: [{
+				// Match any preview file request
+				// /apps/files_trashbin/preview?fileId=156380&a=1
+				// /core/preview?fileId=155842&a=1
+				urlPattern: /^.*\/(apps|core)(\/[a-z-_]+)?\/preview.*/i,
+
+				// Apply a strategy.
+				handler: 'CacheFirst',
+
+				options: {
+					// Use a custom cache name.
+					cacheName: 'previews',
+
+					// Only cache 10000 images.
+					expiration: {
+						maxAgeSeconds: 3600 * 24 * 7, // one week
+						maxEntries: 10000,
+					},
+				},
+			}],
+		}),
 	],
 	externals: {
 		OC: 'OC',