Was this helpful?
# 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 iosimport { 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
};
}
}<div class="mobile-container">
<header class="mobile-header">
<button click.trigger="goBack()">←</button>
<h1>${title}</h1>
</header>
<main class="mobile-content">
<au-viewport></au-viewport>
</main>
<nav class="mobile-nav">
<a href="#/home">Home</a>
<a href="#/profile">Profile</a>
<a href="#/settings">Settings</a>
</nav>
</div>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();
}
});
}
}