I often have many tabs open for work. This occurs in support scenarios when you need multiple tools or spreadsheets available at once. Using visual indicators is a way to respond effectively to updates without having to periodically check manually.
Recently another retool user wrote a great post on how to have retool respond to web sockets events. Taking this idea one step further we can support visual indicators like browser tab titles and browser notifications to notify us when these updates occur.
Here's a demo where we send 3 test events from the Pusher demo page and then mark all the notifications as seen. You'll see that the retool tab changes the notification value and there are streaming desktop notifications:
Here's what the retool app needs to get this done in a video:
As described in the video the magic happens in the custom component and how it works:
<html>
<head>
</head>
<body style="border-style: solid;">
<div>Custom Component that Handles all the Magic</div>
<script>
window.Retool.subscribe(function(model) {
console.log(model);
if (model.count === 0) {
window.parent.document.title = "Original Title";
} else {
window.parent.document.title = "🔴 " + String(model.count) + " notifications";
}
if (model.message !== "" && model.message !== undefined && !model.pause) {
console.log(model.message);
notifyMe(model.message);
window.Retool.modelUpdate({ message: "" });
}
});
// Taken from: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
function notifyMe(message) {
if (!("Notification" in window)) {
console.log("This browser does not support desktop notification");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification(message);
}
// 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(message);
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them any more.
}
</script>
</body>
</html>
Note that the notifyMe function is taken from here: developer.mozilla.org/en-US/docs/Web/API/No..