Focus Events

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

Bundle
CDN

npm install despia-native

pnpm add despia-native

yarn add despia-native

import despia from 'despia-native';

<script src="https://cdn.jsdelivr.net/npm/despia-native/index.min.js"></script>

<script type="module">
    import despia from 'https://cdn.jsdelivr.net/npm/despia-native/+esm'
</script>

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

⌘I

Deployment

Best Practices

Local Ecosystem

Authentication

Payments

Analytics

Connectivity

Machine Learning

Wallets

Native Features

Editor

Roadblocks

Store Rejections

Platform Support

Installation

How it works

Refresh data on resume

Pause activity on background

Track session duration

Resources

NPM Package

Support

​Installation

​How it works

​Refresh data on resume

​Pause activity on background

​Track session duration

​Resources

NPM Package

Support

Installation

How it works

Refresh data on resume

Pause activity on background

Track session duration

Resources