AndroidCapacitor 6Google Play Store

Publish HumaraDrama on Android

This guide walks you through wrapping the HumaraDrama PWA into a native Android app using Capacitor and submitting it to the Google Play Store — no rewrite required.

What you will need
macOS, Windows, or Linux — Capacitor works on all platforms
Android Studio (latest) — Free from developer.android.com/studio
Java 17+ (JDK) — Bundled with Android Studio
Node.js 18+ — Required for Capacitor CLI
Google account — For Play Console registration
$25 USD one-time fee — Google Play developer registration
Step 01Prerequisites
Install Capacitor & Android dependencies

Capacitor wraps your existing PWA into a native Android APK without rewriting any code. You need Node.js 18+, Android Studio, and Java 17+ installed on your development machine.

# Install Android Studio from developer.android.com/studio

# Then install Capacitor CLI and Android platform

npm install @capacitor/core @capacitor/cli @capacitor/android

npx cap init "HumaraDrama" "com.humaradrama.app" --web-dir=dist

npx cap add android

The --web-dir=dist flag points Capacitor at your Vite build output. The bundle ID com.humaradrama.app must match exactly what you register in Google Play Console — it cannot be changed after publishing.

Step 02Configuration
Configure capacitor.config.ts

Create or update capacitor.config.ts in your project root with the settings below. The server.url field is optional — remove it for production builds so the app loads from the bundled assets.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.humaradrama.app',
  appName: 'HumaraDrama',
  webDir: 'dist',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      backgroundColor: '#0a1f14',  // dark forest green
      androidSplashResourceName: 'splash',
      showSpinner: false,
    },
    StatusBar: {
      style: 'dark',
      backgroundColor: '#0a1f14',
    },
  },
  android: {
    allowMixedContent: false,
    captureInput: true,
    webContentsDebuggingEnabled: false,  // set true during dev
  },
};

export default config;
Step 03Build
Build the web app and sync to Android

Every time you change the web code you must rebuild and sync before opening Android Studio. The cap sync command copies the built assets into the native Android project and updates Capacitor plugins.

# Build the Vite frontend

pnpm build

# Sync web assets into the Android project

npx cap sync android

# Open Android Studio (optional — for signing/debugging)

npx cap open android

In Android Studio, open the Build Variants panel and select release before generating the final AAB.

Step 04Signing
Generate a release keystore and sign the AAB

Google Play requires every AAB to be signed with a release keystore. Generate one with the Java keytool command and store it securely — losing this file means you can never update your app.

# Generate keystore (run once, keep the .jks file safe!)

keytool -genkey -v -keystore humaradrama.jks \

-alias humaradrama -keyalg RSA \

-keysize 2048 -validity 10000

In Android Studio go to Build → Generate Signed Bundle / APK, choose Android App Bundle (.aab), select your keystore, and build the release AAB. The output file will be in android/app/build/outputs/bundle/release/.

Back up your humaradrama.jks file and its passwords in a secure password manager. There is no way to recover a lost keystore.

Step 05Play Console
Create a Google Play Console account

Go to play.google.com/console and sign in with a Google account. Pay the one-time $25 USD developer registration fee. This account will own all apps you publish.

Once registered, click Create app and fill in:

FieldValue
App nameHumaraDrama
Default languageEnglish (United Kingdom) or Urdu
App or gameApp
Free or paidFree
CategoryEntertainment
Step 06Assets
Prepare store listing assets

Google Play requires specific graphic assets before you can publish. Prepare these before uploading your AAB:

AssetSize / FormatNotes
App icon512 × 512 PNGUse the HumaraDrama emerald icon
Feature graphic1024 × 500 PNG/JPGBanner shown on Play Store listing
Phone screenshotsMin 2, up to 8 (16:9 or 9:16)Show drama grid, episode picker, search
Tablet screenshotsOptional but recommended7-inch and 10-inch layouts
Short descriptionMax 80 charactersPakistan's #1 drama database
Full descriptionMax 4000 charactersInclude keywords: Pakistani drama, Hum TV, ARY…
Step 07Submission
Upload AAB and submit for review

In Play Console, navigate to Production → Releases → Create new release. Upload your signed .aab file. Google will automatically generate optimised APKs for different device configurations.

Complete the App content section (Privacy Policy URL, target audience, ads declaration, data safety form). Your Privacy Policy is already live at https://humaradrama.com/privacy — use that URL.

First-time submissions typically take 3–7 business days for Google to review. Subsequent updates are usually approved within a few hours.

Once approved, your app will be live at play.google.com/store/apps/details?id=com.humaradrama.app.

Step 08Growth
Optimise for Pakistani users

After launch, a few optimisations will significantly improve visibility in Pakistan and among the diaspora:

  • Localise the store listing in Urdu — Play Console supports Urdu (ur). A localised listing ranks higher for Urdu searches.
  • Target Pakistan in distribution — Under 'Countries / regions', ensure Pakistan is included. Consider also UAE, UK, USA for diaspora.
  • Enable in-app review prompts — Use @capacitor-community/in-app-review to prompt satisfied users for a Play Store rating.
  • Set up Firebase Crashlytics — Add @capacitor-firebase/crashlytics to catch native crashes before users report them.
  • Deep link drama pages — Configure Android App Links so sharing a drama URL opens the app directly.

Already have the iOS App Store version?

The same Capacitor project can target both iOS and Android. After completing this guide, run npx cap add ios and follow the iOS submission process using Xcode. Both platforms share the same web source code.