feat: precache web assets. Closes #3030 (#3032)

web/next.config.js

@@ -2,53 +2,63 @@ const withLess = require('next-with-less');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  register: true,
+  skipWaiting: true,
+  publicExcludes: ['!img/platformlogos/**/*', '!styles/admin/**/*'],
+  buildExcludes: [/chunks\/pages\/admin.*/, '!**/admin/**/*'],
+  sourcemap: process.env.NODE_ENV === 'development',
+});
 
-module.exports = withBundleAnalyzer(
-  withLess({
-    productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true',
-    trailingSlash: true,
-    reactStrictMode: true,
-    images: {
-      unoptimized: true,
-    },
-    swcMinify: true,
-    webpack(config) {
-      config.module.rules.push({
-        test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        use: ['@svgr/webpack'],
-      });
+module.exports = withPWA(
+  withBundleAnalyzer(
+    withLess({
+      productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true',
+      trailingSlash: true,
+      reactStrictMode: true,
+      images: {
+        unoptimized: true,
+      },
+      swcMinify: true,
+      webpack(config) {
+        config.module.rules.push({
+          test: /\.svg$/i,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack'],
+        });
 
-      return config;
-    },
-    async rewrites() {
-      return [
-        {
-          source: '/api/:path*',
-          destination: 'http://localhost:8080/api/:path*', // Proxy to Backend to work around CORS.
-        },
-        {
-          source: '/hls/:path*',
-          destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
-        },
-        {
-          source: '/img/:path*',
-          destination: 'http://localhost:8080/img/:path*', // Proxy to Backend to work around CORS.
-        },
-        {
-          source: '/logo',
-          destination: 'http://localhost:8080/logo', // Proxy to Backend to work around CORS.
-        },
-        {
-          source: '/thumbnail.jpg',
-          destination: 'http://localhost:8080/thumbnail.jpg', // Proxy to Backend to work around CORS.
-        },
-        {
-          source: '/customjavascript',
-          destination: 'http://localhost:8080/customjavascript', // Proxy to Backend to work around CORS.
-        },
-      ];
-    },
-    pageExtensions: ['tsx'],
-  }),
+        return config;
+      },
+      async rewrites() {
+        return [
+          {
+            source: '/api/:path*',
+            destination: 'http://localhost:8080/api/:path*', // Proxy to Backend to work around CORS.
+          },
+          {
+            source: '/hls/:path*',
+            destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
+          },
+          {
+            source: '/img/:path*',
+            destination: 'http://localhost:8080/img/:path*', // Proxy to Backend to work around CORS.
+          },
+          {
+            source: '/logo',
+            destination: 'http://localhost:8080/logo', // Proxy to Backend to work around CORS.
+          },
+          {
+            source: '/thumbnail.jpg',
+            destination: 'http://localhost:8080/thumbnail.jpg', // Proxy to Backend to work around CORS.
+          },
+          {
+            source: '/customjavascript',
+            destination: 'http://localhost:8080/customjavascript', // Proxy to Backend to work around CORS.
+          },
+        ];
+      },
+      pageExtensions: ['tsx'],
+    }),
+  ),
 );

web/package.json

@@ -35,7 +35,9 @@
 		"linkifyjs": "^4.1.0",
 		"lodash": "4.17.21",
 		"next": "13.3.0",
+		"next-pwa": "^5.6.0",
 		"next-with-less": "2.0.5",
+		"next-with-workbox": "^3.0.5",
 		"picmo": "5.8.4",
 		"postcss-flexbugs-fixes": "5.0.2",
 		"prop-types": "15.8.1",
@@ -56,6 +58,8 @@
 		"slate-react": "0.94.2",
 		"ua-parser-js": "1.0.35",
 		"video.js": "^8.3.0",
+		"workbox-precaching": "^6.5.4",
+		"workbox-window": "^6.5.4",
 		"xstate": "4.37.2",
 		"yaml": "2.2.2"
 	},