Implemented a reusable browser tab visibility and notification handling framework in OutSystems Reactive Web using JavaScript and reusable blocks.

Overview

The solution is designed using a modular architecture with separate reusable blocks for:

• Browser tab visibility detection

• Event propagation to screens

• Browser notification handling

This allows centralized management of browser activity detection and notification triggering across the application.

Tab Visibility Detection Block

A reusable block named TabVisibilityListener is created to monitor browser tab activity.

Purpose

The block detects:

• When the user switches away from the current tab

• When the user returns to the application tab

• Browser minimize/restore scenarios

This is achieved using the JavaScript Browser Visibility API with the visibilitychange event.

Implementation Details

Inside the block:

• OnReady lifecycle event is used

• A RunJavaScript node registers the visibility listener

JavaScript logic:

• Detects document.hidden

• Triggers events back to OutSystems based on visibility state

Example behavior:

• If document.hidden = true
  ? User left the tab

• If document.hidden = false
  ? User returned to the tab

To prevent duplicate event listeners during rerenders or navigation:

• A global window flag is maintained before registering listeners

Example:

window.visibilityListenerAdded

Exposed Block Events

The block exposes reusable OutSystems events:

• OnTabHidden

• OnTabVisible

These events can be handled directly from any parent screen where the block is used.

This creates a clean separation between:

• Browser event detection

• Business logic handling

Screen-Level Event Handling

The TabVisibilityListener block is added to screens requiring visibility tracking.

The screen subscribes to:

• OnTabHidden

• OnTabVisible

This enables screen-specific behaviors such as:

• Marking user as away

• Pausing live refresh

• Tracking session activity

• Triggering alerts

• Logging activity timestamps

• Updating user presence

Example flow:

User switches browser tab
    ?
visibilitychange event fires
    ?
TabVisibilityListener detects state
    ?
Block event triggered
    ?
Screen handles event
    ?
Business logic executed

Browser Notification Block / Action

A separate reusable component named BrowserNotification is implemented for notification handling.

Purpose

The component provides centralized browser notification management using the JavaScript Notification API.

Inputs

The notification component accepts:

• Title

• Message

Optional future enhancements:

• Icon

• ClickAction

• Tag

• RequireInteraction

• Silent

• AutoCloseDuration

Notification Behavior

The component:

1. Checks notification permission

2. Requests permission if not already granted

3. Displays browser/system notifications

Notifications can appear:

• While user is on another tab

• When browser is minimized

• When application tab is inactive

Example scenarios:

• Procurement approval pending

• New chatbot response

• Workflow escalation

• Task assignment

• Reminder alerts

Architectural Advantages

Reusability

The listener and notification logic can be reused across all screens without duplicating JavaScript.

Separation of Concerns

Detection, event handling, and notification logic are separated into independent components.

Scalability

New visibility behaviors or notification types can be added without modifying individual screens.

Maintainability

Changes to browser handling logic are centralized within reusable blocks.

Enterprise-Friendly Design

The approach aligns well with SPA architecture patterns commonly used in:

• Teams

• Slack

• WhatsApp Web

• Enterprise dashboards

Recommended Production Enhancements

Potential future improvements:

• Idle detection

• Multi-tab synchronization

• Online/away/offline presence tracking

• Real-time session heartbeat APIs

• Firebase push notification integration

• Background service worker notifications

• Notification throttling/debouncing

• User preference management

Final Architecture

TabVisibilityListener Block
    ?
Detects browser visibility changes
    ?
Triggers OutSystems events
    ?
Screen handles events
    ?
BrowserNotification action/block invoked
    ?
Browser notification displayed

This implementation provides a clean, scalable, and reusable solution for browser activity monitoring and notification management within OutSystems Reactive Web applications.