fix(web-push): re-init i18n on each sw message

web/src/app/i18n.js

@@ -1,4 +1,4 @@
-import i18n from "i18next";
+import i18next from "i18next";
 import Backend from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
@@ -11,19 +11,20 @@ import { initReactI18next } from "react-i18next";
 // See example project here:
 // https://github.com/i18next/react-i18next/tree/master/example/react
 
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    fallbackLng: "en",
-    debug: true,
-    interpolation: {
-      escapeValue: false, // not needed for react as it escapes by default
-    },
-    backend: {
-      loadPath: "/static/langs/{{lng}}.json",
-    },
-  });
+const initI18n = () =>
+  i18next
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      fallbackLng: "en",
+      debug: true,
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+      },
+      backend: {
+        loadPath: "/static/langs/{{lng}}.json",
+      },
+    });
 
-export default i18n;
+export default initI18n;

web/src/components/App.jsx

@@ -20,10 +20,12 @@ import Messaging from "./Messaging";
 import Login from "./Login";
 import Signup from "./Signup";
 import Account from "./Account";
-import "../app/i18n"; // Translations!
+import initI18n from "../app/i18n"; // Translations!
 import prefs, { THEME } from "../app/Prefs";
 import RTLCacheProvider from "./RTLCacheProvider";
 
+initI18n();
+
 export const AccountContext = createContext(null);
 
 const darkModeEnabled = (prefersDarkMode, themePreference) => {