Android App

# Install Bubblewrap (requires Java 8+ and Android SDK)
npm install -g @bubblewrap/cli

# Initialize from your PWA's manifest URL
bubblewrap init --manifest https://yoursite.com/manifest.json

# This creates an Android project. Build it:
bubblewrap build

# Output: app-release-bundle.aab (upload to Play Store)
#         app-release-signed.apk (install directly)

# Update after making changes to your PWA:
bubblewrap update
bubblewrap build

// Host this file at: https://yourdomain.com/.well-known/assetlinks.json
// Replace YOUR_SHA_CERT with the fingerprint from your keystore
[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.yourcompany.yourapp",
    "sha256_cert_fingerprints": [
      "AA:BB:CC:DD:EE:FF:..."
    ]
  }
}]

// Capture the install prompt event
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;

  // Show your custom install button
  document.getElementById('install-btn').style.display = 'block';
});

document.getElementById('install-btn')
  .addEventListener('click', async () => {
    if (!deferredPrompt) return;
    deferredPrompt.prompt(); // show install dialog
    const { outcome } = await deferredPrompt.userChoice;
    console.log('User choice:', outcome); // 'accepted' or 'dismissed'
    deferredPrompt = null;
  });

// Detect if already installed
window.addEventListener('appinstalled', () => {
  console.log('App installed!');
  document.getElementById('install-btn').style.display = 'none';
});

# Install Capacitor in your existing web project
npm install @capacitor/core @capacitor/cli

# Initialize (sets up capacitor.config.ts)
npx cap init "My App" "com.mycompany.myapp" --web-dir=dist

# Add Android platform
npm install @capacitor/android
npx cap add android

# Build your web app first
npm run build

# Sync web files to Android project
npx cap sync android

# Open in Android Studio
npx cap open android

# (In Android Studio: Run → connected device or emulator)

# After changes: sync + refresh
npm run build && npx cap sync android

// Install plugins as needed:
// npm install @capacitor/camera @capacitor/geolocation @capacitor/push-notifications

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { PushNotifications } from '@capacitor/push-notifications';

// Take a photo with the camera
async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.DataUrl,
    source: CameraSource.Camera
  });

  // photo.dataUrl is a base64 image string
  document.getElementById('preview').src = photo.dataUrl;
}

// Get user's GPS location
async function getLocation() {
  const position = await Geolocation.getCurrentPosition();
  return {
    lat: position.coords.latitude,
    lng: position.coords.longitude,
  };
}

// Push notifications setup
async function setupPushNotifications() {
  const permission = await PushNotifications.requestPermissions();
  if (permission.receive === 'granted') {
    await PushNotifications.register();
  }

  PushNotifications.addListener('registration', (token) => {
    console.log('FCM Token:', token.value);
    // Save this token to your backend to send notifications
  });
}

// Check if running as native app vs browser
import { Capacitor } from '@capacitor/core';
if (Capacitor.isNativePlatform()) {
  console.log('Running as native app');
  console.log('Platform:', Capacitor.getPlatform()); // 'android' | 'ios' | 'web'
}

# Expo is the recommended way to start in 2026
npx create-expo-app@latest MyApp
cd MyApp

# Run on Android emulator or physical device
npx expo run:android

# Or use Expo Go app (fastest for dev)
npx expo start
# → Scan QR code with Expo Go app on your phone

# Build production APK/AAB
eas build --platform android --profile production

import React, { useState } from 'react';
import {
  View, Text, StyleSheet, TouchableOpacity,
  FlatList, TextInput, Image, ScrollView
} from 'react-native';

export default function HomeScreen() {
  const [text, setText] = useState('');

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>My App </Text>

      <TextInput
        style={styles.input}
        placeholder="Type something..."
        value={text}
        onChangeText={setText}
      />

      <TouchableOpacity
        style={styles.btn}
        onPress={() => alert(`You typed: ${text}`)}
      >
        <Text style={styles.btnText}>Submit</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0a0a0f', padding: 24 },
  title:     { fontSize: 32, fontWeight: '900', color: '#f8fafc' },
  input:     { backgroundColor: '#1a1a2e', color: '#fff', padding: 12, borderRadius: 8, marginTop: 16 },
  btn:       { backgroundColor: '#0038FF', padding: 14, borderRadius: 8, marginTop: 12 },
  btnText:   { color: '#fff', fontWeight: '700', textAlign: 'center' },
});

# Generate a keystore (save this file SECURELY — you need it forever)
keytool -genkey -v \
  -keystore my-release-key.jks \
  -keyalg RSA \
  -keysize 2048 \
  -validity 10000 \
  -alias my-key-alias

# You'll be asked for a password and your identity info
# NEVER lose this file or its password - you can't update your app without it

# Get SHA-256 fingerprint (for assetlinks.json)
keytool -list -v -keystore my-release-key.jks -alias my-key-alias

// app.json — configure URL scheme
{
  "expo": {
    "scheme": "myapp",  // opens app via myapp://
    "intentFilters": [{  // Android App Links (https://)
      "action": "VIEW",
      "autoVerify": true,
      "data": [{ "scheme": "https", "host": "yoursite.com" }],
      "category": ["BROWSABLE", "DEFAULT"]
    }]
  }
}

// Handle deep link in app (React Navigation)
const linking = {
  prefixes: ['myapp://', 'https://yoursite.com'],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:userId',
      Product: 'products/:id',
    }
  }
};