Add i18n to service worker

web/public/static/langs/en.json

@@ -90,6 +90,7 @@
   "notifications_actions_open_url_title": "Go to {{url}}",
   "notifications_actions_not_supported": "Action not supported in web app",
   "notifications_actions_http_request_title": "Send HTTP {{method}} to {{url}}",
+  "notifications_actions_failed_notification": "Unsuccessful action",
   "notifications_none_for_topic_title": "You haven't received any notifications for this topic yet.",
   "notifications_none_for_topic_description": "To send notifications to this topic, simply PUT or POST to the topic URL.",
   "notifications_none_for_any_title": "You haven't received any notifications.",
@@ -391,5 +392,9 @@
   "error_boundary_stack_trace": "Stack trace",
   "error_boundary_gathering_info": "Gather more info …",
   "error_boundary_unsupported_indexeddb_title": "Private browsing not supported",
-  "error_boundary_unsupported_indexeddb_description": "The ntfy web app needs IndexedDB to function, and your browser does not support IndexedDB in private browsing mode.<br/><br/>While this is unfortunate, it also doesn't really make a lot of sense to use the ntfy web app in private browsing mode anyway, because everything is stored in the browser storage. You can read more about it <githubLink>in this GitHub issue</githubLink>, or talk to us on <discordLink>Discord</discordLink> or <matrixLink>Matrix</matrixLink>."
+  "error_boundary_unsupported_indexeddb_description": "The ntfy web app needs IndexedDB to function, and your browser does not support IndexedDB in private browsing mode.<br/><br/>While this is unfortunate, it also doesn't really make a lot of sense to use the ntfy web app in private browsing mode anyway, because everything is stored in the browser storage. You can read more about it <githubLink>in this GitHub issue</githubLink>, or talk to us on <discordLink>Discord</discordLink> or <matrixLink>Matrix</matrixLink>.",
+  "web_push_subscription_expiring_title": "Notifications will be paused",
+  "web_push_subscription_expiring_body": "Open ntfy to continue receiving notifications",
+  "web_push_unknown_notification_title": "Unknown notification received from server",
+  "web_push_unknown_notification_body": "You may need to update ntfy by opening the web app"
 }

web/public/sw.js

@@ -6,6 +6,8 @@ import { NetworkFirst } from "workbox-strategies";
 import { dbAsync } from "../src/app/db";
 import { formatMessage, formatTitleWithDefault } from "../src/app/notificationUtils";
 
+import i18n from "../src/app/i18n";
+
 /**
  * General docs for service workers and PWAs:
  * https://vite-pwa-org.netlify.app/guide/
@@ -70,8 +72,8 @@ const showNotification = async (data) => {
  */
 const handlePush = async (data) => {
   if (data.event === "subscription_expiring") {
-    await self.registration.showNotification("Notifications will be paused", {
+    await self.registration.showNotification(i18n.t("web_push_subscription_expiring_title"), {
-      body: "Open ntfy to continue receiving notifications",
+      body: i18n.t("web_push_subscription_expiring_body"),
       icon,
       data,
     });
@@ -85,8 +87,8 @@ const handlePush = async (data) => {
     await showNotification(data);
   } else {
     // We can't ignore the push, since permission can be revoked by the browser
-    await self.registration.showNotification("Unknown notification received from server", {
+    await self.registration.showNotification(i18n.t("web_push_unknown_notification_title"), {
-      body: "You may need to update ntfy by opening the web app",
+      body: i18n.t("web_push_unknown_notification_body"),
       icon,
       data,
     });
@@ -132,7 +134,7 @@ const handleClick = async (event) => {
           }
         } catch (e) {
           console.error("[ServiceWorker] Error performing http action", e);
-          self.registration.showNotification(`Unsuccessful action ${action.label} (${action.action})`, {
+          self.registration.showNotification(`${i18n.t('notifications_actions_failed_notification')}: ${action.label} (${action.action})`, {
             body: e.message,
             icon,
           });

web/src/components/App.jsx

@@ -18,10 +18,10 @@ import routes from "./routes";
 import { useAccountListener, useBackgroundProcesses, useConnectionListeners } from "./hooks";
 import PublishDialog from "./PublishDialog";
 import Messaging from "./Messaging";
-import "./i18n"; // Translations!
 import Login from "./Login";
 import Signup from "./Signup";
 import Account from "./Account";
+import "../app/i18n"; // Translations!
 
 export const AccountContext = createContext(null);