@braze/web-sdk 5.3.2 → 5.4.0

package/index.d.ts

@@ -1,5 +1,5 @@
 /*
-* Type definitions for @braze/web-sdk v5.3.2
+* Type definitions for @braze/web-sdk v5.4.0
 * Project: https://github.com/braze-inc/braze-web-sdk
 * (c) Braze, Inc. 2024 - http://braze.com
 * License available at https://github.com/braze-inc/braze-web-sdk/blob/master/LICENSE
@@ -2138,7 +2138,7 @@ export function openSession(): void;
  * - Create a `service-worker.js` file with the content below and place it in the root directory of your website:
  *
  * ```
- * self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.3/service-worker.js');
+ * self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.4/service-worker.js');
  * ```
  *
  * For more details, see [Our Product Documentation](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/push_notifications/integration).
@@ -2408,7 +2408,7 @@ export function subscribeToFeatureFlagsUpdates(
 export function getAllFeatureFlags(): FeatureFlag[];
 
 /**
- * Logs impression for a given feature flag.
+ * Logs impression for a given feature flag. This is limited to one impression per session per feature flag ID.
  *
  * @param featureFlagId - ID of the feature flag that has received the impression.
  *
@@ -2418,6 +2418,11 @@ export function logFeatureFlagImpression(
   featureFlagId: string,
 ): boolean | undefined;
 
+/**
+ * Getter method to determine if the Braze SDK has been initialized.
+ */
+export function isInitialized(): boolean;
+
 /**
  * Supported initialization options
  *
@@ -2513,7 +2518,7 @@ export type InitializationOptions = {
    *   lifecycle of, set this option to true and the Braze SDK will not register or unregister a service worker. If you set this
    *   option to true, in order for push to function correctly you must register the service worker yourself BEFORE calling
    *   `requestPushPermission`, and ensure that it contains Braze's service worker code, either with
-   *   `self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.3/service-worker.js');` or by including the content
+   *   `self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.4/service-worker.js');` or by including the content
    *   of that file directly. When this option is true, the `serviceWorkerLocation` option is irrelevant and is ignored.
    */
   manageServiceWorkerExternally?: boolean;
