Push Notification Not Visible Despite Successful Event Received

[prasoon007]

Description
I have integrated CleverTap Web SDK in our Next.js project to capture user events and display push notifications. While we can see that the push event is received successfully, the notification itself does not appear in the UI. There are no explicit errors preventing it from showing, but it remains invisible.

Expected Behavior

• When a push event is received, a notification should be displayed to the user.

Actual Behavior

• The push event is received (console.log confirms Push event received).
• Notification does not appear despite self.registration.showNotification() being triggered.

Steps to Reproduce

• Integrate clevertap-web-sdk into a Next.js app.
• Register the service worker (clevertap_sw.js) and request push notification permission.
• Send a push notification from the CleverTap dashboard.
• Observe that the push event is received (console.log confirms Push event received), but the notification does not appear.

Service Worker (clevertap_sw.js)

/* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable no-undef */ !(function (n) { 'function' == typeof define && define.amd ? define(n) : n(); })(function () { 'use strict'; if ( (importScripts( 'https://d2r1yp2w7bby2u.cloudfront.net/js/localforage.min.js' ), void 0 === t) ) var n, t; function i(n, t, i) { let e = '', c = t; 'action1' === n.action ? (void 0 !== i.notificationOptions.actions[0].deepLink && ((c += '&r=' + encodeURIComponent(i.notificationOptions.actions[0].deepLink)), (e = i.notificationOptions.actions[0].deepLink)), (c += '&b=' + encodeURIComponent('button1'))) : 'action2' === n.action ? (void 0 !== i.notificationOptions.actions[1].deepLink && ((c += '&r=' + encodeURIComponent(i.notificationOptions.actions[1].deepLink)), (e = i.notificationOptions.actions[1].deepLink)), (c += '&b=' + encodeURIComponent('button2'))) : (void 0 !== i.deepLink && ((c += '&r=' + encodeURIComponent(i.deepLink)), (e = i.deepLink)), (c += '&b=' + encodeURIComponent('button0'))), o(c), e && clients.openWindow(e), n.notification.close(); } self.addEventListener('install', function (n) { self.skipWaiting(), console.log('CT Service worker installed'); }), self.addEventListener('activate', function (n) { console.log('CT Service worker activated'); }), self.addEventListener('push', function (i) { console.log('Push event received', i.data.text()); if (!i.data) { console.error('Push event received but no data!'); return; } var o, e = JSON.parse(i.data.text()), c = e.title || 'CleverTap', a = e.notificationOptions, d = a.data; void 0 !== d && ((d.wzrk_id += '_'.concat(new Date().getTime())), (o = d.wzrk_id)), void 0 === o && (o = c), localforage .setItem(o, i.data.text()) .then(function (n) {}) .catch(function (n) { console.log('Error in persisting'); }), (t = e.redirectPath), (n = e); var s = e.raiseNotificationViewedPath; void 0 !== s && fetch(s, { mode: 'no-cors' }), i.waitUntil( self.registration.showNotification(c, a).catch((err) => { console.error('Notification Error:', err); }) ); }), self.addEventListener('notificationclick', function (o) { var e, c = o.notification, a = c.data; null != a && (e = a.wzrk_id), void 0 === e && (e = c.title); var d = localforage .getItem(e) .then(function (n) { var t = JSON.parse(n), e = t.redirectPath; i(o, e, t); }) .catch(function (e) { i(o, t, n), console.log(e); }); o.waitUntil(d); }); var o = function (n) { fetch((n += '&s=true'), { mode: 'no-cors' }); }; });

