OneSignal/OneSignal-Website-SDK

[Question]: Cant get welcomenotification to trigger

cgar420 opened this issue · 9 comments

cgar420 commented

How can we help?

Here is my component to render OneSignal UI in the app. It works. I can see the slide prompt and subscription bell, and subscribe to push notifications. And I can receive notifications when they are sent from the onesignal dashboard

BUT the welcomeNotification does not trigger. Am I doing something wrong?

This is in Next.js 14 app router. I use <OneSignalUI/> defined below in my Root Layout

"use client"

import { useEffect } from 'react';
import OneSignal from 'react-onesignal';

export default function OneSignalUI() {
    const initializeOneSignal = async () => {
        await OneSignal.init({
            appId: 'xxxxxxxxxxxxxxxxxxx',
            safari_web_id: "xxxxxxxxxxxxx",
            notifyButton: {
                enable: true,
                showCredit: false
            },
            welcomeNotification: {
                disable: false,
                title: "Hello",
                message: "World",
                url: "https://mywebsite.com"
            },
            promptOptions: {
                slidedown: {
                  prompts: [
                    {
                      type: "push", 
                      autoPrompt: true,
                      text: {
                        actionMessage: "Push Notifications are the BEST way to engage & direct your users. Let us show you!",
                        acceptButton: "Show me!",
                        cancelButton: "No thanks"
                      },
                      delay: {
                        pageViews: 1,
                        timeDelay: 5
                      }
                    }
                  ]
                }
              }
        });
        OneSignal.Slidedown.promptPush();
    };

    useEffect(() => {
        initializeOneSignal();
    }, []);

    return (
        <></>
    );
}
jkasten2 commented

@cgar420 Thanks for reporting!

On the OneSignal dashboard, under Settings > Platforms > Web do you have "Typical Site" or "Custom Code"?

  • If you have "Typical Site" - you must configure the welcome notification on the dashboard settings.
  • If you have "Custom Code" - Your init code looks correct, so this should be working.

If the above doesn't help can you enable VERBOSE logging and share the log here? Also check the network tab to see if it's making a network call to POST onesignal.com/.../notifications.
Lastly include the browsers you have tested.

cgar420 commented

@jkasten2 I'm using custom code, not typical site

Im getting this error in the console
The FetchEvent for "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" resulted in a network error response: the promise was rejected.

jkasten2 commented

@cgar420 that file contains the main part of the OneSignal SDK that runs on the page. If that doesn't load nothing will work with OneSignal, won't be prompted, won't make any calls to create the User, etc.

If you are using an ad-blocker make sure to disable it, or use a browser profile without it.

  • Also browser's private mode or incognito don't support push notifications at all.
jkasten2 commented

@cgar420 were you able to solve this issue with the details in my last reply?

cgar420 commented
jkasten2 commented

@cgar420 thanks for sharing your site. I took a look and I see you have another service worker sw.js and it is overwriting the OneSignal service worker. When this happens the OneSignal SDK can no longer process push.

You can add a scope to OneSignal to avoid this issue (set "Service worker registration scope" to something like /onesignal/). See this documentation page on doing so:
https://documentation.onesignal.com/docs/onesignal-service-worker-faq

cgar420 commented
jkasten2 commented

Good to hear! I'll close this issue as resolved then.

Linuhusainnk commented

how to check if service worker is over written or not?