@@ -2570,6 +2575,17 @@ export type InitializationOptions = {
    *   default with a value of your own.
    */
   deviceId?: string;
+  /**
+   * By default, Braze will register service worker with scope as the directory where the service worker script is located.
+   *
+   *   Provide a value for this option to override that with a different scope. If you are using Service-Worker-Allowed header to specify scope,
+   *   ensure that the value provided here either matches the value returned by the header or is a subdirectory of it.
+   *
+   *   For example, if the scope is '/path/to/subdirectory/' and the header is set to '/', the registration will succeed. However, if the scope is '/' and the
+   *   header is set to '/path/to/subdirectory/', the registration will fail because the provided scope ('/') is not under the maximum scope allowed
+   *   by Service-Worker-Allowed: '/path/to/subdirectory/'.
+   */
+  serviceWorkerScope?: string;
 };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braze/web-sdk",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Braze SDK for web sites and other JS platforms.",
   "main": "src/index.js",
   "scripts": {

package/shared-lib/event-types.js

@@ -1,9 +1,9 @@
 const i = {
     CustomEvent: "ce",
     Pr: "p",
-    _u: "pc",
+    Eu: "pc",
     vc: "ca",
-    Ea: "i",
+    Ka: "i",
     qs: "ie",
     M: "cci",
     R: "ccic",
@@ -16,18 +16,18 @@ const i = {
     Ei: "sbc",
     Cc: "sfe",
     mo: "iec",
-    Uu: "lr",
-    zu: "uae",
+    Bu: "lr",
+    _u: "uae",
     O: "ci",
     $: "cc",
-    Ju: "lcaa",
-    Eu: "lcar",
+    Wu: "lcaa",
+    Ku: "lcar",
     On: "inc",
     Ln: "add",
     Rn: "rem",
     $n: "set",
     Bn: "ncam",
-    Ku: "sgu",
+    Gu: "sgu",
     Fr: "ffi",
   },
   or = { Ar: "feed_displayed", Ec: "content_cards_displayed" };

package/shared-lib/indexed-db-adapter.js

@@ -338,7 +338,7 @@ A.Yt = {
     Sd: "AppboyServiceWorkerAsyncStorage",
     VERSION: 6,
     ss: {
-      $a: "data",
+      La: "data",
       hr: "pushClicks",
       cu: "pushSubscribed",
       Cd: "fallbackDevice",

package/shared-lib/logger.js

@@ -24,13 +24,13 @@ const r = {
   },
   warn: function (n) {
     if (r.zg) {
-      const o = "Braze SDK Warning: " + n + " (v5.3.2)";
+      const o = "Braze SDK Warning: " + n + " (v5.4.0)";
       null != r.vd ? r.vd(o) : console.warn(o);
     }
   },
   error: function (n) {
     if (r.zg) {
-      const o = "Braze SDK Error: " + n + " (v5.3.2)";
+      const o = "Braze SDK Error: " + n + " (v5.4.0)";
       null != r.vd ? r.vd(o) : console.error(o);
     }
   },

package/shared-lib/supported-options.js

@@ -2,17 +2,17 @@ export default {
   Eo: "allowCrawlerActivity",
   _o: "baseUrl",
   Io: "noCookies",
-  Ao: "devicePropertyAllowlist",
-  _a: "disablePushTokenMaintenance",
-  So: "enableLogging",
+  So: "devicePropertyAllowlist",
+  ka: "disablePushTokenMaintenance",
+  Ao: "enableLogging",
   No: "enableSdkAuthentication",
-  Ma: "manageServiceWorkerExternally",
+  _a: "manageServiceWorkerExternally",
   Oo: "minimumIntervalBetweenTriggerActionsInSeconds",
-  Po: "sessionTimeoutInSeconds",
-  Ro: "appVersion",
+  Ro: "sessionTimeoutInSeconds",
+  Po: "appVersion",
   Lo: "appVersionNumber",
   wa: "serviceWorkerLocation",
-  ya: "safariWebsitePushId",
+  Ma: "safariWebsitePushId",
   zn: "localization",
   bo: "contentSecurityNonce",
   Do: "allowUserSuppliedJavascript",
@@ -22,6 +22,7 @@ export default {
   Lh: "requireExplicitInAppMessageDismissal",
   Mo: "doNotLoadFontAwesome",
   Uo: "deviceId",
-  Bo: "sdkFlavor",
+  ya: "serviceWorkerScope",
+  Wo: "sdkFlavor",
   tn: "openCardsInNewTab",
 };

package/src/Card/display/card-display.js

@@ -41,98 +41,99 @@ export function setCardHeight(t, o) {
       t && (a.style.height = `${t}px`);
     }
 }
-export function cardToHtml(t, logCardClick, o) {
-  const e = document.createElement("div");
-  (e.className = "ab-card ab-effect-card " + t._),
+export function cardToHtml(t, logCardClick, o, e = "ltr") {
+  const a = document.createElement("div");
+  (a.dir = e),
+    (a.className = "ab-card ab-effect-card " + t._),
     t.id &&
-      (e.setAttribute("data-ab-card-id", t.id), e.setAttribute("id", t.id)),
-    e.setAttribute("role", "article"),
-    e.setAttribute("tabindex", "0");
-  let a = "",
-    n = !1;
-  t.url && "" !== t.url && ((a = t.url), (n = !0));
-  const i = (i) => (markCardAsRead(e), n && (logCardClick(t), u(a, o, i)), !1);
+      (a.setAttribute("data-ab-card-id", t.id), a.setAttribute("id", t.id)),
+    a.setAttribute("role", "article"),
+    a.setAttribute("tabindex", "0");
+  let n = "",
+    i = !1;
+  t.url && "" !== t.url && ((n = t.url), (i = !0));
+  const r = (e) => (markCardAsRead(a), i && (logCardClick(t), u(n, o, e)), !1);
   if (t.pinned) {
     const t = document.createElement("div");
     t.className = "ab-pinned-indicator";
     const o = document.createElement("i");
-    (o.className = "fa fa-star"), t.appendChild(o), e.appendChild(t);
+    (o.className = "fa fa-star"), t.appendChild(o), a.appendChild(t);
   }
   if (t.imageUrl && "" !== t.imageUrl) {
     const o = document.createElement("div");
-    o.className = "ab-image-area";
-    const r = document.createElement("img");
+    (o.dir = e), (o.className = "ab-image-area");
+    const d = document.createElement("img");
     if (
-      (r.setAttribute("src", t.imageUrl),
-      (r.onload = () => {
-        e.style.height = "auto";
+      (d.setAttribute("src", t.imageUrl),
+      (d.onload = () => {
+        a.style.height = "auto";
       }),
-      _setImageAltText(t, r),
-      o.appendChild(r),
-      (e.className += " with-image"),
-      n && !t.S)
+      _setImageAltText(t, d),
+      o.appendChild(d),
+      (a.className += " with-image"),
+      i && !t.S)
     ) {
       const t = document.createElement("a");
-      t.setAttribute("href", a),
-        (t.onclick = i),
+      t.setAttribute("href", n),
+        (t.onclick = r),
         t.appendChild(o),
-        e.appendChild(t);
-    } else e.appendChild(o);
+        a.appendChild(t);
+    } else a.appendChild(o);
   }
-  const r = document.createElement("div");
-  if (((r.className = "ab-card-body"), t.dismissible)) {
+  const s = document.createElement("div");
+  if (((s.className = "ab-card-body"), (s.dir = e), t.dismissible)) {
     t.logCardDismissal = () => logCardDismissal(t);
-    const o = d("Dismiss Card", void 0, t.dismissCard.bind(t));
-    e.appendChild(o),
-      c(r, m.U, (t) => {
-        (e.className += " ab-swiped-left"), o.onclick(t);
+    const o = d("Dismiss Card", void 0, t.dismissCard.bind(t), e);
+    a.appendChild(o),
+      c(s, m.U, (t) => {
+        (a.className += " ab-swiped-left"), o.onclick(t);
       }),
-      c(r, m.V, (t) => {
-        (e.className += " ab-swiped-right"), o.onclick(t);
+      c(s, m.V, (t) => {
+        (a.className += " ab-swiped-right"), o.onclick(t);
       });
   }
-  let s = "",
-    l = !1;
-  if ((t.title && "" !== t.title && ((s = t.title), (l = !0)), l)) {
+  let l = "",
+    b = !1;
+  if ((t.title && "" !== t.title && ((l = t.title), (b = !0)), b)) {
     const t = document.createElement("h1");
     if (
       ((t.className = "ab-title"),
       (t.id = p.W()),
-      e.setAttribute("aria-labelledby", t.id),
-      n)
+      a.setAttribute("aria-labelledby", t.id),
+      i)
     ) {
       const o = document.createElement("a");
-      o.setAttribute("href", a),
-        (o.onclick = i),
-        o.appendChild(document.createTextNode(s)),
+      o.setAttribute("href", n),
+        (o.onclick = r),
+        o.appendChild(document.createTextNode(l)),
         t.appendChild(o);
-    } else t.appendChild(document.createTextNode(s));
-    r.appendChild(t);
+    } else t.appendChild(document.createTextNode(l));
+    s.appendChild(t);
   }
-  const b = document.createElement("div");
+  const f = document.createElement("div");
   if (
-    ((b.className = l ? "ab-description" : "ab-description ab-no-title"),
-    (b.id = p.W()),
-    e.setAttribute("aria-describedby", b.id),
-    t.description && b.appendChild(document.createTextNode(t.description)),
-    n)
+    ((f.className = b ? "ab-description" : "ab-description ab-no-title"),
+    (f.id = p.W()),
+    a.setAttribute("aria-describedby", f.id),
+    t.description && f.appendChild(document.createTextNode(t.description)),
+    i)
   ) {
     const o = document.createElement("div");
     o.className = "ab-url-area";
     const e = document.createElement("a");
-    e.setAttribute("href", a),
+    e.setAttribute("href", n),
       t.linkText && e.appendChild(document.createTextNode(t.linkText)),
-      (e.onclick = i),
+      (e.onclick = r),
       o.appendChild(e),
-      b.appendChild(o);
+      f.appendChild(o);
   }
-  r.appendChild(b), e.appendChild(r);
-  const f = document.createElement("div");
+  s.appendChild(f), a.appendChild(s);
+  const x = document.createElement("div");
   return (
-    (f.className = "ab-unread-indicator"),
-    t.viewed && (f.className += " read"),
-    e.appendChild(f),
-    (t.T = e),
-    e
+    (x.className = "ab-unread-indicator"),
+    t.viewed && (x.className += " read"),
+    a.appendChild(x),
+    (t.T = a),
+    a
   );
 }

package/src/Core/index.js

@@ -9,6 +9,7 @@ export { getDeviceId } from "./get-device-id.js";
 export { getUser } from "./get-user.js";
 export { initialize } from "./initialize.js";
 export { isDisabled } from "./is-disabled.js";
+export { isInitialized } from "./is-initialized.js";
 export { logCustomEvent } from "./log-custom-event.js";
 export { logPurchase } from "./log-purchase.js";
 export { openSession } from "./open-session.js";

package/src/Core/is-initialized.js

@@ -0,0 +1,4 @@
+import e from "../managers/braze-instance.js";
+export function isInitialized() {
+  return e.so();
+}

package/src/InAppMessage/display/in-app-message-to-html.js

@@ -16,54 +16,55 @@ import { _handleBrazeAction as u } from "../../Core/handle-braze-action.js";
 import dt from "./html-message-to-html.js";
 import le from "./modal-utils.js";
 import { logger as r, Guid as p } from "../../../shared-lib/index.js";
-export default function ce(e, o, a, t, n, s, i, l = document.body) {
+export default function ce(e, o, a, t, n, s, i, l = document.body, b = "ltr") {
   if (((e.ke = document.activeElement), e instanceof HtmlMessage))
     return dt(e, o, a, n, s, i);
-  const b = (function (e, o, a, t, n, s, i = document.body) {
-    let m = null;
-    const l = document.createElement("div");
-    (l.className = "ab-in-app-message ab-start-hidden ab-background"),
-      s && (l.style.zIndex = (s + 1).toString()),
+  const g = (function (e, o, a, t, n, s, i = document.body, m = "ltr") {
+    let l = null;
+    const c = document.createElement("div");
+    (c.dir = m),
+      (c.className = "ab-in-app-message ab-start-hidden ab-background"),
+      s && (c.style.zIndex = (s + 1).toString()),
       e.$e() &&
-        ((l.className += " ab-modal-interactions"),
-        l.setAttribute("tabindex", "-1")),
+        ((c.className += " ab-modal-interactions"),
+        c.setAttribute("tabindex", "-1")),
       e.ve() ||
-        ((l.style.color = ie(e.textColor)),
-        (l.style.backgroundColor = ie(e.backgroundColor)),
-        ne(e.backgroundColor) && (l.className += " ab-no-shadow"));
-    const c = () => {
-        -1 !== l.className.indexOf("ab-start-hidden") &&
-          ((l.className = l.className.replace("ab-start-hidden", "")),
+        ((c.style.color = ie(e.textColor)),
+        (c.style.backgroundColor = ie(e.backgroundColor)),
+        ne(e.backgroundColor) && (c.className += " ab-no-shadow"));
+    const b = () => {
+        -1 !== c.className.indexOf("ab-start-hidden") &&
+          ((c.className = c.className.replace("ab-start-hidden", "")),
           document.querySelectorAll(".ab-iam-img-loading").length > 0
             ? t(
                 `Cannot show in-app message ${e.message} because another message is being shown.`,
                 InAppMessage.Le.ze,
               )
-            : a(l));
+            : a(c));
       },
-      b = (o = !0) => {
+      g = (o = !0) => {
         let a = document.querySelectorAll(".ab-iam-root");
         (a && 0 !== a.length) || (a = i.querySelectorAll(".ab-iam-root")),
           a &&
             a.length > 0 &&
             (a[0].classList.remove("ab-iam-img-loading"),
-            m && (clearTimeout(m), (m = null)),
+            l && (clearTimeout(l), (l = null)),
             o
-              ? c()
+              ? b()
               : r.error(
                   `Cannot show in-app message ${e.message} because the image failed to load.`,
                 ));
       };
     e.imageStyle === InAppMessage.ImageStyle.GRAPHIC &&
-      (l.className += " graphic"),
+      (c.className += " graphic"),
       e.orientation === InAppMessage.Orientation.LANDSCAPE &&
-        (l.className += " landscape"),
+        (c.className += " landscape"),
       null != e.buttons &&
         0 === e.buttons.length &&
         (e.clickAction !== InAppMessage.ClickAction.NONE &&
-          (l.className += " ab-clickable"),
-        (l.onclick = (a) => (
-          e.Cr(l, () => {
+          (c.className += " ab-clickable"),
+        (c.onclick = (a) => (
+          e.Cr(c, () => {
             logInAppMessageClick(e),
               e.clickAction === InAppMessage.ClickAction.URI
                 ? u(
@@ -76,21 +77,22 @@ export default function ce(e, o, a, t, n, s, i, l = document.body) {
           a.stopPropagation(),
           !1
         )));
-    const g = d(
+    const f = d(
       "Close Message",
       e.ve() ? void 0 : ie(e.closeButtonColor),
       () => {
-        e.Cr(l);
+        e.Cr(c);
       },
+      m,
     );
-    l.appendChild(g), s && (g.style.zIndex = (s + 2).toString());
-    const f = document.createElement("div");
-    f.className = "ab-message-text";
-    const h = (e.messageAlignment || e.qe).toLowerCase();
-    f.className += " " + h + "-aligned";
-    let j = !1;
-    const w = document.createElement("div");
-    if (((w.className = "ab-image-area"), e.imageUrl)) {
+    c.appendChild(f), s && (f.style.zIndex = (s + 2).toString());
+    const h = document.createElement("div");
+    (h.className = "ab-message-text"), (h.dir = m);
+    const j = (e.messageAlignment || e.qe).toLowerCase();
+    h.className += " " + j + "-aligned";
+    let w = !1;
+    const v = document.createElement("div");
+    if (((v.className = "ab-image-area"), e.imageUrl)) {
       if (e.cropType === InAppMessage.CropType.CENTER_CROP) {
         const o = document.createElement("span");
         (o.className = "ab-center-cropped-img"),
@@ -98,7 +100,7 @@ export default function ce(e, o, a, t, n, s, i, l = document.body) {
           o.setAttribute("role", "img"),
           o.setAttribute("aria-label", "Modal Image"),
           e.Ae(o),
-          w.appendChild(o);
+          v.appendChild(o);
       } else {
         const o = document.createElement("img");
         if (
@@ -106,24 +108,24 @@ export default function ce(e, o, a, t, n, s, i, l = document.body) {
           e.Ae(o),
           0 === document.querySelectorAll(".ab-iam-img-loading").length)
         ) {
-          j = !0;
+          w = !0;
           const e = document.querySelectorAll(".ab-iam-root");
           e && e.length > 0 && e[0].classList.add("ab-iam-img-loading"),
-            (m = window.setTimeout(() => {
-              b(!1);
+            (l = window.setTimeout(() => {
+              g(!1);
             }, 6e4)),
             (o.onload = () => {
-              b();
+              g();
             }),
             (o.onerror = () => {
-              b(!1);
+              g(!1);
             });
         }
-        w.appendChild(o);
+        v.appendChild(o);
       }
-      l.appendChild(w), (f.className += " ab-with-image");
+      c.appendChild(v), (h.className += " ab-with-image");
     } else if (e.icon) {
-      w.className += " ab-icon-area";
+      v.className += " ab-icon-area";
       const o = document.createElement("span");
       (o.className = "ab-icon"),
         e.ve() ||
@@ -134,11 +136,11 @@ export default function ce(e, o, a, t, n, s, i, l = document.body) {
         a.appendChild(document.createTextNode(e.icon)),
         a.setAttribute("aria-hidden", "true"),
         o.appendChild(a),
-        w.appendChild(o),
-        l.appendChild(w),
-        (f.className += " ab-with-icon");
+        v.appendChild(o),
+        c.appendChild(v),
+        (h.className += " ab-with-icon");
     }
-    if ((oe(f, "touchstart"), e.header && e.header.length > 0)) {
+    if ((oe(h, "touchstart"), e.header && e.header.length > 0)) {
       const o = document.createElement("h1");
       (o.className = "ab-message-header"), (e.De = p.W()), (o.id = e.De);
       const a = (
@@ -147,19 +149,19 @@ export default function ce(e, o, a, t, n, s, i, l = document.body) {
       (o.className += " " + a + "-aligned"),
         e.ve() || (o.style.color = ie(e.headerTextColor)),
         o.appendChild(document.createTextNode(e.header)),
-        f.appendChild(o);
+        h.appendChild(o);
     }
-    return f.appendChild(e.Ge()), l.appendChild(f), j || c(), (e.Re = l), l;
-  })(e, o, a, t, n, s, l);
+    return h.appendChild(e.Ge()), c.appendChild(h), w || b(), (e.Re = c), c;
+  })(e, o, a, t, n, s, l, b);
   if (e instanceof FullScreenMessage || e instanceof ModalMessage) {
     const a = e instanceof FullScreenMessage ? "ab-fullscreen" : "ab-modal";
-    (b.className += ` ${a} ab-centered`),
-      le.He(e, o, b, n),
-      le.Je(b),
-      le.Ke(e.De, b);
+    (g.className += ` ${a} ab-centered`),
+      le.He(e, o, g, n),
+      le.Je(g),
+      le.Ke(e.De, g);
   } else if (e instanceof SlideUpMessage) {
-    b.className += " ab-slideup";
-    const o = b.getElementsByClassName("ab-close-button")[0];
+    g.className += " ab-slideup";
+    const o = g.getElementsByClassName("ab-close-button")[0];
     if (null != o) {
       const a = ae(
         "0 0 11.38 19.44",
@@ -169,20 +171,20 @@ export default function ce(e, o, a, t, n, s, i, l = document.body) {
       a.setAttribute("class", "ab-chevron"), o.appendChild(a);
     }
     let a, t;
-    c(b, m.U, (e) => {
-      (b.className += " ab-swiped-left"),
+    c(g, m.U, (e) => {
+      (g.className += " ab-swiped-left"),
         null != o && null != o.onclick && o.onclick(e);
     }),
-      c(b, m.V, (e) => {
-        (b.className += " ab-swiped-right"),
+      c(g, m.V, (e) => {
+        (g.className += " ab-swiped-right"),
           null != o && null != o.onclick && o.onclick(e);
       }),
       e.slideFrom === InAppMessage.SlideFrom.TOP
         ? ((a = m.Oe), (t = " ab-swiped-up"))
         : ((a = m.Qe), (t = " ab-swiped-down")),
-      c(b, a, (e) => {
-        (b.className += t), null != o && null != o.onclick && o.onclick(e);
+      c(g, a, (e) => {
+        (g.className += t), null != o && null != o.onclick && o.onclick(e);
       });
   }
-  return b;
+  return g;
 }