Zum Hauptinhalt springen

Wie Capacitor Plattformunterschiede handhabt

Erfahren Sie, wie Sie Plattformunterschiede in der mobilen App-Entwicklung effektiv mit einer einzigen Codebasis für iOS und Android verwalten können.

Martin Donadieu

Martin Donadieu

Content-Marketing-Manager

Wie Capacitor Plattformunterschiede handhabt

Capacitor hilft Entwicklern, Apps für iOS und Android mit derselben Codebasis zu erstellen, während sie Plattform-spezifische Unterschiede ansprechen. Es vereinfacht die Integration von nativen Funktionen, sichert die Einhaltung von Richtlinien der Plattform und optimiert die Leistung. Hervorhebungen:

  • Plattform-Detektion: Anwenden Capacitor.getPlatform() um code auf Plattform spezifische Anwendungen anzuwenden.
  • Integrierte Plugins: Einheitliche APIs für Funktionen wie Kamera, Speicher und Standort.
  • Benutzerdefinierte Plugins: Fügen Sie native code für einzigartige Anforderungen hinzu.
  • Benutzeroberflächeanpassungen: Führen Sie sich an den Designregeln für iOS (z.B. SF-Symbole, runde Schaltflächen) und Android (z.B. Material-Icons, linkschaltflächen ausgerichtet).
  • Konfiguration: Einstellungen für beide Plattformen anpassen. capacitor.config.json Live-Updates mit
  • __CAPGO_KEEP_0__ CapgoSchnelle Vergleichsmöglichkeit

Funktion

iOSAndroidNavigation
protectedTokensUnterbares Tab-Leisten, Zurück-Button linksOberes Navigation-Drawer, unteres Nav
TypografieSan Francisco-SchriftartRoboto-Schriftart
Plugins (z.B. Kamera)AVFoundationKamera2 API
Build-Ausgabe.ipa Datei.aab oder .apk Datei

Capacitor schafft einen Brückenschlag zwischen Web- und native App-Entwicklung, was es Entwicklern erleichtert, Plattformenübergreifende Apps zu erstellen, während gleichzeitig Plattform-spezifische Optimierungen beibehalten werden.

Quer-Plattform-Entwicklung: Erforschung von CapacitorJS mit …

Wie Capacitor Plattform-Code-Verwaltung

Capacitor-Framework-Dokumentation-Website

Capacitor bietet Werkzeuge zur Verwaltung plattform-spezifischer code, sodass Entwickler mit einem einzigen API individuelle Erfahrungen für iOS und Android erstellen können.

Plattformen erkennen in Code

Mit Capacitor’s integrierten Plattform-API ist die Erkennung der aktuellen Plattform einfach. Die Methode identifiziert die laufende Umgebung, was es Entwicklern erleichtert, bedingte Logik anzuwenden: Capacitor.getPlatform() Diese Vorgehensweise ist insbesondere für Funktionen wie

import { Capacitor } from '@capacitor/core';

const platform = Capacitor.getPlatform();
if (platform === 'ios') {
  // Code specific to iOS
} else if (platform === 'android') {
  // Code specific to Android
}

__CAPGO_KEEP_0__ bridges the gap between web and native app development, making it easier to create cross-platform apps while maintaining platform-specific optimizations. biometrische Authentifizierung, wobei iOS Face ID und Android auf Fingerprint-Authentifizierung zurückgreift. Neben der Plattformdetektion vereinfachen die in __CAPGO_KEEP_0__ integrierten Plugins die native Integration. Eigene Plattformfunktionen Capacitor verfügt über eine Reihe von Kern-Plugins, die Plattform-spezifische Unterschiede problemlos handhaben. Diese Plugins bewältigen die Komplexität der native Implementierungen und bieten eine konsistente JavaScript-Schnittstelle:

Plugin

Capacitor comes with a set of core plugins that handle platform-specific differences seamlessly. These plugins manage the complexities of native implementations while providing a consistent JavaScript interface:

Android-ImplementierungKameraAVFoundation
Kamera2__CAPGO_KEEP_0__API
SpeicherUserDefaultsSharedPreferences
StandortCoreLocationLocationManager

Jeder Plugin wird automatisch die nativen APIs der Plattform verwenden, um eine glatte Leistung und Funktionalität zu gewährleisten.

Benutzerdefinierte Plattform-Plugins erstellen

