@phoenix-iq/notifications 1.1.0 → 1.2.0

package/README.md

@@ -1,9 +1,8 @@
 # @phoenix-iq/notifications (web SDK)
 
-Browser push for apps on `notifications.phnx-iq.com`, our replacement for OneSignal's web SDK. It subscribes the browser
-(standard Web Push with the app's VAPID key), binds it to your signed-in user with an identity token your backend signs,
-hands notification clicks to your app, and shows the subscription bell and banner when the app has them on. TypeScript, no
-dependencies.
+Browser push for apps on `notifications.phnx-iq.com`. It subscribes the browser (standard Web Push with the app's VAPID key),
+binds it to your signed-in user with an identity token your backend signs, hands notification clicks to your app, and draws
+the subscribe prompt HQ chose for the app: a bell, the app's logo or a pop-up. TypeScript, no dependencies.
 
 How the whole service works, the server API and the identity tokens: [docs/notifications.md](../../docs/notifications.md).
 
@@ -25,7 +24,7 @@ import { Notifications } from '@phoenix-iq/notifications';
 
 await Notifications.init({ appId: '<app id from HQ: Notification management>' });
 
-// from a click ("Get notifications"): browsers only show the prompt on a user gesture
+// from a click on your own button ("Get notifications"): browsers only ask on a user gesture
 const permission = await Notifications.requestPermission(); // 'granted' | 'denied' | 'default' | 'unsupported'
 
 // after your own sign-in, with the identity token your backend returned
@@ -39,27 +38,26 @@ await Notifications.logout();
 permission is granted is kept and applied once it is. Nothing throws on an unsupported browser; check
 `Notifications.isSupported()` and `Notifications.permission()` to decide what to show.
 
-## The subscription bell
+## The subscribe prompt
 
-Switch it on in HQ (the app → Web push → Subscription bell) and `init` draws it: a round bell in the bottom right or left
-corner, in the colour you chose. The first click asks the browser; then the bell shows that this browser is subscribed and
-offers "Unsubscribe", or, when notifications were blocked, says how to allow them again. It speaks the page's language
-(`<html lang="ar">` → Arabic, right to left; else English, or the `language` option), takes the page's font, and picks a
-light or dark panel from the page's background. It sits in a shadow root, so your CSS and its CSS stay apart, and it is
-hidden when printing. A change in HQ shows on the next page load. With *Hide the bell once subscribed*, only browsers that
-are not subscribed see it.
+HQ chooses one per app (the app → Web push → How visitors subscribe) and `init` draws it; a change shows on the next page load.
 
-## The subscription banner
+- **Bell** or **logo**: a round button in the bottom right or left corner, in the colour HQ set, showing a bell, or the app's
+  icon with a small bell on it (a logo that fails to load gives way to the bell). The first click asks the browser; then the
+  button shows that this browser is subscribed and offers "Unsubscribe", or, when notifications were blocked, says how to
+  allow them again. With *Hide after subscribing*, only browsers that are not subscribed see it.
+- **Pop-up**: shown, when its time comes, to a browser never asked: a card at the top or bottom with a message, "Subscribe"
+  (the browser's own question) and "Later". HQ sets the delay after the page opens, the page view it starts from and how many
+  days "Later" keeps it away; the SDK counts these in the browser (IndexedDB). Texts left empty are the SDK's own in the
+  page's language. On a phone a top pop-up comes from the bottom, clear of your header; the strip around the card lets
+  clicks through.
+- **None**: nothing is drawn. Ask from your own button with `requestPermission()`, and use `unsubscribe()` and the state
+  below.
 
-OneSignal's slide prompt. Switch it on in HQ (the app → Web push → Subscription banner) and `init` shows it, when its time
-comes, to a browser never asked: a card at the top or bottom with a message, "Subscribe" (the browser's own question) and
-"Later". HQ sets the delay after the page opens, the page view it starts from and how many days "Later" keeps it away; the
-SDK counts these in the browser (IndexedDB). Texts left empty are the SDK's own in the page's language. On a phone a top
-banner comes from the bottom, clear of your header, and a bottom one sits above the bell. Like the bell it lives in a shadow
-root; the strip around the card lets clicks through.
-
-A site with its own "Get notifications" button passes `bell: false` and `banner: false`, and uses `requestPermission()`,
-`unsubscribe()` and the state below.
+They speak the page's language (`<html lang="ar">` → Arabic, right to left; else English, or the `language` option), take
+the page's font, pick a light or dark look from the page's background, live in a shadow root (your CSS and theirs stay apart)
+and are hidden when printing. `bell: false` and `banner: false` in `init` keep the button or the pop-up off a page even when
+HQ chose it.
 
 ## Subscription state
 
@@ -92,17 +90,20 @@ With no tab open, the browser opens the link directly.
 | `serverUrl` | `https://notifications.phnx-iq.com` | `''` uses your own origin (development behind a proxy) |
 | `serviceWorkerPath` | `/phoenix-notifications-sw.js` | |
 | `serviceWorkerScope` | `/` | |
-| `language` | the page's (`<html lang>`), then the browser's | Picks the Arabic or English text of a notification, and the bell's language |
+| `language` | the page's (`<html lang>`), then the browser's | Picks the Arabic or English text of a notification, and the prompt's language |
 | `appVersion` | none | Stored with the device; in-app messages can target versions below one |
-| `bell` | as HQ set it | `false` never draws the subscription bell (a site with its own button) |
-| `banner` | as HQ set it | `false` never shows the subscription banner |
+| `bell` | as HQ chose | `false` never draws the floating button (bell or logo) |
+| `banner` | as HQ chose | `false` never shows the pop-up |
 
 ## Notes
 
 - iPhone and iPad: web push works only for a site added to the home screen (iOS 16.4+), as with any web push provider.
 - The device secret the server gives the browser is kept in IndexedDB; it only lets this browser manage its own subscription.
 - Your site must be in the app's sites (the app → Web push), or registration is refused.
-- `example/bell.html` draws the bell and the banner in every state without a server (serve `sdk/web`, open `/example/bell.html`).
+- `example/bell.html` draws the button (bell or logo) and the pop-up in every state without a server (serve `sdk/web`, open
+  `/example/bell.html`).
+- Up to 1.1.0 the SDK read a switch on the bell and one on the banner; from 1.2.0 it follows the one prompt HQ chose and can
+  draw the logo. An older SDK still works with a newer server: it draws a bell where HQ chose the logo.
 
 ## Publishing
 

package/dist/banner.d.ts

@@ -1,10 +1,10 @@
 import type { SubscriptionState } from './index.js';
 /**
- * The subscription banner (OneSignal's slide prompt): a card that slides in at the top or the bottom of the page with a short
- * message, "Subscribe" and "Later". "Subscribe" opens the browser's own question; "Later" keeps it away for some days. The SDK
+ * The pop-up of the banner prompt: a card that slides in at the top or the bottom of the page with a short message,
+ * "Subscribe" and "Later". "Subscribe" opens the browser's own question; "Later" keeps it away for some days. The SDK
  * decides when it shows (a browser never asked, from a page view, after a delay); this only draws it and answers its buttons.
  *
- * Like the bell it lives in a shadow root, takes the page's font and language and a light or dark look to suit the page.
+ * Like the floating button it lives in a shadow root, takes the page's font and language and a light or dark look to suit the page.
  * Texts HQ wrote are shown as they are; the empty ones are the SDK's own, in the page's language.
  */
 export type BannerPosition = 'top' | 'bottom';
@@ -31,11 +31,5 @@ export interface BannerApi {
 export interface BannerHandle {
     destroy(): void;
 }
-export interface BannerPlacement {
-    /** The app's icon, shown beside the message (else a bell in the banner's colour). */
-    iconUrl?: string | null;
-    /** The bell is on the page: a bottom banner keeps clear of it on narrow screens. */
-    aboveBell?: boolean;
-}
-/** Slides the banner in; `destroy()` takes it away at once. */
-export declare function mountBanner(api: BannerApi, settings: BannerSettings, language: string, placement?: BannerPlacement): BannerHandle;
+/** Slides the banner in, with the app's icon beside the message (else a bell in its colour); `destroy()` takes it away at once. */
+export declare function mountBanner(api: BannerApi, settings: BannerSettings, language: string, iconUrl?: string | null): BannerHandle;

package/dist/banner.js

@@ -41,11 +41,9 @@ button { font: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
 :host([data-position="top"]) .card { transform: translateY(-24px); }
 :host([data-position="bottom"]) .card { transform: translateY(24px); }
 @media (max-width: 600px) {
-  /* on a phone the top of the page is the site's header and menu: the banner comes from the bottom, as OneSignal's does */
+  /* on a phone the top of the page is the site's header and menu: the banner comes from the bottom */
   :host([data-position="top"]) { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
   :host([data-position="top"]) .card { transform: translateY(24px); }
-  /* and where it would cover the bell in its corner, it sits above it */
-  :host([data-above-bell]) { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
 }
 :host([data-shown]) .card { opacity: 1; transform: none; }
 .icon {
@@ -67,15 +65,12 @@ button { font: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
   .card { transition: opacity 0.2s ease; transform: none !important; }
 }
 `;
-/** Slides the banner in; `destroy()` takes it away at once. */
-export function mountBanner(api, settings, language, placement = {}) {
+/** Slides the banner in, with the app's icon beside the message (else a bell in its colour); `destroy()` takes it away at once. */
+export function mountBanner(api, settings, language, iconUrl) {
     const lang = uiLanguage(language);
     const t = TEXTS[lang];
-    const { iconUrl, aboveBell } = placement;
     const host = document.createElement('phoenix-notifications-banner');
     host.dataset.position = settings.position === 'bottom' ? 'bottom' : 'top';
-    if (aboveBell)
-        host.dataset.aboveBell = '';
     applyColors(host, colorOr(settings.color));
     const shadow = host.attachShadow({ mode: 'open' });
     // only constants go into this markup; HQ's texts and the icon's address are set as text and a property below

package/dist/bell.d.ts

@@ -1,20 +1,27 @@
 import type { SubscriptionState } from './index.js';
 /**
- * The subscription bell (OneSignal's "subscription bell"): a round button in a bottom corner of the site that subscribes this
- * browser on a click, shows that it is subscribed and lets the person unsubscribe, or explains how to allow notifications
- * again once they blocked them. HQ switches it on per app; the SDK draws it from the web config.
+ * The floating subscribe button of the bell and logo prompts: a round button in a bottom corner of the site that subscribes
+ * this browser on a click, shows that it is subscribed and lets the person unsubscribe, or explains how to allow notifications
+ * again once they blocked them. It shows a bell, or the app's logo with a small bell on it. HQ chooses the prompt per app;
+ * the SDK draws it from the web config.
  *
  * It lives in a shadow root, so the site's CSS cannot reach it and its CSS cannot leak out. It takes the page's font and
  * language (Arabic right to left, else English), the colour HQ gave it, and a light or dark panel to suit the page.
  */
 export type BellPosition = 'bottom_right' | 'bottom_left';
-/** The bell as HQ set it up (the web config's `bell`). */
+/** What the button shows: a bell, or the app's logo (its icon). */
+export type BellFace = 'bell' | 'logo';
+/** The button as HQ set it up (the web config's `bell`). */
 export interface BellSettings {
     position: BellPosition;
     /** `#rrggbb`; null: the SDK's blue. */
     color?: string | null;
     /** Only browsers that are not subscribed see it (after its thanks, a browser that subscribes no longer does). */
     hideWhenSubscribed?: boolean;
+    /** `bell` unless the logo prompt is chosen. */
+    face?: BellFace;
+    /** The logo's address (the app's icon); without one, or when it fails to load, the button shows the bell. */
+    logoUrl?: string | null;
 }
 /** What the bell needs from the SDK. */
 export interface BellApi {
@@ -27,5 +34,5 @@ export interface BellApi {
 export interface BellHandle {
     destroy(): void;
 }
-/** Draws the bell into the page; `destroy()` takes it away again. */
+/** Draws the button into the page; `destroy()` takes it away again. */
 export declare function mountBell(api: BellApi, settings: BellSettings, language: string): BellHandle;

package/dist/bell.js

@@ -66,6 +66,13 @@ button { font: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
   position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
   background: #16a34a; color: #ffffff; border: 2px solid #ffffff;
 }
+/* the logo face: the app's icon on a white disc ringed in the colour; its badge says what the button is for */
+:host([data-face="logo"]) .bell { background: #ffffff; box-shadow: 0 0 0 2px var(--bell), 0 6px 20px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.22); }
+:host([data-face="logo"]) .icon { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
+.logo { display: block; width: 100%; height: 100%; object-fit: cover; }
+:host([data-face="logo"][data-view="blocked"]) .logo { filter: grayscale(1); }
+.badge[data-kind="bell"] { background: var(--bell); color: var(--bell-text); }
+.badge[data-kind="blocked"] { background: #6b7280; }
 .bubble {
   position: absolute; bottom: 7px; width: max-content; max-width: min(260px, calc(100vw - 104px)); padding: 7px 11px; border-radius: 8px;
   background: var(--tip); color: var(--tip-text); font-size: 13px; line-height: 1.45; text-align: start;
@@ -105,10 +112,11 @@ button { font: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
   :host([data-attention][data-view="unsubscribed"]) .bell::after { animation: none; }
 }
 `;
-/** Draws the bell into the page; `destroy()` takes it away again. */
+/** Draws the button into the page; `destroy()` takes it away again. */
 export function mountBell(api, settings, language) {
     const lang = uiLanguage(language);
     const t = TEXTS[lang];
+    const logoUrl = settings.face === 'logo' && /^https?:\/\//i.test(settings.logoUrl ?? '') ? settings.logoUrl : null;
     const host = document.createElement('phoenix-notifications-bell');
     host.dataset.side = settings.position === 'bottom_left' ? 'left' : 'right';
     host.dataset.view = 'unsubscribed';
@@ -146,18 +154,48 @@ export function mountBell(api, settings, language) {
     let iconFor = null;
     /** Hidden until the first read of the state, so it never shows a wrong state (or shows at all, when it hides) first. */
     let settled = false;
+    /** The logo while it loads and after; a logo that fails to load gives way to the bell. */
+    let face = logoUrl ? 'logo' : 'bell';
+    let logo = null;
     const viewOf = (state) => (state.permission === 'denied' ? 'blocked' : state.subscribed ? 'subscribed' : 'unsubscribed');
+    function drawFace() {
+        if (face === 'bell') {
+            icon.innerHTML = svg(view === 'blocked' ? ICONS.bellOff : ICONS.bell, 24);
+            badge.innerHTML = svg(ICONS.check, 11, 3);
+            delete badge.dataset.kind;
+            return;
+        }
+        if (!logo) {
+            logo = document.createElement('img');
+            logo.className = 'logo';
+            logo.alt = '';
+            logo.src = logoUrl;
+            logo.addEventListener('error', () => {
+                face = 'bell';
+                iconFor = null;
+                render();
+            }, { once: true });
+        }
+        icon.replaceChildren(logo);
+        // the logo alone does not say "notifications": a bell on it does, a check once subscribed, a struck bell once blocked
+        badge.innerHTML = view === 'subscribed' ? svg(ICONS.check, 11, 3) : svg(view === 'blocked' ? ICONS.bellOff : ICONS.bell, 11, 2.4);
+        if (view === 'subscribed')
+            delete badge.dataset.kind;
+        else
+            badge.dataset.kind = view === 'blocked' ? 'blocked' : 'bell';
+    }
     function render() {
         host.dataset.view = view;
+        host.dataset.face = face;
         const hidden = !settled || (!!settings.hideWhenSubscribed && view === 'subscribed' && !open && !busy && !message);
         host.style.display = hidden ? 'none' : '';
         bell.setAttribute('aria-label', t[view]);
         bell.setAttribute('aria-expanded', String(open));
-        if (iconFor !== view) {
-            icon.innerHTML = svg(view === 'blocked' ? ICONS.bellOff : ICONS.bell, 24);
-            iconFor = view;
+        if (iconFor !== `${face}:${view}`) {
+            drawFace();
+            iconFor = `${face}:${view}`;
         }
-        badge.hidden = view !== 'subscribed';
+        badge.hidden = face === 'bell' && view !== 'subscribed';
         panel.hidden = !open;
         if (!open)
             return;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { type StoredDevice } from './store.js';
 /**
  * Phoenix Notifications web SDK: subscribes the browser to web push for an app on notifications.phnx-iq.com, binds it to
- * the signed-in user with an identity token from the app's own backend, and hands notification clicks to the app. When the
- * app has its subscription bell or banner switched on in HQ, it also draws them, so a site needs no button of its own.
+ * the signed-in user with an identity token from the app's own backend, and hands notification clicks to the app. It also
+ * draws the prompt HQ chose for the app (a bell, the app's logo or a pop-up), so a site needs no button of its own.
  *
  * Nothing here throws for an unsupported browser or a denied permission: check `isSupported()` / `permission()`.
  * The service worker file (phoenix-notifications-sw.js) must be served from the site, at `serviceWorkerPath`.
@@ -16,17 +16,19 @@ export interface InitOptions {
     serverUrl?: string;
     serviceWorkerPath?: string;
     serviceWorkerScope?: string;
-    /** Language the device reports (picks Arabic or English text, and the bell's language); defaults to the page's, then the browser's. */
+    /** Language the device reports (picks Arabic or English text, and the prompt's language); defaults to the page's, then the browser's. */
     language?: string;
     appVersion?: string;
     /**
-     * The subscription bell, drawn when the app has it switched on in HQ (the app → Web push → Subscription bell). `false`
-     * never draws it, for a site with its own "Get notifications" button.
+     * The floating button (a bell or the app's logo), drawn when HQ chose one of those as the app's prompt (the app → Web push
+     * → How visitors subscribe). `false` never draws it. A site with its own button usually has "None" chosen in HQ instead.
      */
     bell?: boolean;
-    /** The subscription banner, shown when the app has it switched on in HQ (the app → Web push → Subscription banner). `false` never shows it. */
+    /** The pop-up, shown when HQ chose it as the app's prompt. `false` never shows it. */
     banner?: boolean;
 }
+/** How the app's sites offer notifications, as HQ chose: one prompt, or none. */
+export type Prompt = 'none' | 'bell' | 'logo' | 'banner';
 export type PushPermission = 'granted' | 'denied' | 'default' | 'unsupported';
 /** Whether this browser gets the app's notifications, for a site's own button. */
 export interface SubscriptionState {
@@ -47,7 +49,7 @@ export declare const Notifications: {
     /** True when this browser can receive web push here (a secure context with service workers and the Push API). */
     isSupported(): boolean;
     /**
-     * Registers the service worker, and draws the subscription bell and the banner when the app has them on. When the person
+     * Registers the service worker, and draws the prompt HQ chose for the app (a bell, the logo or a pop-up). When the person
      * already allowed notifications (and did not unsubscribe here), subscribes quietly.
      */
     init(init: InitOptions): Promise<void>;

package/dist/index.js

@@ -3,14 +3,21 @@ import { mountBell } from './bell.js';
 import { keys, store } from './store.js';
 /**
  * Phoenix Notifications web SDK: subscribes the browser to web push for an app on notifications.phnx-iq.com, binds it to
- * the signed-in user with an identity token from the app's own backend, and hands notification clicks to the app. When the
- * app has its subscription bell or banner switched on in HQ, it also draws them, so a site needs no button of its own.
+ * the signed-in user with an identity token from the app's own backend, and hands notification clicks to the app. It also
+ * draws the prompt HQ chose for the app (a bell, the app's logo or a pop-up), so a site needs no button of its own.
  *
  * Nothing here throws for an unsupported browser or a denied permission: check `isSupported()` / `permission()`.
  * The service worker file (phoenix-notifications-sw.js) must be served from the site, at `serviceWorkerPath`.
  */
 export const DEFAULT_SERVER_URL = 'https://notifications.phnx-iq.com';
 export const DEFAULT_SERVICE_WORKER_PATH = '/phoenix-notifications-sw.js';
+function promptOf(web) {
+    if (!web)
+        return 'none';
+    if (web.prompt)
+        return web.prompt;
+    return web.bell?.enabled ? 'bell' : web.banner?.enabled ? 'banner' : 'none';
+}
 export class NotificationsError extends Error {
     status;
     constructor(status, message) {
@@ -276,11 +283,12 @@ function watchPermission() {
         .then((status) => status.addEventListener('change', changed))
         .catch(() => undefined);
 }
-/** Draws the bell once the app's config says so. A failure only means no bell. */
+/** Draws the floating button (a bell, or the app's logo) when it is the app's prompt. A failure only means no button. */
 async function showBell(appId) {
     try {
         const web = await webConfig();
-        if (bell?.appId !== appId || !web?.bell?.enabled)
+        const prompt = promptOf(web);
+        if (bell?.appId !== appId || !web?.bell || (prompt !== 'bell' && prompt !== 'logo'))
             return;
         if (document.readyState === 'loading')
             await new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve, { once: true }));
@@ -294,10 +302,10 @@ async function showBell(appId) {
             },
             unsubscribe: () => Notifications.unsubscribe(),
             onChange: (handler) => Notifications.onSubscriptionChange(handler),
-        }, web.bell, language());
+        }, { ...web.bell, face: prompt === 'logo' ? 'logo' : 'bell', logoUrl: web.iconUrl }, language());
     }
     catch (error) {
-        console.warn('[notifications] the subscription bell is not available', error);
+        console.warn('[notifications] the subscribe button is not available', error);
     }
 }
 function whenDocumentReady() {
@@ -306,15 +314,15 @@ function whenDocumentReady() {
     return new Promise((resolve) => document.addEventListener('DOMContentLoaded', () => resolve(), { once: true }));
 }
 /**
- * Slides the banner in when its time has come: only for a browser never asked (the permission still to be given, and no
- * unsubscribe here), from the page view HQ set, not within the days after a "Later", and after the delay. Each call is one page
- * view. A failure only means no banner.
+ * Slides the pop-up in when it is the app's prompt and its time has come: only for a browser never asked (the permission still
+ * to be given, and no unsubscribe here), from the page view HQ set, not within the days after a "Later", and after the delay.
+ * Each call is one page view. A failure only means no pop-up.
  */
 async function showBanner(appId) {
     try {
         const web = await webConfig();
         const settings = web?.banner;
-        if (banner?.appId !== appId || !settings?.enabled)
+        if (banner?.appId !== appId || !settings || promptOf(web) !== 'banner')
             return;
         if (Notification.permission !== 'default' || (await optedOut()))
             return;
@@ -328,7 +336,7 @@ async function showBanner(appId) {
             return;
         await new Promise((resolve) => setTimeout(resolve, Math.max(0, settings.delaySeconds) * 1000));
         await whenDocumentReady();
-        // the page may have moved on meanwhile: another app, the person subscribed with the bell, or answered the browser
+        // the page may have moved on meanwhile: another app, the person subscribed with the site's own button, or answered the browser
         if (banner?.appId !== appId || banner.handle || Notification.permission !== 'default' || (await optedOut()))
             return;
         banner.handle = mountBanner({
@@ -341,10 +349,10 @@ async function showBanner(appId) {
                 await store.set(key, { ...latest, dismissedAt: Date.now() });
             },
             onChange: (handler) => Notifications.onSubscriptionChange(handler),
-        }, settings, language(), { iconUrl: web?.iconUrl, aboveBell: !!bell?.handle });
+        }, settings, language(), web?.iconUrl);
     }
     catch (error) {
-        console.warn('[notifications] the subscription banner is not available', error);
+        console.warn('[notifications] the subscribe pop-up is not available', error);
     }
 }
 export const Notifications = {
@@ -353,7 +361,7 @@ export const Notifications = {
         return supported();
     },
     /**
-     * Registers the service worker, and draws the subscription bell and the banner when the app has them on. When the person
+     * Registers the service worker, and draws the prompt HQ chose for the app (a bell, the logo or a pop-up). When the person
      * already allowed notifications (and did not unsubscribe here), subscribes quietly.
      */
     async init(init) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phoenix-iq/notifications",
-  "version": "1.1.0",
-  "description": "Phoenix Notifications web SDK: browser push subscriptions, the subscription bell, verified sign-in and click handling for apps on notifications.phnx-iq.com.",
+  "version": "1.2.0",
+  "description": "Phoenix Notifications web SDK: browser push subscriptions, the subscribe prompt (a bell, the app's logo or a pop-up), verified sign-in and click handling for apps on notifications.phnx-iq.com.",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",