Merge pull request #817 from nihalgonsalves/ng/fix-web-push-i18n

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

Dockerfile-build

@@ -1,4 +1,4 @@
-FROM golang:1.19-bullseye as builder
+FROM golang:1.20-bullseye as builder
 
 ARG VERSION=dev
 ARG COMMIT=unknown

web/public/sw.js

@@ -7,8 +7,7 @@ import { clientsClaim } from "workbox-core";
 import { dbAsync } from "../src/app/db";
 
 import { toNotificationParams, icon, badge } from "../src/app/notificationUtils";
-
-import i18n from "../src/app/i18n";
+import initI18n from "../src/app/i18n";
 
 /**
  * General docs for service workers and PWAs:
@@ -67,8 +66,10 @@ const handlePushMessage = async (data) => {
  * Handle a received web push subscription expiring.
  */
 const handlePushSubscriptionExpiring = async (data) => {
-  await self.registration.showNotification(i18n.t("web_push_subscription_expiring_title"), {
-    body: i18n.t("web_push_subscription_expiring_body"),
+  const t = await initI18n();
+
+  await self.registration.showNotification(t("web_push_subscription_expiring_title"), {
+    body: t("web_push_subscription_expiring_body"),
     icon,
     data,
     badge,
@@ -80,8 +81,10 @@ const handlePushSubscriptionExpiring = async (data) => {
  * permission can be revoked by the browser.
  */
 const handlePushUnknown = async (data) => {
-  await self.registration.showNotification(i18n.t("web_push_unknown_notification_title"), {
-    body: i18n.t("web_push_unknown_notification_body"),
+  const t = await initI18n();
+
+  await self.registration.showNotification(t("web_push_unknown_notification_title"), {
+    body: t("web_push_unknown_notification_body"),
     icon,
     data,
     badge,
@@ -107,6 +110,8 @@ const handlePush = async (data) => {
  * This is also called when the user clicks on an action button.
  */
 const handleClick = async (event) => {
+  const t = await initI18n();
+
   const clients = await self.clients.matchAll({ type: "window" });
 
   const rootUrl = new URL(self.location.origin);
@@ -147,7 +152,7 @@ const handleClick = async (event) => {
           }
         } catch (e) {
           console.error("[ServiceWorker] Error performing http action", e);
-          self.registration.showNotification(`${i18n.t("notifications_actions_failed_notification")}: ${action.label} (${action.action})`, {
+          self.registration.showNotification(`${t("notifications_actions_failed_notification")}: ${action.label} (${action.action})`, {
             body: e.message,
             icon,
             badge,

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) => {