Für Fälle, in denen die integrierten Plugins Ihren Anforderungen nicht entsprechen, können Sie benutzerdefinierte Plugins erstellen, um spezifische nativere APIs zu nutzen. Hier ist, wie Sie es machen:

  1. Plugin definieren

    @Plugin({
      name: 'CustomFeature',
      platforms: ['ios', 'android']
    })
  2. Natives Code hinzufügen

    @PluginMethod()
    async customFunction(): Promise<void> {
      if (Capacitor.getPlatform() === 'ios') {
        // Add iOS-specific code
      } else {
        // Add Android-specific code
      }
    }
  3. Plattform-Handler implementieren

    • iOS (Swift):

      @objc func customFunction(_ call: CAPPluginCall) {
        // Add native iOS functionality
      }
    • Android (Kotlin):

      @PluginMethod
      fun customFunction(call: PluginCall) {
        // Add native Android functionality
      }

Benutzerdefinierte Plugins ermöglichen den Zugriff auf native Funktionen, während die API konsistent und einfach zu verwenden ist. Dies sichert die Leistung und Funktionalität ohne die Entwicklung zu komplizieren.

Plattformspezifische UI-Leitlinien

iOS vs Android-Designregeln

Bei der Gestaltung für iOS und Android ist es wichtig, native Designmuster zu befolgen. Benutzer auf jeder Plattform haben unterschiedliche Erwartungen an Dinge wie Navigation, Schriftarten, Schaltflächen, Überschriften und Symbole. Hier ist eine Übersicht:

DesignelementiOSAndroid
NavigationUnterseite mit Tab-Reglern, Rücktaste linksOberes Navigationsmenü, untere Navigation
TypografieSan Francisco-SchriftartRoboto-Schriftart
SchaltflächenRunde Rechtecke, zentriertes TextMaterial Design-Schaltflächen, links ausgerichtetes Text
ÜberschriftenGroße Titel, zentriertApp-Bars, links ausgerichtet
SymboleSF-SymboleMaterial Icons

Cross-Platform-Design-Standards

Während jeder Plattform ihre eigenen Regeln hat, ist es wichtig, eine kohärente Marke über beide Plattformen hinweg aufrechtzuerhalten. Hier ist, wie Sie eine konsistente Marke sicherstellen können:

const sharedStyles = {
  primaryColor: '#007AFF', // iOS blue
  androidPrimaryColor: '#6200EE', // Material Design purple
  borderRadius: Capacitor.getPlatform() === 'ios' ? '10px' : '4px'
};

:root {
  --app-header-height: var(--platform-header-height, 56px);
  --app-safe-area-top: var(--platform-safe-area-top, 0px);
}

Mit Capacitor können Sie plattform-spezifische UI-Komponenten integrieren, während die Funktionalität konsistent bleibt. Es hilft auch dabei, systemweite Einstellungen wie Dunkelmodus und Dynamische Schriftgröße zu verwalten. Um den Prozess abzuschließen, stellen Sie sicher, dass Ihre plattform-spezifischen Build-Einstellungen mit diesen Richtlinien übereinstimmen.

Plattform-Setup und -Konfiguration

Nachdem Sie Ihre Plattform code verwaltet haben, ist eine ordnungsgemäße Konfiguration wichtig, um sicherzustellen, dass Ihre App reibungslos auf beiden iOS und Android läuft.

Plattform-Einstellungen in capacitor.config.json

Verwenden Sie das capacitor.config.json Datei, um wichtige plattform-spezifische Einstellungen zu definieren:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "ios": {
    "contentInset": "always",
    "backgroundColor": "#ffffff",
    "scheme": "myapp",
    "preferredContentMode": "mobile"
  },
  "android": {
    "backgroundColor": "#FFFFFF",
    "allowMixedContent": true,
    "captureInput": true,
    "webContentsDebuggingEnabled": true
  }
}

Hier sind einige Konfigurationsoptionen, die Sie in Betracht ziehen sollten:

OptioniOSAndroid
Tiefgängescheme __CAPGO_KEEP_0__androidScheme __CAPGO_KEEP_0__
StatusleistestatusBar.stylestatusBar.backgroundColor
Tastaturkeyboard.resizekeyboard.resize, keyboard.style
WillkommensbildschirmsplashScreen.launchShowDurationsplashScreen.layoutName

Einmal sind die Laufzeit-Einstellungen im Gängen, passen Sie Ihre Build-Einstellungen an, um die Leistung für jede Plattform zu verbessern.

Plattform-spezifische Build-Einstellungen

Feinjustieren Sie die Build-Einstellungen, um Ihre App für iOS und Android zu optimieren.

Für iOS aktualisieren Sie das Info.plist datei:

<key>NSCameraUsageDescription</key>
<string>Required for document scanning</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Required for store locator</string>

Für Android ändern Sie android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 33
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt')
        }
    }
}

Hier sind einige wichtige Überlegungen für die Erstellung:

AspektiOSZugriffsrechte
Hinzufügen von Einträgen inDefinieren in Info.plistIcons AndroidManifest.xml
Größen von 20px bis 1024pxDichten von mdpi bis xxxhdpiSplash-Screen
Storyboard-basiert__CAPGO_KEEP_0__Layout XML-basiert
Build Ausgabe.ipa Datei.aab oder .apk Datei

