OneSignal / OneSignal-Website-SDK

OneSignal is a push notification service for web and mobile apps. This SDK makes it easy to integrate your website with OneSignal Push Notifications. https://onesignal.com
Other
388 stars 115 forks source link

[Bug]: Doesn't work with Brave browser, but Chrome does. Also can't seem to receive notifications on localhost. Tried to use optOut as well. #1154

Closed Inzendis closed 8 months ago

Inzendis commented 8 months ago

What happened?

In Chrome I can do

function getUserInfo() {
    console.log('getUserInfo()');
    Promise.all([
        OneSignal.Notifications.permission,
        OneSignal.User.PushSubscription.id,
        OneSignal.User.PushSubscription.token,
        OneSignal.User.PushSubscription.optedIn,
        OneSignal.context.serviceWorkerManager.getActiveState(),
    ])
        .then(
            ([
                isSubscribed,
                subscriptionId,
                pushToken,
        optedIn,
                serviceWorkerActive,
            ]) => {
        console.log('What is the current URL of this page?', location.href);
         console.log(
                    "Is a service worker registered and active? (should be false on Safari, otherwise should be 'OneSignal Worker')?",
                    serviceWorkerActive
                );
        console.log('')
        console.log('Are you subscribed, in the browser?', isSubscribed)
        console.log('Are you opted-in, in OneSignal?' , optedIn);
                console.log('');
                console.log('What is your OneSignal Subscription ID?', subscriptionId);
                console.log('What is your Push Token?', pushToken);

            }
        )
        .catch(e => {
            console.error('Issue determining whether push is enabled:', e);
        });
}
getUserInfo();

And I get all the correct info. In Brave browser I get

image

Also I got notifications enabled in my PC and in Chrome and I can subscribe there but when I do test notifications it doesn't work.

It used to work a couple of months ago, maybe July of last year when I was testing this before thinking of using it. And now that I need it its a problem.

Maybe because im in a sub directory /home?

What browsers are you seeing the problem on?

Brave

What operating system are you running?

Windows 10

Steps to reproduce?

1.  react-onesignal install
2. basic OneSignal.init (in another file, with "use client" then I place it in the <head>)
3. Just testing after subscribing

What did you expect to happen?

Just basic notifications to be sent and received

Relevant log output

What is the current URL of this page? http://localhost:3000/home
VM57988:19 Is a service worker registered and active? (should be false on Safari, otherwise should be 'OneSignal Worker')? OneSignal Worker
VM57988:23 
VM57988:24 Are you subscribed, in the browser? true
VM57988:25 Are you opted-in, in OneSignal? true
VM57988:26 
VM57988:27 What is your OneSignal Subscription ID? 70b9bb3f-9bff-4054-af8f-efd6ef243da1
VM57988:28 What is your Push Token? https://fcm.googleapis.com/fcm/send/eXkBkSTSg-Y:APA91bHBzRmBn1KutmM-hNs1Ot6c4OAZ9pgIYu6mYwrViu_uG5QfysLS9sbh6ftlwZzmm0DRXouyVLBMbqZ-Hbp84h0KiRpS78aZp2IazcD7-IBg4O7h2Sz-wFw-mosaAeRLFavEXo5G
94ExecutorBase.js:20 OneSignal: checking for operations to process from cache
Inzendis commented 8 months ago

Tested on a Vercel hosted version that I had when I tested back then and it worked, got the subscribe message. I dont get it, it doesnt work on localhost or on brave, The hosted one in vercel only worked on chrome.

I just can't seem to be able to test it in localhost.

Inzendis commented 8 months ago

I think I need to update the importScript to /v16 just noticed that changed to that.

jkasten2 commented 8 months ago

@Inzendis Brave blocks OneSignal by default, tuning off Braves shields should fix the issue you are seeing.

I think I need to update the importScript to /v16 just noticed that changed to that.

Make sure both the .js file used in the <script> tag on you page AND the service worker importScript have v16 in the path. Mixing vesions will create issues, so I recommend clearing your site data to ensure it didn't create any issues.

Inzendis commented 8 months ago

@Inzendis Brave blocks OneSignal by default, tuning off Braves shields should fix the issue you are seeing.

I think I need to update the importScript to /v16 just noticed that changed to that.

Make sure both the .js file used in the <script> tag on you page AND the service worker importScript have v16 in the path. Mixing vesions will create issues, so I recommend clearing your site data to ensure it didn't create any issues.

Ok fixed it. I made sure to update the SDK importScript and did something else.

If anyone sees this and is using NextJS App Dir 13.5+: Make a component with "use client"

"use client"; import React, { useEffect } from "react"; import OneSignal from "react-onesignal"; async function runOneSignal() { await OneSignal.init({ appId: process.env.NEXT_PUBLIC_APP_ID_KEY as string, allowLocalhostAsSecureOrigin: true, }); OneSignal.Slidedown.promptPush(); } export default function ReactOneSignal() { useEffect(() => { runOneSignal(); }); return <></>; }

Put it in your RootLayout, but inside The body tag as children.

Maybe there is another solution, but that is what worked for me.

Im going to be rendering this if the user is logged in. My auth is with NextAuth, Im going to fetch the session with their method in server component and then check if there is any to active the notifications. Im also going to pass a data tag to the OneSignal.User.