Clevertab hook(useClevertab.ts)

 ```

import CleverTap from 'clevertap-web-sdk/clevertap';
import { useCallback, useEffect, useState } from 'react';
import { clevertabEventMapping } from '../utils/constants';
import { getUserFromLocal } from '../utils/localstorage';

  const CLEVERTAP_ACCOUNT_ID = process.env.NEXT_PUBLIC_CLEVERTAB_PROJECT_ID as string;
  
  export const useCleverTap = () => {
    const [clevertapModule, setClevertapModule] = useState<CleverTap | null>(null);
  
    const initializeClevertap = async (): Promise<CleverTap> => {
      const clevertapModule = await import('clevertap-web-sdk');
      clevertapModule.default.init(CLEVERTAP_ACCOUNT_ID);
      clevertapModule.default.privacy.push({ optOut: false });
      clevertapModule.default.privacy.push({ useIP: false });
      clevertapModule.default.setLogLevel(3);
  
      return clevertapModule.default;
    };
  
    const clevertapInit = useCallback(async () => {
      if (!clevertapModule) {
        const module = await initializeClevertap();
        setClevertapModule(module);
      }
    }, [clevertapModule]);
  
    useEffect(() => {
      clevertapInit();
    }, [clevertapInit]);
  
    const trackEventOnClevertab = (eventName: string, payload: Record<string, any> = {}) => {
      if (clevertapModule) {
        if (eventName === clevertabEventMapping.signIn || eventName === clevertabEventMapping.login) {
          payload = {
            Name: `${payload?.firstName} ${payload?.lastName}`,
            Identity: payload?.email,
            Phone: payload?.mobile?.replace('-', ''),
            id: payload?.id,
            isVerified: !!payload?.isVerified,
            language: payload?.language,
            profileImage: payload?.profileImage,
            status: !!payload?.status,
            email: payload?.email,
            userAddress: payload?.userAddress?.address,
            country: payload?.country?.code,
          };
        }
        payload['userType'] = getUserFromLocal() ? 'authenticated' : 'guest';
        payload['timestamp'] = new Date().toISOString();
        clevertapModule.event.push(eventName, payload);
      }
    };
  
    const captureUserOnClevertab = (user: Record<string, any>) => {
      if (!clevertapModule) {
        console.warn('CleverTap is not initialized yet.');
        return;
      }
      clevertapModule.onUserLogin.push({
        Site: {
          Name: `${user?.firstName} ${user?.lastName}`,
          Identity: user?.email,
          Phone: user?.mobile?.replace('-', ''),
          id: user?.id,
          isVerified: !!user?.isVerified,
          language: user?.language,
          profileImage: user?.profileImage,
          status: !!user?.status,
          email: user?.email,
          userAddress: user?.userAddress?.address,
          country: user?.country?.code,
        },
      });
      askUserNotifications();
    };
  
    const askUserNotifications = () => {
      if (!clevertapModule) {
        console.warn('CleverTap is not initialized yet.');
        return;
      }
      clevertapModule.notifications.push({
        titleText: 'Would you like to receive Push Notifications?',
        bodyText: 'We promise to only send you relevant content',
        okButtonText: 'Allow',
        rejectButtonText: 'No thanks',
        okButtonColor: '#F28046',
        askAgainTimeInSeconds: 5,
        serviceWorkerPath: '/clevertap_sw.js',
      });
      console.log('Notification permission asked');
    };
  
    return {
      trackEventOnClevertab,
      captureUserOnClevertab,
      askUserNotifications,
    };
  };

**Environment**

- OS: Mac Os M1
- Browser: Chrome 133.0.6943.99
- CleverTap Web SDK Version: 1.11.12
- Next.js Version: 12.3.4

[singhkunal2050]

Hello @prasoon007 ,

1. Can you share the source link for the clevertap_sw.js that you shared. the Official service worker is at https://s3-eu-west-1.amazonaws.com/static.wizrocket.com/js/sw_webpush.js as shared in the docs here

2. Also can you add a debugger and check if there are any runtime issues in clevertap_sw.js due to which the notifications are not rendered.

[prasoon007]

@singhkunal2050 This issue has been fixed after downgrading to version 1.11.2. However, I am now experiencing a different problem. In this version, my web pop-ups are appearing with a delay of around 1 hour, even though the campaign is excluded from campaign limits.

I am receiving the event for the web pop-up correctly, but the delay persists. Could you please help me resolve this?

[kkyusuftk]

@prasoon007 please help us with the campaign information, we can debug it further than