Building phone apps

Learn how to build native mobile applications for iOS and Android using Aurelia with Capacitor.

Transform your Aurelia web application into a native mobile app for iOS and Android. This advanced scenario covers wrapping your Aurelia app with native containers, accessing device APIs, and optimizing for mobile performance.

Why This Is an Advanced Scenario

Mobile app development with Aurelia involves:

Native container integration - Capacitor wrapping
Device API access - Camera, geolocation, contacts, file system
Platform-specific considerations - iOS vs Android differences
Build pipeline configuration - Multiple target platforms
Performance optimization - Mobile hardware constraints
App store deployment - Signing, provisioning, submission process
Offline-first architecture - Network unreliability on mobile
Touch interactions - Gestures, haptics, mobile UX patterns

Advanced topics include:

Native plugin development
Background processing and notifications
Secure storage and biometric authentication
App updates and hot-reload
Performance profiling on devices
Platform-specific UI adaptations

Complete Guide

For comprehensive documentation on building mobile apps with Aurelia, including:

Installing and configuring Capacitor
Setting up iOS and Android development environments
Creating and building native shells
Accessing device APIs (camera, GPS, contacts, etc.)
Handling platform-specific code
Testing on emulators and real devices
Debugging mobile applications
App store preparation and deployment workflows

See the complete guide: Using Aurelia 2 with Capacitor

Capacitor architecture at a glance

Capacitor hosts your Aurelia bundle inside native Android and iOS shells while exposing JavaScript access to device APIs:

Web runtime – ships a WebView that loads dist/ output from your Aurelia build.
Plugin layer – official and community plugins expose camera, geolocation, biometrics, network, push, and more via JavaScript modules.
Bridge – if a plugin does not exist, create one with npx cap generate plugin and call native Swift/Kotlin directly.
Tooling – npx cap sync keeps native projects updated; npx cap run --livereload connects devices to the Aurelia dev server for rapid iteration.

Quick Example: Capacitor Setup

# Create Aurelia app
npx makes aurelia my-mobile-app
cd my-mobile-app

# Install Capacitor
npm install @capacitor/core @capacitor/cli
npm install @capacitor/android @capacitor/ios

# Initialize Capacitor
npx cap init

# Build your Aurelia app
npm run build

# Add platforms
npx cap add android
npx cap add ios

# Open in native IDE
npx cap open android
npx cap open ios

Device API Access

Capacitor provides plugins for native features:

import { resolve } from '@aurelia/kernel';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export class MobileFeatures {
  async takePicture() {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Uri
    });
    return image.webPath;
  }

  async getCurrentPosition() {
    const position = await Geolocation.getCurrentPosition();
    return {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
  }
}

What You'll Learn

The complete Capacitor guide covers:

Environment Setup - Installing Capacitor, Android Studio, Xcode, and CLI tooling
Project Structure - Wiring Aurelia's build output into Capacitor's android/ and ios/ shells
Build Configuration - Vite/Webpack tweaks plus capacitor.config.ts
Plugin APIs - Camera, GPS, file system, biometrics, push notifications
Testing - Emulators, simulators, physical devices, and live reload
Debugging - Chrome DevTools, Safari Web Inspector, and native logs
Performance - Bundle size control, offline caching, memory considerations
Deployment - Automating npx cap sync, signing, and publishing to app stores

Common Mobile Patterns

Responsive Mobile UI

<div class="mobile-container">
  <header class="mobile-header">
    <button click.trigger="goBack()">←</button>
    <h1>${title}</h1>
  </header>

  <main class="mobile-content">
    <router-view></router-view>
  </main>

  <nav class="mobile-nav">
    <a href="#/home">Home</a>
    <a href="#/profile">Profile</a>
    <a href="#/settings">Settings</a>
  </nav>
</div>

Offline Support

import { resolve } from '@aurelia/kernel';
import { Network } from '@capacitor/network';

export class OfflineService {
  isOnline = true;

  async attached() {
    // Check initial status
    const status = await Network.getStatus();
    this.isOnline = status.connected;

    // Listen for changes
    Network.addListener('networkStatusChange', status => {
      this.isOnline = status.connected;
      if (status.connected) {
        this.syncOfflineData();
      }
    });
  }

  async syncOfflineData() {
    // Sync data that was queued while offline
  }
}

import { App } from '@capacitor/app';

export class BackButtonHandler {
  attached() {
    App.addListener('backButton', () => {
      // Handle Android back button
      if (this.canGoBack()) {
        window.history.back();
      } else {
        App.exitApp();
      }
    });
  }
}

Platform-Specific Considerations

iOS

Requirements: macOS, Xcode, Apple Developer account
Bundle ID: Must be unique (com.company.appname)
Provisioning: Code signing and certificates required
Review: App Store review process can take days

Android

Requirements: Android SDK, Java/Kotlin
Package Name: Must be unique (com.company.appname)
Signing: Keystore generation and management
Distribution: Google Play or direct APK distribution

Performance Tips

Minimize bundle size - Code splitting, tree shaking
Optimize images - Use WebP, lazy loading
Virtual scrolling - For long lists (use ui-virtualization)
Cache aggressively - Service workers, local storage
Reduce animations - Mobile CPUs/GPUs are limited
Test on real devices - Emulators don't show real performance

Migration from Aurelia 1

Aurelia 2 mobile apps are significantly faster due to:

Smaller bundle sizes
Better tree-shaking
Improved runtime performance
Modern JavaScript features

Most Capacitor plugins work identically between Aurelia versions.

Ready to build mobile apps? Head to the complete Capacitor guide.

Additional Resources

PreviousBinding and templating internals NextBuilding desktop apps and PWAs

Last updated 24 minutes ago

Was this helpful?