Format emojis in the service worker directly

web/src/app/Api.js

@@ -144,7 +144,7 @@ class Api {
       method: "POST",
       headers: maybeWithAuth({}, user),
       body: JSON.stringify({
-        endpoint: subscription.webPushEndpoint
+        endpoint: subscription.webPushEndpoint,
       }),
     });
 

web/src/app/Notifier.js

@@ -1,4 +1,5 @@
-import { formatMessage, formatTitleWithDefault, openUrl, playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array } from "./utils";
+import { openUrl, playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array } from "./utils";
+import { formatMessage, formatTitleWithDefault } from "./notificationUtils";
 import prefs from "./Prefs";
 import logo from "../img/ntfy.png";
 import api from "./Api";

web/src/app/emojisMapped.js

@@ -0,0 +1,4 @@
+import { rawEmojis } from "./emojis";
+
+// Format emojis (see emoji.js)
+export default Object.fromEntries(rawEmojis.flatMap((emoji) => emoji.aliases.map((alias) => [alias, emoji.emoji])));

web/src/app/notificationUtils.js

@@ -0,0 +1,35 @@
+// This is a separate file since the other utils import `config.js`, which depends on `window`
+// and cannot be used in the service worker
+
+import emojisMapped from "./emojisMapped";
+
+const toEmojis = (tags) => {
+  if (!tags) return [];
+  return tags.filter((tag) => tag in emojisMapped).map((tag) => emojisMapped[tag]);
+};
+
+export const formatTitle = (m) => {
+  const emojiList = toEmojis(m.tags);
+  if (emojiList.length > 0) {
+    return `${emojiList.join(" ")} ${m.title}`;
+  }
+  return m.title;
+};
+
+export const formatTitleWithDefault = (m, fallback) => {
+  if (m.title) {
+    return formatTitle(m);
+  }
+  return fallback;
+};
+
+export const formatMessage = (m) => {
+  if (m.title) {
+    return m.message;
+  }
+  const emojiList = toEmojis(m.tags);
+  if (emojiList.length > 0) {
+    return `${emojiList.join(" ")} ${m.message}`;
+  }
+  return m.message;
+};

web/src/app/utils.js

@@ -1,5 +1,4 @@
 import { Base64 } from "js-base64";
-import { rawEmojis } from "./emojis";
 import beep from "../sounds/beep.mp3";
 import juntos from "../sounds/juntos.mp3";
 import pristine from "../sounds/pristine.mp3";
@@ -8,6 +7,7 @@ import dadum from "../sounds/dadum.mp3";
 import pop from "../sounds/pop.mp3";
 import popSwoosh from "../sounds/pop-swoosh.mp3";
 import config from "./config";
+import emojisMapped from "./emojisMapped";
 
 export const tiersUrl = (baseUrl) => `${baseUrl}/v1/tiers`;
 export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");
@@ -56,48 +56,9 @@ export const topicDisplayName = (subscription) => {
   return topicShortUrl(subscription.baseUrl, subscription.topic);
 };
 
-// Format emojis (see emoji.js)
-const emojis = {};
-rawEmojis.forEach((emoji) => {
-  emoji.aliases.forEach((alias) => {
-    emojis[alias] = emoji.emoji;
-  });
-});
-
-const toEmojis = (tags) => {
-  if (!tags) return [];
-  return tags.filter((tag) => tag in emojis).map((tag) => emojis[tag]);
-};
-
-export const formatTitle = (m) => {
-  const emojiList = toEmojis(m.tags);
-  if (emojiList.length > 0) {
-    return `${emojiList.join(" ")} ${m.title}`;
-  }
-  return m.title;
-};
-
-export const formatTitleWithDefault = (m, fallback) => {
-  if (m.title) {
-    return formatTitle(m);
-  }
-  return fallback;
-};
-
-export const formatMessage = (m) => {
-  if (m.title) {
-    return m.message;
-  }
-  const emojiList = toEmojis(m.tags);
-  if (emojiList.length > 0) {
-    return `${emojiList.join(" ")} ${m.message}`;
-  }
-  return m.message;
-};
-
 export const unmatchedTags = (tags) => {
   if (!tags) return [];
-  return tags.filter((tag) => !(tag in emojis));
+  return tags.filter((tag) => !(tag in emojisMapped));
 };
 
 export const encodeBase64 = (s) => Base64.encode(s);

web/src/components/Notifications.jsx

@@ -24,17 +24,8 @@ import { useLiveQuery } from "dexie-react-hooks";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { Trans, useTranslation } from "react-i18next";
 import { useOutletContext } from "react-router-dom";
-import {
-  formatBytes,
-  formatMessage,
-  formatShortDateTime,
-  formatTitle,
-  maybeAppendActionErrors,
-  openUrl,
-  shortUrl,
-  topicShortUrl,
-  unmatchedTags,
-} from "../app/utils";
+import { formatBytes, formatShortDateTime, maybeAppendActionErrors, openUrl, shortUrl, topicShortUrl, unmatchedTags } from "../app/utils";
+import { formatMessage, formatTitle } from "../app/notificationUtils";
 import { LightboxBackdrop, Paragraph, VerticallyCenteredContainer } from "./styles";
 import subscriptionManager from "../app/SubscriptionManager";
 import priority1 from "../img/priority-1.svg";