{"id":14519,"date":"2026-09-24T10:31:47","date_gmt":"2026-09-24T10:31:47","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=14519"},"modified":"2026-09-24T10:31:47","modified_gmt":"2026-09-24T10:31:47","slug":"how-to-handle-page-visibility-change-and-pause-states-in-bro","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-handle-page-visibility-change-and-pause-states-in-bro\/","title":{"rendered":"How to handle page visibility change and pause states in browser games?"},"content":{"rendered":"

Listen for visibilitychange (or the platform SDK’s pause event) and toggle a single isPaused flag that stops your update loop, timers and audio, then resumes them on visible\/resume. Audio needs an explicit resume call because browsers don’t restart it automatically.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
Native browser event for tab switching<\/td>\nvisibilitychange<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Unity WebGL talks to JS via<\/td>\n.jslib plugin<\/td>\ndocs.unity3d.com<\/a><\/td>\n<\/tr>\n
Godot 4 web bridge to JS<\/td>\nJavaScriptBridge singleton<\/td>\ndocs.godotengine.org<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

In vanilla JS, bind to document.visibilitychange<\/code> and check document.hidden<\/code>, then pause your update loop, physics step and any setInterval<\/code>\/setTimeout<\/code> timers. On resume, don’t just un-pause: reset your delta-time clock first, or the next frame will try to simulate the entire hidden duration in a single step.<\/p>\n

document.addEventListener('visibilitychange', () => {\n if (document.hidden) {\n game.pause();\n } else {\n game.resetClock();\n game.resume();\n }\n});<\/code><\/pre>\n
Audio is the part people forget: browsers typically leave an AudioContext<\/code> or <audio><\/code> element running or resume it unexpectedly when the tab regains focus, so mute or explicitly stop it on hide and resume it yourself on show rather than assuming it follows the game state.<\/p>\n
What about game engines?<\/h2>\n
In Unity WebGL you can’t read the Page Visibility API directly from C#; write a small .jslib plugin that forwards visibilitychange into a callback (see Unity’s browser scripting docs<\/a>). In Godot 4 web exports, use the JavaScriptBridge<\/code> singleton to hook the same browser event.<\/p>\n
If you use Playgama Bridge<\/a>, listen for PAUSE_STATE_CHANGED<\/code> to pause gameplay, timers and audio across engines.<\/p>\n
Sources<\/h2>\n