Browser Tab Visibility & Notification Framework

Overview

This component provides a reusable browser visibility detection and notification framework for OutSystems Reactive Web applications.

The solution enables:

• Browser tab switch detection

• Active/inactive tab monitoring

• Screen-level event handling

• Browser/system notifications

• Reusable event-driven architecture

The implementation uses:

• JavaScript Browser Visibility API

• JavaScript Notification API

• OutSystems Reactive Web blocks and events

Features

Tab Visibility Detection

Detects:

• User switching tabs

• Browser minimize/restore

• Returning to application tab

Event-Based Architecture

Reusable block events:

• OnTabHidden

• OnTabVisible

Browser Notifications

Displays browser/system notifications with:

• Title

• Message

Reusable Components

Can be added to any screen or layout.

Components

1. TabVisibilityListener Block

Reusable block responsible for:

• Detecting browser visibility changes

• Triggering OutSystems events

Exposed Events

2. BrowserNotification Action / Block

Reusable notification handler responsible for:

• Requesting browser notification permission

• Triggering browser notifications

Inputs

Installation

Step 1 — Add the Blocks

Import or create:

• TabVisibilityListener

• BrowserNotification

inside your OutSystems module.

Configuration

Step 2 — Add TabVisibilityListener to Screen

Drag the TabVisibilityListener block into:

• Screen
  or

• Common Layout

Recommended:
Add to the application layout for global monitoring.

Step 3 — Configure OnReady JavaScript

Inside the TabVisibilityListener block:

• Open OnReady

• Add a RunJavaScript node

Add the following JavaScript:

if (!window.visibilityListenerAdded) {

    window.visibilityListenerAdded = true;

    document.addEventListener("visibilitychange", () => {

        if (document.hidden) {

            $actions.OnTabHidden();

        } else {

            $actions.OnTabVisible();

        }

    });

}

Event Handling

Step 4 — Handle Block Events in Screen

The screen can subscribe to:

• OnTabHidden

• OnTabVisible

Example use cases:

• Update user status

• Pause live refresh

• Trigger notifications

• Save activity logs

• Auto-away handling

Browser Notification Setup

Step 5 — Create Notification Action

Inside the BrowserNotification action:

• Add a RunJavaScript node

Example implementation:

Notification.requestPermission().then(permission => {

    if (permission === "granted") {

        new Notification($parameters.Title, {
            body: $parameters.Message
        });

    }

});

Usage Example

Example Flow

User switches browser tab
    ↓
visibilitychange event detected
    ↓
OnTabHidden event triggered
    ↓
Screen handles event
    ↓
BrowserNotification action called
    ↓
Notification displayed

Example Notification

Example:

• Title: Approval Pending

• Message: A procurement request requires your approval.

Browser Compatibility

Requirements

HTTPS Requirement

Browser notifications require:

• HTTPS
  or

• localhost

Notifications may not work correctly on unsecured HTTP environments.

Important Notes

Duplicate Listener Prevention

The implementation uses:

window.visibilityListenerAdded

to prevent multiple event registrations during screen rerenders.

Notification Permission

Users must allow browser notifications before notifications can be displayed.

Browser Security Limitations

The framework can detect:

• Current tab visibility state

The framework cannot detect:

• Other website names

• Browser history

• Exact user activity outside the application

Recommended Usage

Recommended for:

• Procurement applications

• Chat systems

• Approval workflows

• Real-time dashboards

• Presence tracking

• Live support systems

Best Practices

• Add listener block only once per screen/layout

• Use centralized notification handling

• Avoid excessive notification triggering

• Use throttling for repeated events

• Store user notification preferences if required

Future Enhancements

Possible enhancements:

• Idle detection

• Multi-tab synchronization

• Online/away/offline presence

• Push notifications

• Firebase integration

• Notification click handling

• Background notifications

• User activity analytics

Final Architecture

TabVisibilityListener Block
    ↓
Detect Browser Visibility Changes
    ↓
Trigger OutSystems Events
    ↓
Screen Handles Events
    ↓
BrowserNotification Action Invoked
    ↓
Browser/System Notification Displayed

This implementation provides a scalable and reusable browser activity monitoring and notification framework for OutSystems Reactive Web applications.