@devkit-labs/notifier Demo

🎯 Basic Typed Notifications

Test the five core notification types with pre-configured styling and icons.

               notify.success("Task Completed Successfully!", { body: "Your file
               has been processed and is ready for download.", onclick: () =>
               window.focus(), });
            

               notify.error("Upload Failed", { body: "The file could not be
               uploaded. Please check your internet connection.",
               requireInteraction: true, onclick: () => alert("Redirecting to
               help page..."), });
            

               notify.info("New Feature Available", { body: "Version 2.0 is now
               available with exciting new features!", onclick: () =>
               window.open("https://github.com/devkit-labs/notifier", "_blank"),
               });
            

               notify.warning("Storage Almost Full", { body: "You have used 90%
               of your storage space. Consider cleaning up old files.", onclick:
               () => alert("Opening storage management..."), });
            

               notify.message("Meeting Reminder", { body: "Daily standup meeting
               starts in 5 minutes.", onclick: () => window.focus(), });
            

🎨 Rich Notifications

Advanced notifications with images, badges, interaction requirements, and event handlers.

               notify.error("File Processing Error", { body: "The uploaded file
               could not be processed due to format issues.", badge:
               "data:image/svg+xml,...", image: "data:image/svg+xml,...",
               requireInteraction: true, vibrate: [200, 100, 200, 100, 200],
               data: { fileId: "12345", errorCode: "FORMAT_ERROR" }, onclick: ()
               => alert("Opening error details..."), });
            

               notify.warning("Important System Update", { body: "A critical
               security update is available. Please restart your application.",
               requireInteraction: true, onclick: () => { if (confirm("Restart
               application now?")) { location.reload(); } }, });
            

               notify.info("Background Sync Complete", { body: "Your data has
               been synchronized with the server.", silent: true, onclick: () =>
               console.log("Silent notification clicked!"), });
            

               notify.success("Video Processing Complete", { body: "Your video
               has been successfully processed and is ready for viewing.",
               badge: "data:image/svg+xml,...", image: "data:image/svg+xml,...",
               vibrate: [100, 50, 100], data: { videoId: "vid_12345", duration:
               "5:32", quality: "1080p" }, onclick: () => alert("Opening video
               player..."), });
            

🚫 Permission Fallback Testing

See how the library handles blocked notifications with beep fallbacks.

💡 To test fallbacks, block notifications in your browser settings.

               notify.error("Test Fallback Behavior", { body: "If notifications
               are blocked, this will trigger beep sound.", onclick: () =>
               console.log("Fallback test clicked!"), });
            

               notify.info("Silent Fallback Test", { body: "This fallback won't
               play a beep sound due to the silent flag.", silent: true,
               onclick: () => console.log("Silent fallback clicked!"), });
            