Skip to main content

Documentation Index

Fetch the complete documentation index at: https://setup.despia.com/llms.txt

Use this file to discover all available pages before exploring further.

Despia fires global window.focusin() and window.focusout() callbacks whenever the app moves between foreground and background. Define these functions in your web code to react to lifecycle changes such as resuming sessions, refreshing data, or pausing media.

​
Installation

npm install despia-native

import despia from 'despia-native';

​
How it works

The native runtime invokes window.focusin() when the app returns to the foreground and window.focusout() when it leaves. Attach handlers directly to the window object to receive these events. 
const isDespia = navigator.userAgent.toLowerCase().includes('despia')

if (isDespia) {
    window.focusin = () => {
        console.log('App focused in')
    }

    window.focusout = () => {
        console.log('App focused out')
    }
}
The focusout callback fires once per background transition. The focusin callback fires every time the app returns to the foreground, including the first launch resume.

​
Refresh data on resume

Use focusin to revalidate session state or pull fresh content when the user returns to the app. 
if (isDespia) {
    window.focusin = async () => {
        await refreshAuthToken()
        await loadLatestFeed()
    }
}

​
Pause activity on background

Use focusout to stop timers, pause video playback, or persist unsaved state before the app is suspended. 
if (isDespia) {
    window.focusout = () => {
        videoPlayer.pause()
        clearInterval(pollHandle)
        saveDraftLocally()
    }
}

​
Track session duration

Combine both events to measure how long the user stays inside the app per session. 
let sessionStart = Date.now()

if (isDespia) {
    window.focusin = () => {
        sessionStart = Date.now()
    }

    window.focusout = () => {
        const durationMs = Date.now() - sessionStart
        analytics.track('session_end', { durationMs })
    }
}

​
Resources

NPM Package

despia-native

Support

support@despia.com