325 Zeilen
9.3 KiB
Markdown
325 Zeilen
9.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# Node.js und npm müssen installiert sein
|
|
npm install -g @bubblewrap/cli
|
|
```
|
|
|
|
### Projekt initialisieren
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```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
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```gradle
|
|
dependencies {
|
|
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.5.0'
|
|
}
|
|
```
|
|
|
|
### AndroidManifest.xml
|
|
|
|
```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>
|
|
```
|
|
|
|
### Digital Asset Links
|
|
|
|
Erstellen Sie auf Ihrem Server die Datei:
|
|
`https://taskmate.aegis-sight.de/.well-known/assetlinks.json`
|
|
|
|
```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
|
|
|
|
### "Digital Asset Links validation failed"
|
|
- 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:
|
|
- [PWABuilder Docs](https://docs.pwabuilder.com/)
|
|
- [Bubblewrap GitHub](https://github.com/GoogleChromeLabs/bubblewrap)
|
|
- [TWA Documentation](https://developers.google.com/web/android/trusted-web-activity) |