Apps aktualisieren mit Capgo

Capgo Live-Update-Dashboard-Interface

Wichtig ist, dass __CAPGO_KEEP_0__-Apps effizient für beide iOS und Android aktualisiert werden. Capacitor bietet ein Live-Update-System, das sich an die Richtlinien beider Plattformen anpasst. Capgo-Funktionen

Capgo

FunktionBeschreibungPlattformvorteil
Live-UpdatesDeployen Sie sofort ohne App-Store-ÜberprüfungSichert eine einheitliche Erfahrung auf iOS und Android
End-to-End-VerschlüsselungSichert die Lieferung von UpdatesErfüllt die Sicherheitsanforderungen beider Plattformen
Kanal-SystemZielgruppen spezifischUnterstützt Beta-Testungen und Phasenrollouts
Partial UpdatesNur Downloads des modifizierten InhaltsSparen von Bandbreite und Beschleunigung der Updates

Capgo hat 23,5 Millionen Updates geliefert, wobei 95 % der aktiven Benutzer innerhalb von 24 Stunden aktualisiert wurden [1]. Diese Funktionen machen Update-Management smoother und effizienter über Plattformen.

Capgo Plattform-Management

Capgo’s Kanal-System macht Updates einfacher zu verwalten. Entwickler können iOS-spezifische Funktionen mit Beta-Benutzern testen, Android-Updates in Stufen bereitstellen und Leistungsmetriken problemlos verfolgen.

Die Plattform erfüllt die Anforderungen von Apple und Google für drahtlose Updates [1].

Aktuell nutzen 750 Produktionsanwendungen Capgo, wobei ein globales Update-Erfolgsrate von 82 % erreicht wird [1]. Seine CI/CD-Integration vereinfacht die Bereitstellung, während die Rückkehrfunktion es Entwicklern ermöglicht, auf vorherige Versionen zurückzukehren, wenn Probleme auftreten. Echtzeit-Analysen liefern Einblicke in die Update-Leistung und helfen dabei, die Anwendungsstabilität aufrechtzuerhalten.

Zusammenfassung

Vorteile der Plattform-Verwaltung

Die effektive Verwaltung von Plattformunterschieden in Capacitor verbessert die Cross-Plattform-Entwicklung. Seine integrierten Werkzeuge für Plattformdetektion und -konfiguration ermöglichen Entwicklern die Erstellung glatter Erfahrungen für sowohl iOS als auch Android, während die einzigartigen Designstandards und Funktionen jeder Plattform respektiert werden.

Durch das Fokussieren auf eine ordnungsgemäße Plattformverwaltung können Entwicklungsteams Updates schneller freigeben und die Benutzerzufriedenheit verbessern. Werkzeuge wie Capgo haben gezeigt, wie konsistente Plattformverwaltung zu höheren Erfolgsraten bei Updates und besseren Benutzererfahrungen führen kann [1].

“We practice agile development and @Capgo is mission-critical in delivering continuously to our users!”
Wir praktizieren agiles Entwickeln und @__CAPGO_KEEP_0__ ist mission-kritisch bei der ständigen Lieferung an unsere Benutzer! [1]

These insights can guide you in making practical improvements.

Diese Erkenntnisse können Sie bei der praktischen Verbesserung leiten.

Nächste Schritte

Um diese Vorteile zu maximieren, sollten Sie die folgenden Strategien umsetzen:Aktionselement
VorteilAutomatisch an die Bedürfnisse von iOS und Android anpasst
Live-Updates implementierenVermeidet App-Store-Verzögerungen für dringende Reparaturen
Analytik einrichtenFolgt den Leistungsmetriken für jede Plattform
Rollback-Funktion aktivierenPlattform-spezifische Probleme schnell löst

Für Entwickler, die ihre Workflow verbessern möchten, können Werkzeuge wie Capgo den Prozess vereinfachen. Funktionen wie End-to-End-Verschlüsselung und CI/CD-Integration helfen Teams, Konsistenz zu gewährleisten, während sie Updates effizient bereitstellen.

Der Erfolg bei der Plattformverwaltung hängt davon ab, die richtigen Werkzeuge zu verwenden und sich an plattform-spezifische Richtlinien zu halten. Durch das Fokussieren auf robuste Erkennungs- und Verwaltungsstrategien können Entwickler sicherstellen, dass ihre Apps reibungslos auf beide iOS und Android funktionieren.

Live-Updates für Capacitor-Apps

Wenn ein Fehler im Web-Schicht lebt, liefern Sie die Reparatur über Capgo anstatt Tage auf die Genehmigung der App-Stores zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Loslegen

Neueste Beiträge aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobilen App zu erstellen.