ℹ️Browser Info

Detect whether your app is running on iOS, Android, or a web browser, and monitor the device's network connectivity.

What is Browser Info?

Browser Info gives your app access to two types of information: the environment it's running in, and the device's current network status. You can use it to detect whether the user is inside a Natively iOS app, a Natively Android app, or a regular web browser - and conditionally show or hide features based on that. You can also listen for connectivity changes to handle offline states gracefully.

Prerequisites

This feature is available in all plans. See all plans

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code), JavaScript SDK (Code), or AI Agents (for AI-powered editors like Lovable, Base44, and Replit).

Initialization

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
Check Installed Plugins: Look through your list of installed plugins for "Natively iOS & Android app builder".
- If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.

If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

Initialize the SDK

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.

Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.

Check if the following Natively SDK script is present in the <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic

[Element] Natively - Browser

Events:

Device went offline - fires when the device loses internet connectivity.
Device back online - fires when the device regains internet connectivity.

States:

isAndroidApp - Yes / No.
isIOSApp - Yes / No.
isNativeApp - Yes / No.
Connectivity - Yes / No (Device is online or offline).

// ============================================================================
// NATIVELY BROWSER INFO - DOCUMENTATION & EXAMPLES
// ============================================================================

// Initialize
const info = new NativelyInfo();

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// info.browserInfo()
//   - Returns information about the current app environment.
//   - Returns an object synchronously — no callback required.
//
// Response fields:
// browserInfo.isAndroidApp  - Boolean. true if running as a Natively Android app.
// browserInfo.isIOSApp      - Boolean. true if running as a Natively iOS app.
// browserInfo.isNativeApp   - Boolean. true if running as either a Natively iOS or Android app.

// ============================================================================
// CONNECTIVITY EVENTS
// ============================================================================
// window.ononline  - Fires when the device regains internet connectivity.
// window.onoffline - Fires when the device loses internet connectivity.

// --- Browser Info. Environment Detection Example. Start ---

const browserInfo = info.browserInfo();

console.log("Is Android app:", browserInfo.isAndroidApp);
console.log("Is iOS app:", browserInfo.isIOSApp);
console.log("Is native app:", browserInfo.isNativeApp);

// --- Browser Info. Environment Detection Example. End ---


// --- Browser Info. Connectivity Example. Start ---

window.ononline = function() {
    console.log("Device is online");
};

window.onoffline = function() {
    console.log("Device is offline");
};

// --- Browser Info. Connectivity Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively Browser Info SDK: const info = new NativelyInfo(); const browserInfo = info.browserInfo(); // browserInfo.isAndroidApp — true if running as a Natively Android app. // browserInfo.isIOSApp — true if running as a Natively iOS app. // browserInfo.isNativeApp — true if running as either iOS or Android Natively app. // Connectivity: window.ononline = function() { /* device is online */ }; window.onoffline = function() { /* device is offline */ }; For reference: https://docs.buildnatively.com/guides/integration/browser-info

Replace the placeholder at the beginning with a description of what you want to build - for example: "Show the Sign in with Apple button only when the app is running on iOS, and hide it on Android and web browsers".

How to use

Conditional feature visibility

The most common use case is showing or hiding features based on the platform. Use browserInfo.isIOSApp and browserInfo.isAndroidApp to conditionally render platform-specific elements - for example, showing the Sign in with Apple button only on iOS, or displaying an Android-specific payment method only on Android.

Detecting the web context

If browserInfo.isNativeApp is false, the user is accessing your app from a regular web browser, not a Natively app. You can use this to show a prompt encouraging them to download the mobile app, or to disable features that only work in a native context.

Handling offline states

Use window.ononline and window.onoffline to respond to connectivity changes in real time. Common use cases include showing an offline banner, disabling form submissions when offline, or queuing actions to retry once the connection is restored.

Call browserInfo early

Since info.browserInfo() returns synchronously without a callback, call it as early as possible in your app's initialization - ideally right after the Natively SDK loads in nativelyOnLoad(). This ensures platform detection is available before any conditional rendering happens.

Troubleshooting

browserInfo values are all false in a web browser

This is expected behavior - isIOSApp, isAndroidApp, and isNativeApp are all false when the app is accessed from a regular web browser. Design your logic to handle this case gracefully.

window.ononline / window.onoffline not firing

These are standard browser events and should work in the Natively app. If they are not firing, verify that the SDK is fully loaded before attaching the event listeners - attach them inside nativelyOnLoad() to ensure the environment is ready.

Platform detection runs before the SDK loads

If you call info.browserInfo() before the Natively SDK has finished loading, the values may be incorrect. Always call it inside nativelyOnLoad() or after confirming the SDK is initialized.

PreviousBiometrics & Credentials NextClipboard

Last updated 1 month ago