Merge pull request #1405 from ita-social-projects/feature/issue-cache…

…-control Feature/issue cache control
ita-social-projects · Sep 12, 2024 · 4f6f2c0 · 4f6f2c0
2 parents e3c78bb + cbad141
commit 4f6f2c0
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 156 deletions.
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
@@ -1,4 +1,5 @@
 const Dotenv = require("dotenv-webpack");
+const CopyPlugin = require('copy-webpack-plugin');
 const Webpack = require("webpack");
 const { GenerateSW } = require("workbox-webpack-plugin");
 const fs = require("fs");
@@ -13,12 +14,12 @@ module.exports = {
     open: true,
     port: "3000",
     historyApiFallback: true,
-    // https: {
+    //https: {
       // DEV.NOTE: uncomment and change names of files according to your generated ones
 
-      // key: fs.readFileSync("cert\\localhost+1-key.pem"),
-      // cert: fs.readFileSync("cert\\localhost+1.pem"),
-    // },
+      //key: fs.readFileSync("cert\\localhost+1-key.pem"),
+      //cert: fs.readFileSync("cert\\localhost+1.pem"),
+    //},
   },
   module: {
     rules: require("./webpack.rules"),
@@ -38,53 +39,57 @@ module.exports = {
     new Dotenv({
       path: `./.env`,
     }),
-    // new GenerateSW({
-    //   skipWaiting: true,
-    //   clientsClaim: true,
-    //   maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
-    //   runtimeCaching: [
-    //     {
-    //       urlPattern: /\.(?:js|css)$/,
-    //       handler: 'CacheFirst',
-    //       options: {
-    //         cacheName: 'static-resources',
-    //         expiration: {
-    //           maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
-    //         },
-    //       },
-    //     },
-    //     {
-    //       urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
-    //       handler: 'CacheFirst',
-    //       options: {
-    //         cacheName: 'image-resources',
-    //         expiration: {
-    //           maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
-    //         },
-    //       },
-    //     },
-    //     {
-    //       urlPattern: /\.(?:woff|woff2|ttf|otf)$/,
-    //       handler:'CacheFirst',
-    //       options: {
-    //         cacheName: 'font-resources',
-    //         expiration: {
-    //           maxAgeSeconds: 60 * 60 * 24 * 90, // 3 months
-    //         },
-    //       },
-    //     },
-    //     {
-    //       urlPattern: /^https?.*/,
-    //       handler: 'NetworkFirst',
-    //       options: {
-    //         cacheName: 'external-resources',
-    //         expiration: {
-    //           maxEntries: 260
-    //         },
-    //       },
-    //     },
-    //   ],
-    // }),
+    new GenerateSW({
+      skipWaiting: true,
+      clientsClaim: true,
+      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+      runtimeCaching: [
+        {
+          urlPattern: /env-config\.js$/,
+          handler: 'NetworkOnly'
+        },
+        {
+          urlPattern: /\.(?:js|css)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'static-resources',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
+            },
+          },
+        },
+        {
+          urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'image-resources',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
+            },
+          },
+        },
+        {
+          urlPattern: /\.(?:woff|woff2|ttf|otf)$/,
+          handler:'CacheFirst',
+          options: {
+            cacheName: 'font-resources',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 90, // 3 months
+            },
+          },
+        },
+        {
+          urlPattern: /^https?.*/,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'external-resources',
+            expiration: {
+              maxEntries: 260
+            },
+          },
+        },
+      ],
+    }),
   ],
   optimization: {
     splitChunks: {

diff --git a/config/webpack.prod.js b/config/webpack.prod.js
@@ -52,6 +52,10 @@ module.exports = {
             clientsClaim: true,
             maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
             runtimeCaching: [
+              {
+                urlPattern: /env-config\.js$/,
+                handler: 'NetworkOnly'
+              },
               {
                 urlPattern: /\.(?:js|css)$/,
                 handler: 'NetworkFirst',

diff --git a/docker-compose.yml b/docker-compose.yml
diff --git a/public/env-config.js b/public/env-config.js
@@ -3,4 +3,5 @@ window._env_ = {
   API_URL: "https://stageback.streetcode.com.ua/api",
   REACT_APP_GOOGLE_ANALYTICS: "REACT_APP_GOOGLE_ANALYTICS_VALUE",
   RECAPTCHA_SITE_KEY: "6LeUO3ApAAAAAOC7F4v0qTsSwIR9mZu33SWjAAtM",
+  VERSION: "1.0.0"
 }
diff --git a/src/app/common/components/withClearCache.tsx b/src/app/common/components/withClearCache.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-underscore-dangle */
+import { Component, useEffect, useState } from 'react';
+
+const WithClearCache: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [isLatestBuildDate, setIsLatestBuildDate] = useState<boolean>(false);
+
+    const refreshCacheAndReload = () => {
+        if (caches) {
+            caches.keys().then((names) => {
+                for (const name of names) {
+                    caches.delete(name);
+                }
+            });
+            console.log("Cache is cleared")
+        }
+        window.location.reload();
+    };
+
+    useEffect(() => {
+        const localVersion = localStorage.getItem('VERSION');
+        const isVersionMatches = localVersion === window._env_.VERSION;
+        setIsLatestBuildDate(isVersionMatches);
+        if (!isVersionMatches) {
+            localStorage.setItem('VERSION', window._env_.VERSION);
+            refreshCacheAndReload();
+        }
+    }, []);
+
+    if (isLatestBuildDate) {
+        return children;
+    }
+    return null;
+};
+
+export default WithClearCache;
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,6 +8,7 @@ import { RouterProvider } from 'react-router-dom';
 import router from '@app/router/Routes';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import WithClearCache from './app/common/components/withClearCache';
 
 declare global {
     interface Window {
@@ -16,6 +17,7 @@ declare global {
             SERVER_API_URL: string;
             REACT_APP_GOOGLE_ANALYTICS: string;
             RECAPTCHA_SITE_KEY: string;
+            VERSION: string;
         };
     }
 }
@@ -39,10 +41,12 @@ const root = ReactDOM.createRoot(
 const queryClient = new QueryClient();
 
 root.render(
-    <React.StrictMode>
-        <QueryClientProvider client={queryClient}>
-            <RouterProvider router={router} />
-            <ReactQueryDevtools initialIsOpen />
-        </QueryClientProvider>
-    </React.StrictMode>,
+    <WithClearCache>
+        <React.StrictMode>
+            <QueryClientProvider client={queryClient}>
+                <RouterProvider router={router} />
+                <ReactQueryDevtools initialIsOpen />
+            </QueryClientProvider>
+        </React.StrictMode>
+    </WithClearCache>,
 );