Notification Example Documentation

Trigger Notification

Click the button below to trigger a notification. This demonstrates how notifications can be sent to a Flutter app through a WebView or shown in supported browsers.

JavaScript Notification Script

Include the following script in your HTML header to trigger notifications. This script detects if the user is on a mobile device or a browser and sends appropriate notifications.

function showNotification() {
    // Customize notification content based on your application logic
    var notification = {
        title: "Notification Title",
        body: "Notification Body",
    };

    // Check if running on mobile device
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        // Convert notification object to be sent as JSON string
        var notificationString = JSON.stringify(notification);

        // This will send the notification string to the Flutter app
        window.myChannel.postMessage(notificationString);

        console.log('Notification sent to Flutter:', notificationString);
    } else { // Notification for Browsers
        // Check if the browser supports notifications
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        }

        // Check if notification permissions have already been granted
        else if (Notification.permission === "granted") {
            // If it's okay let's create a notification
            var notification = new Notification(notification.title + '\n' + notification.body);
        }

        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== "denied") {
            Notification.requestPermission().then(function (permission) {
                // If the user accepts, let's create a notification
                if (permission === "granted") {
                    var notification = new Notification(notification.title + '\n' + notification.body);
                }
            });
        }
    }
}
            

Browsers Pop Up

Mobile PopUp

Mobile Notification