Screen Brightness in JavaScript: WebInto.app `app` Bridge (GET, SET & RESET)
When your website runs inside WebInto.app, you may want to dim the display for reading modes, video overlays, or accessibility—and then restore or reset behaviour. The app bridge lets you read, set, and reset brightness for this app’s window; it does not push a new system-wide level that other apps must follow.
SET_BRIGHTNESS uses a level between 0 (dimmest) and 1 (brightest). The app clamps out-of-range values. GET_BRIGHTNESS usually returns params.brightness in [0, 1] while your app is forcing a level. brightness can be -1 when there is no window override yet—for example before the first SET_BRIGHTNESS, or on Android after RESET_BRIGHTNESS, meaning the window is following system brightness again instead of a fixed level.
RESET_BRIGHTNESS clears that override so normal platform behaviour applies again (details below).
This tutorial documents GET_BRIGHTNESS, SET_BRIGHTNESS, RESET_BRIGHTNESS, the JSON response shape, and a safe JavaScript pattern that waits for window.Native (same idea as the custom HTML no-internet screen guide).
When to use the app bridge for brightness
| Scenario | Suggested approach |
|---|---|
| Reader / “night mode” page in the WebView | SET_BRIGHTNESS lower, then restore or RESET_BRIGHTNESS when leaving |
| Show current brightness in your UI | GET_BRIGHTNESS, display params.brightness (treat -1 as “following system / not overridden”) |
| Done dimming—give brightness back to the system | RESET_BRIGHTNESS |
| Same HTML in desktop Chrome | No window.Native — branch your code (see tip below) |
Your page uses the app bridge name in Native.call—the WebInto app handles the rest on the device side.
Tip: Only run brightness code inside WebInto.app
If your URL is also opened in a normal browser, guard calls so you never assume Native.call exists:
function canUseNativeBridge() {
return typeof window !== 'undefined' && window.Native && typeof window.Native.call === 'function';
}
async function setBrightnessIfInApp(value) {
if (!canUseNativeBridge()) {
console.info('Brightness bridge unavailable — likely outside WebInto.app.');
return null;
}
return callAppBridge({ action: 'SET_BRIGHTNESS', payload: { brightness: value } });
}
You can combine this with a custom User-Agent suffix (for example WebIntoApp/1.0 appended in the WebView settings) so your script chooses bridge path vs standard web behaviour, similar to the OneSignal JavaScript bridge tutorial—User-Agent is for UX branching only, not security.
Calling from JavaScript
Use window.Native.call(methodName, paramsObject) like other bridge guides.
Method name: app
Params object:
| Field | Type | Required | Description |
|---|---|---|---|
action |
string | Yes | GET_BRIGHTNESS, SET_BRIGHTNESS, or RESET_BRIGHTNESS (case-insensitive). |
payload |
object or null |
Varies | For SET_BRIGHTNESS, must include numeric brightness. For GET_BRIGHTNESS and RESET_BRIGHTNESS, null or {} is fine. |
Helper (same “wait for the app bridge” idea as the no-internet screen guide):
async function callAppBridge(body) {
if (typeof window.waitForNative === 'function') {
const ready = await window.waitForNative(2000);
if (!ready) {
console.warn('App bridge not ready');
return null;
}
} else if (!window.Native) {
console.warn('window.Native is not available');
return null;
}
return window.Native.call('app', body);
}
Response format
The app returns a JSON string (parse if your wrapper returns a string). Typical shape:
| Field | Type | Description |
|---|---|---|
status |
boolean | true on success. |
message |
string or omitted | Error text when status is false. |
params |
object or omitted | On GET_BRIGHTNESS success, includes brightness: usually [0, 1] while a level is forced; -1 when the window is not overriding brightness (see GET_BRIGHTNESS below). |
GET_BRIGHTNESS
Reads the brightness used for this app’s window. params.brightness is usually a number in [0, 1] while your content has a forced level.
-1 means there is no window brightness override in effect—for example you have not called SET_BRIGHTNESS yet, or on Android you have just used RESET_BRIGHTNESS, so the activity follows system brightness again rather than a fixed app level.
Request
{ "action": "GET_BRIGHTNESS", "payload": null }
Response (success) — forced level
{
"status": true,
"params": {
"brightness": 0.65
}
}
Response (success) — no override (-1)
{
"status": true,
"params": {
"brightness": -1
}
}
Do not send -1 to SET_BRIGHTNESS (only [0, 1] is valid there).
RESET_BRIGHTNESS
Stops forcing a custom level and returns to normal platform behaviour for this app’s window.
- Android: Clears the window brightness override so system brightness applies again for that activity.
- iOS: There is no public “clear system brightness” API. The app restores the level that was current the first time
setBrightnessran in this session, then clears that saved value. If you never calledSET_BRIGHTNESS, this action succeeds but may not visibly change the screen.
Request
{ "action": "RESET_BRIGHTNESS", "payload": null }
Response (success)
{ "status": true }
SET_BRIGHTNESS
Sets screen brightness. payload is required and must contain brightness as a JSON number (integer or float).
Request
{
"action": "SET_BRIGHTNESS",
"payload": { "brightness": 0.8 }
}
Response (success)
{ "status": true }
Response (missing or invalid brightness)
If brightness is absent, not a number, or cannot be decoded:
{
"status": false,
"message": "please send brightness in payload as a number between 0 and 1."
}
Send values in [0, 1]; values outside that range are clamped on the app side. Only this app’s window is affected, not global system brightness for other apps.
Invalid action / malformed body
If the JSON cannot be parsed into a valid bridge message, you may receive:
{
"status": false,
"message": "please send valid parameters see docs."
}
Example: dim for reading, then restore or reset
Option A — restore a previous numeric level (use when you captured a real [0, 1] value; do not call SET_BRIGHTNESS with -1 on Android):
const parse = (raw) => (typeof raw === 'string' ? JSON.parse(raw) : raw);
async function dimTemporarily(level = 0.35) {
const before = parse(await callAppBridge({ action: 'GET_BRIGHTNESS', payload: null }));
if (!before.status || before.params == null) return;
const previous = before.params.brightness;
await callAppBridge({ action: 'SET_BRIGHTNESS', payload: { brightness: level } });
return () => {
if (previous === -1 || previous < 0) return Promise.resolve();
return callAppBridge({ action: 'SET_BRIGHTNESS', payload: { brightness: previous } });
};
}
// usage
const restore = await dimTemporarily(0.3);
// later: await restore?.();
Option B — clear the override in the app (Android: system brightness for the window again; iOS: behaviour described under RESET_BRIGHTNESS above):
await callAppBridge({ action: 'RESET_BRIGHTNESS', payload: null });
UX note: Restoring on page hide (pagehide / visibilitychange) avoids leaving users on a dim screen if they navigate away without calling restore.
Summary
WebInto.app screen brightness from JavaScript uses Native.call('app', { action, payload }) with GET_BRIGHTNESS, SET_BRIGHTNESS, or RESET_BRIGHTNESS. SET only affects this app’s window, not other apps. GET returns brightness: -1 when there is no override (unset or, on Android, after RESET); otherwise [0, 1]. Use Option A (save → set → restore a real number) or Option B (RESET_BRIGHTNESS) when you want the platform to take over again.
To reload the page or use error-screen actions, see the custom HTML no-internet screen guide (web bridge with RELOAD)—not the app bridge.