Files
TaskMate/PWA_TO_APK_ANLEITUNG.md
2026-01-10 16:47:02 +00:00

9.3 KiB

TaskMate PWA zu APK - Vollständige Anleitung

Überblick

Diese Anleitung zeigt, wie Sie aus der TaskMate PWA eine Android APK erstellen, die im Google Play Store veröffentlicht werden kann.

Voraussetzungen

  • TaskMate PWA ist online verfügbar (https://taskmate.aegis-sight.de)
  • Web App Manifest und Service Worker sind implementiert
  • PWA Icons in allen erforderlichen Größen vorhanden

Methode 1: PWABuilder (Einfachste Methode)

Schritt 1: PWA Score prüfen

  1. Öffnen Sie https://www.pwabuilder.com
  2. Geben Sie Ihre PWA URL ein: https://taskmate.aegis-sight.de
  3. Klicken Sie auf "Start"
  4. PWABuilder analysiert Ihre App und zeigt den Score

Schritt 2: Package für Android generieren

  1. Klicken Sie auf "Package for stores"
  2. Wählen Sie "Android"
  3. Konfigurieren Sie die Einstellungen:
    • Package ID: de.aegissight.taskmate
    • App Name: TaskMate
    • Display Mode: Standalone
    • Orientation: Any
    • Fallback URL: https://taskmate.aegis-sight.de

Schritt 3: Erweiterte Optionen

  • Signing Key:
    • "None" für Test-APK
    • "New" für Play Store (speichern Sie den Key sicher!)
  • Maskable Icon: Upload des 512x512 Icons
  • Splash Screen: Automatisch generiert
  • Settings:
    • Enable notifications: Yes
    • Location permissions: No
    • WebView settings: Standard

Schritt 4: Download und Test

  1. Klicken Sie auf "Download"
  2. Extrahieren Sie die ZIP-Datei
  3. Die APK befindet sich im Ordner
  4. Installieren Sie zum Testen auf einem Android-Gerät

Methode 2: Bubblewrap (Für Entwickler)

Installation

# Node.js und npm müssen installiert sein
npm install -g @bubblewrap/cli

Projekt initialisieren

# Neues Verzeichnis erstellen
mkdir taskmate-android
cd taskmate-android

# Bubblewrap init
bubblewrap init --manifest https://taskmate.aegis-sight.de/manifest.json

Konfiguration (twa-manifest.json)

{
  "packageId": "de.aegissight.taskmate",
  "host": "taskmate.aegis-sight.de",
  "name": "TaskMate",
  "launcherName": "TaskMate",
  "display": "standalone",
  "themeColor": "#000000",
  "navigationColor": "#000000",
  "backgroundColor": "#000000",
  "enableNotifications": true,
  "startUrl": "/",
  "iconUrl": "https://taskmate.aegis-sight.de/assets/icons/icon-512x512.png",
  "maskableIconUrl": "https://taskmate.aegis-sight.de/assets/icons/icon-512x512.png",
  "appVersion": "1.0.0",
  "signingKey": {
    "alias": "taskmate-key",
    "path": "./taskmate-key.keystore"
  },
  "splashScreenFadeOutDuration": 300,
  "enableSiteSettingsShortcut": false,
  "shortcuts": [
    {
      "name": "Neue Aufgabe",
      "shortName": "Neue Aufgabe",
      "url": "/?action=new-task",
      "chosenIconUrl": "https://taskmate.aegis-sight.de/assets/icons/add-task-96x96.png"
    }
  ],
  "fallbackType": "customtabs",
  "webManifestUrl": "https://taskmate.aegis-sight.de/manifest.json"
}

Build-Prozess

# Keystore erstellen (nur einmal)
bubblewrap build --skipPwaValidation

# APK erstellen
bubblewrap build

# Signed APK für Play Store
bubblewrap build --skipPwaValidation

Methode 3: Android Studio mit TWA

Projekt Setup

  1. Erstellen Sie ein neues Android-Projekt
  2. Minimum SDK: API 19 (Android 4.4)
  3. Wählen Sie "No Activity"

Dependencies (app/build.gradle)

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.5.0'
}

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="de.aegissight.taskmate">
    
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
            android:exported="true"
            android:label="@string/app_name">
            
            <meta-data
                android:name="android.support.customtabs.trusted.DEFAULT_URL"
                android:value="https://taskmate.aegis-sight.de" />
            
            <meta-data
                android:name="android.support.customtabs.trusted.STATUS_BAR_COLOR"
                android:resource="@color/colorPrimary" />
            
            <meta-data
                android:name="android.support.customtabs.trusted.NAVIGATION_BAR_COLOR"
                android:resource="@color/colorPrimary" />
            
            <meta-data
                android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
                android:resource="@drawable/splash" />
            
            <meta-data
                android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
                android:value="300" />
            
            <meta-data
                android:name="android.support.customtabs.trusted.DISPLAY_MODE"
                android:value="standalone" />
            
            <meta-data
                android:name="android.support.customtabs.trusted.SCREEN_ORIENTATION"
                android:value="unspecified" />
            
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <data
                    android:scheme="https"
                    android:host="taskmate.aegis-sight.de"/>
            </intent-filter>
        </activity>
        
        <service
            android:name="com.google.androidbrowserhelper.trusted.DelegationService"
            android:enabled="true"
            android:exported="true">
            
            <intent-filter>
                <action android:name="android.support.customtabs.trusted.TRUSTED_WEB_ACTIVITY_SERVICE"/>
                <category android:name="android.intent.category.DEFAULT"/>
            </intent-filter>
        </service>
        
    </application>
