How to Use LaunchNavigator’s availableApps in TypeScript

How to install and configure the LaunchNavigator plugin in a TypeScript project, detect which navigation apps are available on a device, prompt the user to choose their preferred app, and launch turn-by-turn directions. Whether you’re a complete beginner or just need a refresher, this article breaks down each step in simple terms.

Table of Contents

1. What Is LaunchNavigator?
2. Why Use availableApps?
3. Prerequisites
4. Step 1: Install & Configure the Plugin
5. Step 2: Add TypeScript Definitions
6. Step 3: Check for Available Apps
7. Step 4: Let the User Pick an App
8. Step 5: Launch Navigation
9. iOS Tips & Gotchas
10. Full Example Code
11. Conclusion

What Is LaunchNavigator?

LaunchNavigator is a popular Cordova/PhoneGap plugin that lets your hybrid mobile app open external navigation apps—like Google Maps, Apple Maps, Waze, or Citymapper—to give turn-by-turn directions. Instead of building your own map interface, you can “hand off” navigation to the user’s installed app of choice.

Why Use availableApps?

The availableApps feature:

• Detects which navigation apps are installed on the user’s device
• Adapts to Android and iOS differences automatically
• Empowers you to give users a choice or pick your preferred app if available
• Improves UX by avoiding hard failures when an expected app isn’t there

Prerequisites

Before you begin:

• A working Cordova or Ionic project
• TypeScript support enabled (e.g., in tsconfig.json)
• At least one navigation app (Google Maps, Waze, etc.) installed on your test device

Step 1: Install & Configure the Plugin

Run this in your project folder:

cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator

Tip: Always check the official GitHub repo for the latest version and install instructions.

Step 2: Add TypeScript Definitions

Since LaunchNavigator doesn’t ship with its own TypeScript types, create a launchnavigator.d.ts in your src/types/ folder:

// src/types/launchnavigator.d.ts

interface LaunchNavigatorAppAvailability {
  googlemaps?: boolean;
  waze?: boolean;
  applemaps?: boolean;
  citymapper?: boolean;
  [key: string]: boolean | undefined;
}

interface LaunchNavigatorOptions {
  app?: string;
}

interface LaunchNavigator {
  availableApps(
    success: (apps: LaunchNavigatorAppAvailability) => void,
    error: (err: any) => void
  ): void;

  isAppAvailable(
    app: string,
    success: (available: boolean) => void
  ): void;

  navigate(
    destination: string | { lat: number; lng: number },
    options?: LaunchNavigatorOptions,
    success?: () => void,
    error?: (err: any) => void
  ): void;

  APP: {
    GOOGLE_MAPS: string;
    WAZE: string;
    APPLE_MAPS: string;
    CITY_MAPPER: string;
  };
}

declare var launchnavigator: LaunchNavigator;

This gives you type safety and autocompletion in editors like VS Code.

Step 3: Check for Available Apps

In your component or service, call availableApps after deviceready:

this.launchNavigator.availableApps(
  (apps) => {
    console.log('Detected apps:', apps);
    // apps.googlemaps === true if Google Maps is installed
  },
  (err) => {
    console.error('Error checking apps', err);
  }
);

• The callback returns an object whose keys are app IDs (e.g., googlemaps) and whose values are booleans.

Step 4: Let the User Pick an App

Convert the returned object to an array, then prompt the user:

const availableApps = Object.keys(apps).filter(k => apps[k]);

if (availableApps.length > 1) {
  // Simple prompt for demo; replace with a better UI in production
  let promptText = 'Choose navigation app:\n';
  availableApps.forEach((app, i) => {
    promptText += `${i + 1}. ${app}\n`;
  });
  const choice = parseInt(window.prompt(promptText) || '', 10) - 1;
  if (choice >= 0 && choice < availableApps.length) {
    return availableApps[choice];
  }
}
// If only one app, return it automatically
return availableApps[0];

Pro Tip: Use Ionic’s Action Sheet, Angular Material Dialog, or a custom modal for a polished look.

Step 5: Launch Navigation

Once you have the chosen app ID, call:

this.launchNavigator.navigate(
  destination,
  { app: chosenAppId }
)
.then(() => console.log('Navigator opened'))
.catch(err => console.error('Launch error:', err));

• destination can be a string address or an object:

  { lat: 37.422, lng: -122.084 }
  

iOS Tips & Gotchas

1. Test on Real Devices
   iOS simulators do not install third-party apps; always test on an actual iPhone or iPad.
2. deviceready Timing
   Wrap calls in document.addEventListener('deviceready', …) so the plugin is fully loaded.
3. Apple Maps Always Present
   On iOS, at minimum you’ll get applemaps: true—others only if installed.
4. Plugin Version
   Keep the plugin up to date; platform-specific bugs get fixed frequently in newer releases.

Full Example Code

openMap(destination: string) {
  document.addEventListener('deviceready', () => {
    this.launchNavigator.availableApps(
      (apps) => {
        const installed = Object.keys(apps).filter(k => apps[k]);
        if (installed.length === 0) {
          alert('No navigation apps found.');
          return;
        }

        let chosen = installed[0];
        if (installed.length > 1) {
          // Prompt user
          let msg = 'Pick an app:\n';
          installed.forEach((app, i) => {
            msg += `${i + 1}. ${app}\n`;
          });
          const idx = parseInt(window.prompt(msg) || '', 10) - 1;
          if (idx >= 0 && idx < installed.length) {
            chosen = installed[idx];
          }
        }

        this.launchNavigator.navigate(
          destination,
          { app: chosen }
        )
        .then(() => console.log(`Launched with ${chosen}`))
        .catch(err => console.error('Error:', err));
      },
      (err) => alert('Error fetching apps: ' + err)
    );
  }, false);
}

Conclusion

You’ve learned how to:

• Install and type the LaunchNavigator plugin in TypeScript
• Detect installed navigation apps on iOS and Android
• Prompt users to choose their preferred app
• Launch directions seamlessly

This “For Dummies” guide should get you up and running in minutes. Happy coding—and safe navigating!