or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

authentication-sessions.mdbrowser-operations.mdcustom-tabs-management.mdindex.md
tile.json

custom-tabs-management.mddocs/

Custom Tabs Management

Android-specific Custom Tabs optimization features for improved performance and user experience. These functions provide fine-grained control over the Custom Tabs lifecycle, allowing you to warm up browsers, pre-load URLs, and manage connections efficiently.

Capabilities

Get Supporting Browsers

Returns information about browsers that support Custom Tabs on the Android device. This includes the default browser, preferred browser for Custom Tabs, and all available supporting browsers.

/**
 * Returns list of applications supporting Custom Tabs
 * May not be fully reliable since it uses PackageManager.getResolvingActivities
 * @returns Promise resolving to WebBrowserCustomTabsResults with browser information
 * @platform android
 */
function getCustomTabsSupportingBrowsersAsync(): Promise<WebBrowserCustomTabsResults>;

Usage Example:

import * as WebBrowser from 'expo-web-browser';

const browserInfo = await WebBrowser.getCustomTabsSupportingBrowsersAsync();
console.log('Default browser:', browserInfo.defaultBrowserPackage);
console.log('Preferred for Custom Tabs:', browserInfo.preferredBrowserPackage);
console.log('All supporting browsers:', browserInfo.browserPackages);
console.log('Service supporting browsers:', browserInfo.servicePackages);

// Use preferred browser for better performance
if (browserInfo.preferredBrowserPackage) {
  await WebBrowser.openBrowserAsync('https://example.com', {
    browserPackage: browserInfo.preferredBrowserPackage
  });
}

Warm Up Browser

Calls the warmUp method on CustomTabsClient for the specified browser package. This prepares the browser for faster launching by initializing background processes.

/**
 * Warms up Custom Tabs client for specified browser package
 * @param browserPackage - Package of browser to warm up. If not set, preferred browser is used
 * @returns Promise resolving to WebBrowserWarmUpResult
 * @platform android
 */
function warmUpAsync(browserPackage?: string): Promise<WebBrowserWarmUpResult>;

Usage Example:

import * as WebBrowser from 'expo-web-browser';

// Warm up default/preferred browser
const warmUpResult = await WebBrowser.warmUpAsync();
console.log('Warmed up browser:', warmUpResult.servicePackage);

// Warm up specific browser
const chromeResult = await WebBrowser.warmUpAsync('com.android.chrome');
console.log('Chrome warmed up:', chromeResult.servicePackage);

// Later, open browser - should be faster due to warm up
await WebBrowser.openBrowserAsync('https://example.com');

Pre-initialize URL

Initiates CustomTabsSession and calls its mayLaunchUrl method to hint to the browser that a URL is likely to be loaded soon. This can significantly improve page load times.

/**
 * Pre-loads URL hint for faster Custom Tabs launch
 * @param url - URL that is likely to be loaded first when opening browser
 * @param browserPackage - Package of browser to inform. If not set, preferred browser is used
 * @returns Promise resolving to WebBrowserMayInitWithUrlResult
 * @platform android
 */
function mayInitWithUrlAsync(
  url: string,
  browserPackage?: string
): Promise<WebBrowserMayInitWithUrlResult>;

Usage Example:

import * as WebBrowser from 'expo-web-browser';

// Pre-load a URL that user is likely to visit
const initResult = await WebBrowser.mayInitWithUrlAsync('https://example.com/login');
console.log('Pre-initialized URL with browser:', initResult.servicePackage);

// When user actually clicks to open, it should load faster
const openButton = () => {
  WebBrowser.openBrowserAsync('https://example.com/login');
};

// Pre-load specific URL with specific browser
await WebBrowser.mayInitWithUrlAsync(
  'https://checkout.example.com', 
  'com.android.chrome'
);

Cool Down Browser

Removes all bindings to services created by warmUpAsync or mayInitWithUrlAsync. Call this method when you no longer need the optimization to avoid potential memory leaks.

/**
 * Removes all Custom Tabs service bindings to prevent memory leaks
 * @param browserPackage - Package of browser to cool down. If not set, preferred browser is used
 * @returns Promise resolving to WebBrowserCoolDownResult or empty object if no connection to dismiss
 * @platform android
 */
function coolDownAsync(browserPackage?: string): Promise<WebBrowserCoolDownResult>;

Usage Example:

import * as WebBrowser from 'expo-web-browser';

// Warm up and pre-load for performance
await WebBrowser.warmUpAsync();
await WebBrowser.mayInitWithUrlAsync('https://example.com');

// Use the optimized browser
await WebBrowser.openBrowserAsync('https://example.com');

// Clean up when done to prevent memory leaks
const coolDownResult = await WebBrowser.coolDownAsync();
console.log('Cooled down browser:', coolDownResult.servicePackage);

// Cool down specific browser
await WebBrowser.coolDownAsync('com.android.chrome');

// In a React component cleanup
useEffect(() => {
  return () => {
    // Cleanup on component unmount
    WebBrowser.coolDownAsync();
  };
}, []);

Result Types

interface WebBrowserCustomTabsResults {
  /**
   * Default browser package chosen by user, null if none exists
   * Usually means user will be prompted to choose from available packages
   */
  defaultBrowserPackage?: string;
  /**
   * Package preferred by CustomTabsClient for Custom Tabs
   * Favors browser chosen by user as default, as long as it supports Custom Tabs
   * May be null when no such browser is installed
   */
  preferredBrowserPackage?: string;
  /**
   * All packages recognized as capable of handling Custom Tabs
   * Empty array means no supporting browsers on device
   */
  browserPackages: string[];
  /**
   * All packages capable of handling Custom Tabs Service
   * Used by warmUpAsync, mayInitWithUrlAsync, and coolDownAsync
   */
  servicePackages: string[];
}

interface ServiceActionResult {
  /** Package name of the browser service that was used */
  servicePackage?: string;
}

type WebBrowserWarmUpResult = ServiceActionResult;
type WebBrowserMayInitWithUrlResult = ServiceActionResult;
type WebBrowserCoolDownResult = ServiceActionResult;

Performance Best Practices

Optimal Usage Pattern

import * as WebBrowser from 'expo-web-browser';

class CustomTabsManager {
  private isWarmedUp = false;

  async prepareForBrowsing(urls: string[]) {
    // 1. Warm up the browser
    if (!this.isWarmedUp) {
      await WebBrowser.warmUpAsync();
      this.isWarmedUp = true;
    }

    // 2. Pre-load likely URLs
    for (const url of urls) {
      await WebBrowser.mayInitWithUrlAsync(url);
    }
  }

  async openOptimizedBrowser(url: string) {
    // Browser should open faster due to preparation
    return WebBrowser.openBrowserAsync(url);
  }

  async cleanup() {
    // Clean up to prevent memory leaks
    if (this.isWarmedUp) {
      await WebBrowser.coolDownAsync();
      this.isWarmedUp = false;
    }
  }
}

Memory Management

  • Always call coolDownAsync() when you no longer need Custom Tabs optimization
  • Bindings are automatically cleared when your application is destroyed
  • Consider using a cleanup pattern in React components or when navigating away from screens that use Custom Tabs

Browser Selection

  • Use getCustomTabsSupportingBrowsersAsync() to identify the best browser for your use case
  • Prefer preferredBrowserPackage over defaultBrowserPackage for Custom Tabs functionality
  • Handle cases where no Custom Tabs supporting browsers are available