</manifest>

Erstellen Sie auf Ihrem Server die Datei: https://taskmate.aegis-sight.de/.well-known/assetlinks.json

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "de.aegissight.taskmate",
    "sha256_cert_fingerprints": [
      "YOUR_APP_SIGNING_KEY_FINGERPRINT"
    ]
  }
}]

Icon-Generierung

Falls Icons fehlen, nutzen Sie diese Tools:

  1. Android Asset Studio: https://romannurik.github.io/AndroidAssetStudio/
  2. Maskable.app: https://maskable.app/editor

Benötigte Größen:

  • 48x48, 72x72, 96x96, 144x144, 192x192, 512x512
  • Adaptive Icons für Android 8+

Testing

Lokaler Test

  1. Aktivieren Sie "Unbekannte Quellen" in Android-Einstellungen
  2. Übertragen Sie die APK aufs Gerät
  3. Installieren und testen

Play Console Test Track

  1. Laden Sie die APK in die Google Play Console
  2. Erstellen Sie eine interne Testversion
  3. Fügen Sie Tester hinzu
  4. Testen Sie Installation und Updates

Veröffentlichung im Play Store

Vorbereitung

  1. Google Play Developer Account ($25 einmalig)
  2. App-Beschreibung und Screenshots
  3. Datenschutzerklärung
  4. Altersfreigabe-Fragebogen

Store Listing

  • Titel: TaskMate - Aufgabenverwaltung
  • Kurzbeschreibung: Einfache und effiziente Aufgabenverwaltung mit Kanban-Board
  • Kategorie: Produktivität
  • Screenshots: Mindestens 2, idealerweise 8

APK Upload

  1. Signierte APK erstellen
  2. In Play Console hochladen
  3. Rollout starten (gestaffelt empfohlen)

Wartung und Updates

Version Updates

  1. Erhöhen Sie versionCode und versionName
  2. Erstellen Sie neue APK
  3. Laden Sie in Play Console hoch
  4. Beschreiben Sie Änderungen

PWA Updates

  • Service Worker Updates werden automatisch geladen
  • Manifest-Änderungen erfordern App-Update
  • Cache-Versionierung beachten

Häufige Probleme

"Not a valid PWA"

  • Prüfen Sie HTTPS
  • Validieren Sie manifest.json
  • Service Worker muss registriert sein
  • assetlinks.json muss öffentlich erreichbar sein
  • SHA256 Fingerprint muss stimmen
  • Content-Type: application/json

Icon-Probleme

  • Alle Größen müssen vorhanden sein
  • PNG-Format erforderlich
  • Transparenz vermeiden für adaptive Icons

Empfehlungen

  1. Verwenden Sie PWABuilder für den Anfang
  2. Bubblewrap für mehr Kontrolle
  3. Android Studio nur bei speziellen Anforderungen
  4. Testen Sie auf verschiedenen Geräten
  5. Behalten Sie die Keystore-Datei sicher auf!

Nächste Schritte

  1. Icons generieren (falls noch nicht vorhanden)
  2. PWABuilder Test durchführen
  3. Test-APK erstellen und installieren
  4. Bei Erfolg: Play Store Konto einrichten
  5. Produktions-APK mit Signing Key erstellen
  6. Im Play Store veröffentlichen

Bei Fragen oder Problemen können Sie die offizielle Dokumentation konsultieren: