astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Nihal Gonsalves 2023-07-10 20:10:45 +02:00
parent 6a93dc9d54
commit c7f85e6283
3 changed files with 32 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/public/sw.js
View file

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

33
web/src/app/i18n.js
View file

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

4
web/src/components/App.jsx
View file

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