Onesignal Web Push Notification in Frappe – Blancer.com Tutorials and projects

I am using Onesignal for web push notification for frappe projects, So basically on Frappe on Doctype (Custom) i created Custom Button Subscribe and Unsubscribe. So if the user click on subscribe it will get subscribe and same for unsubscribe. For that my code is:

frappe.ui.form.on("Settings", {
    
    onload: function(frm) {
        frappe.call({
            method: "plantmaintenance.plantmaintenance.doctype.settings.settings.get_context",
            callback: function(r) {
                var data = r.message;
                $(frm.fields_dict["subscribe_and_unsubscribe"].wrapper).html(data);
                refresh_field("subscribe_and_unsubscribe");
                bindOneSignalButtons(frm);
            }
        });
    }
});
function bindOneSignalButtons(frm) {
    $('#subscribe').on('click', function(event) {
        event.preventDefault();
        var userId = getUserId();
        if (userId) {
            OneSignal.push(["registerForPushNotifications"]);
                    var externalUserId = frappe.session.user; 
                    OneSignal.push(function() {
                    OneSignal.setExternalUserId(externalUserId);
                    updateButtonState(true); 
                })
        } else {
            frappe.msgprint(__('User is not logged in.'));
        }
    });

   
    $('#unsubscribe').on('click', function(event) {
            OneSignal.push(function() {
                OneSignal.setSubscription(false).then(function() {
                    updateButtonState(false); 
                });
            });
    });
    checkSubscriptionStatus();
}

function checkSubscriptionStatus() {
    OneSignal.push(function() {
        OneSignal.getSubscription().then(function(isSubscribed) {
            updateButtonState(isSubscribed);
        });
    });
}
function updateButtonState(isSubscribed) {
    if (isSubscribed) {
        $('#unsubscribe').show();
        $('#subscribe').hide();
    } else {
        $('#unsubscribe').hide();
        $('#subscribe').show();
    }
}

Below is my html code where I define my button and initialisation of OneSignal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OneSignal Subscription</title>

   
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>

    <style>
        .button {
            background-color: #008CBA;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="home-top" class="clearfix">
        <br>
     
        <div id="subscribe_and_unsubscribe">
            <button id="subscribe" class="button" style="display:none;">Subscribe</button>
            <button id="unsubscribe" class="button" style="display:none;">Unsubscribe</button>
        </div>
    </div>

    <script>

        var OneSignal = window.OneSignal || [];

        OneSignal.push(["init", {
            appId: "ONE_SIGNAL_APP_ID",
            autoRegister: false,
            notifyButton: {
                enable: false
            },
            allowLocalhostAsSecureOrigin: false,
            persistNotification: false,
        }]);

        function getUserId() {
            return typeof frappe !== 'undefined' ? frappe.session.user : null;
        }
    </script>
</body>
</html>

Above functionality is working fine. But as I refresh the page the two of the button get disappear totally. Getting error uncaught promise OneSignal Initialisation failed.

Again I have to clear the cache and the code works fine.