I am using javascript notification permission function but when Iam using this function in IOS Mobile then its not work

Question

I am using JavaScript notification permission function in the HTML webpage and it's working fine but only when I am using this function to open notification permission in IOS Mobile then its not work please help, is you have any solution in your mind?

Here is the code below

<button type="button" id="notificationButton">Request Notification Permission</button>
<script>
    const button = document.getElementById("notificationButton");
    button.addEventListener("click", function () {
        requestNotificationPermission();
    });
    function requestNotificationPermission() {
        if ("Notification" in window) {
            Notification.requestPermission().then(function (permission) {
                if (permission === "granted") {
                    showNotification("Notification Permission Granted");
                } else if (permission === "denied") {
                    showNotification("Notification Permission Denied");
                } else if (permission === "default") {
                    showIOSInstructions();
                }
            });
        } else {
            console.log("Notification API not supported in this browser");
        }
    }
    function showNotification(message) {
        new Notification(message);
    }
    function showIOSInstructions() {
        alert('To enable notifications on iOS, please follow these steps:1. Open Settings on your device 2- Scroll down and tap on your browser.3- Toggle the "Allow Notifications" switch.');
    }
</script>