Logo für Webseiten-Tab implementiert
Dieser Commit ist enthalten in:
hendrik_gebhardt@gmx.de
committet von
Server Deploy
Server Deploy
Ursprung
ef153789cc
Commit
5b1f8b1cfe
325
PWA_TO_APK_ANLEITUNG.md
Normale Datei
325
PWA_TO_APK_ANLEITUNG.md
Normale Datei
@ -0,0 +1,325 @@
|
||||
# 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)
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren