chore/sw_cache (#512)

package.json

@@ -120,7 +120,8 @@
         "webpack-bundle-analyzer": "4.9.1",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "4.15.1",
-        "webpack-merge": "5.9.0"
+        "webpack-merge": "5.9.0",
+        "workbox-webpack-plugin": "7.1.0"
     },
     "resolutions": {
         "@types/react-router": "5.1.18",

src/Components/Layout/Layout.less

@@ -1,5 +1,5 @@
-@import '~styles/variables.less';
-@import '~styles/mixins.less';
+@import "~styles/variables.less";
+@import "~styles/mixins.less";
 
 .layout {
     display: flex;

src/Components/Layout/Layout.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, ReactNode, FC, useEffect } from "react";
 import { Loader } from "@skbkontur/react-ui/components/Loader";
 import WarningIcon from "@skbkontur/react-icons/Warning";
+import { NewVersionAvailableHint } from "../NewVersionAvailableHint/NewVersionAvailableHint";
 import classNames from "classnames/bind";
 
 import styles from "./Layout.less";
@@ -48,6 +49,7 @@ export const Layout: FC<ILayoutProps> = ({ loading = false, error = null, childr
             <Loader className={cn("loading")} active={loading} caption="Loading">
                 {children}
             </Loader>
+            <NewVersionAvailableHint />
         </main>
     );
 };

src/Components/NewVersionAvailableHint/NewVersionAvailableHint.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Tooltip } from "@skbkontur/react-ui";
+import { useAppSelector } from "../../store/hooks";
+import { UIState } from "../../store/selectors";
+import Info from "@skbkontur/react-icons/Info";
+
+export const NewVersionAvailableHint = () => {
+    const { isNewFrontendVersionAvailable } = useAppSelector(UIState);
+
+    return isNewFrontendVersionAvailable ? (
+        <div style={{ position: "fixed", bottom: "30px", right: "30px" }}>
+            <Tooltip render={() => "New version available, please reload the page"}>
+                <Info size={30} />
+            </Tooltip>
+        </div>
+    ) : null;
+};

src/app.tsx

@@ -6,11 +6,18 @@ import * as Sentry from "@sentry/react";
 import ErrorContainer from "./Containers/ErrorContainer";
 import { Providers } from "./Providers/Providers";
 import SentryInitializer from "./Components/SentryInitializer/SentryInitializer";
+import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
+import { updateServiceWorker } from "./store/Reducers/UIReducer.slice";
+import { store } from "./store/store";
 
 import "./style.less";
 
 const root = document.getElementById("root");
 
+const onUpdate = () => {
+    store.dispatch(updateServiceWorker());
+};
+
 const render = (Component: ComponentType) => {
     if (root !== null) {
         ReactDOM.render(
@@ -41,4 +48,6 @@ const load = (): void => {
     }
 };
 
+serviceWorkerRegistration.register(onUpdate);
+
 export { load as default };

src/serviceWorkerRegistration.ts

@@ -0,0 +1,33 @@
+export function register(onUpdate: () => void) {
+    if ("serviceWorker" in navigator) {
+        window.addEventListener("load", async () => {
+            try {
+                const registration = await navigator.serviceWorker.register("/service-worker.js");
+
+                setInterval(async () => {
+                    try {
+                        await registration.update();
+                    } catch (error) {
+                        console.error("Error updating service worker:", error);
+                    }
+                }, 1000 * 60);
+
+                registration.onupdatefound = () => {
+                    const installingWorker = registration.installing;
+                    if (installingWorker) {
+                        installingWorker.onstatechange = () => {
+                            if (
+                                installingWorker.state === "installed" &&
+                                navigator.serviceWorker.controller
+                            ) {
+                                onUpdate && onUpdate();
+                            }
+                        };
+                    }
+                };
+            } catch (error) {
+                console.error("Error during service worker registration:", error);
+            }
+        });
+    }
+}

src/store/Reducers/UIReducer.slice.ts

@@ -3,11 +3,13 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 interface IUIState {
     isLoading: boolean;
     error: string;
+    isNewFrontendVersionAvailable: boolean;
 }
 
 const initialState: IUIState = {
     isLoading: false,
     error: "",
+    isNewFrontendVersionAvailable: false,
 };
 
 export const UISlice = createSlice({
@@ -20,9 +22,12 @@ export const UISlice = createSlice({
         setError: (state, action) => {
             state.error = action.payload;
         },
+        updateServiceWorker: (state) => {
+            state.isNewFrontendVersionAvailable = true;
+        },
     },
 });
 
-export const { toggleLoading, setError } = UISlice.actions;
+export const { toggleLoading, setError, updateServiceWorker } = UISlice.actions;
 
 export default UISlice.reducer;

webpack.config.js

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ContextReplacementPlugin = webpack.ContextReplacementPlugin;
 const TerserPlugin = require("terser-webpack-plugin");
+const { GenerateSW } = require("workbox-webpack-plugin");
 const supportedLocales = ["en"];
 
 const isDev = process.argv.includes("--mode=development");
@@ -20,6 +21,16 @@ module.exports = {
         clean: true,
     },
     plugins: [
+        //https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin#type-GenerateSW
+        new GenerateSW({
+            // default maximum size is 3mb while our main chunk is 4mb
+            // that's why size is sincreased to 6mb
+            maximumFileSizeToCacheInBytes: 6291456,
+            cleanupOutdatedCaches: true,
+            clientsClaim: true,
+            sourcemap: false,
+            skipWaiting: true,
+        }),
         new ContextReplacementPlugin(
             /date-fns[\/\\]/,
             new RegExp(`[/\\\\\](${supportedLocales.join("|")})[/\\\\\]`)
@@ -84,7 +95,13 @@ module.exports = {
 
     optimization: {
         minimize: true,
-        minimizer: [new TerserPlugin({ parallel: true, terserOptions: { sourceMap: true } })],
+        minimizer: [
+            new TerserPlugin({
+                parallel: true,
+                extractComments: false,
+                terserOptions: { sourceMap: true },
+            }),
+        ],
         usedExports: true,
         splitChunks: {
             chunks: "all",