Moderne Webtechnologien ermöglichen es, Anwendungen nicht nur im Browser, sondern auch als mobile Anwendungen auszuführen. Mit CapacitorJS kann eine mit React, Vue, Angular oder JavaScript entwickelte Webanwendung als Android- und iOS-App bereitgestellt und über Google Play Store und den Apple App Store veröffentlicht werden.

Der wichtigste Punkt dabei ist:

Capacitor zwingt Sie nicht dazu, Ihre Webanwendung als native App neu zu programmieren. Stattdessen führt es Ihre bestehende Webanwendung in einer nativen mobilen Umgebung aus und ermöglicht den Zugriff auf native Gerätefunktionen.

1. Was macht CapacitorJS?

Nehmen wir an, Sie haben bereits eine React-Anwendung:

React
HTML
CSS
JavaScript
API
IndexedDB

Normalerweise läuft diese Anwendung in einem Browser.

Mit Capacitor sieht die Architektur folgendermaßen aus:

                    React-Webanwendung
                           │
                           ▼
                       Capacitor
                      /        \
                     /          \
                    ▼            ▼
               Android          iOS

Ihre Webanwendung funktioniert weiterhin im Web, während dieselbe Codebasis auch für Android- und iOS-Anwendungen verwendet werden kann.

2. Capacitor ist kein UI-Framework

Capacitor sollte nicht als weiteres UI-Framework wie React Native betrachtet werden.

Seine Aufgabe ist eine andere.

React
    ↓
Erstellt die Benutzeroberfläche

Capacitor
    ↓
Führt die Webanwendung in einer nativen Umgebung aus
    ↓
Ermöglicht den Zugriff auf native APIs

React bleibt React. Vue bleibt Vue.

Capacitor wird auf Ihre bestehende Webanwendung aufgesetzt.

Auch Ionic ist nicht zwingend erforderlich. Capacitor kann unabhängig mit modernen Webframeworks verwendet werden.

3. Wie funktioniert Capacitor?

Der einfachste Weg, Capacitor zu verstehen, ist das Konzept der WebView.

Eine mobile Anwendung enthält eine WebView, in der Ihre Webanwendung ausgeführt wird.

┌─────────────────────────────┐
│        Android / iOS        │
│                             │
│   ┌─────────────────────┐   │
│   │       WebView       │   │
│   │                     │   │
│   │      React App      │   │
│   │                     │   │
│   │   HTML / CSS / JS   │   │
│   └──────────┬──────────┘   │
│              │              │
│          Capacitor           │
│              │              │
│   ┌──────────▼──────────┐   │
│   │     Native APIs     │   │
│   │                     │   │
│   │ Kamera              │   │
│   │ GPS                 │   │
│   │ Benachrichtigungen  │   │
│   │ Dateien             │   │
│   │ Haptik              │   │
│   │ Netzwerk            │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

Ihre React-Anwendung läuft innerhalb der WebView.

Capacitor fungiert als Brücke zwischen der WebView und dem Betriebssystem.

4. Warum gilt das als native Anwendung?

Weil nicht einfach nur Ihre Website in einem Browser geöffnet wird.

Ihre React-Anwendung kann beispielsweise:

Camera.getPhoto()

aufrufen.

Capacitor kann diesen Aufruf anschließend an die nativen Kamera-APIs von Android oder iOS weiterleiten.

Ihr JavaScript verwendet dadurch eine gemeinsame Schnittstelle, während Capacitor die plattformspezifischen Unterschiede übernimmt.

5. Was sind Capacitor-Plugins?

Plugins gehören zu den wichtigsten Funktionen von Capacitor.

Man kann sie als:

Brücke zwischen JavaScript und nativen Gerätefunktionen

betrachten.

Beispiele sind:

• Kamera

• Dateisystem

• Geolokalisierung

• Benachrichtigungen

• Netzwerk

• Haptik

• Einstellungen

• Push-Benachrichtigungen

• Teilen

• Geräteinformationen

• Bildschirmausrichtung

Beispiel:

import { Haptics, ImpactStyle } from '@capacitor/haptics';

await Haptics.impact({
    style: ImpactStyle.Medium
});

Ihr JavaScript-Code kann damit native Funktionen auslösen, ohne die Android- und iOS-APIs direkt implementieren zu müssen.

6. Kann Capacitor die Kamera verwenden?

Ja.

Sie können Benutzern ermöglichen:

• Fotos aufzunehmen;

• Fotos aus der Galerie auszuwählen;

• Profilbilder hochzuladen;

• Dokumente oder Bilder zu erfassen.

Zum Beispiel:

Profilbild
    │
    ▼
  Kamera
    │
    ▼
   Foto
    │
    ▼
  React
    │
    ▼
   API

7. Kann Capacitor GPS verwenden?

Ja.

Zum Beispiel:

import { Geolocation } from '@capacitor/geolocation';

const position =
    await Geolocation.getCurrentPosition();

Damit kann Ihre Webanwendung über Capacitor auf die Standortdienste von Android und iOS zugreifen.

8. Können Benachrichtigungen gesendet werden?

Ja.

Capacitor unterstützt sowohl lokale Benachrichtigungen als auch Push-Benachrichtigungen.

Eine Planner-Anwendung könnte beispielsweise folgende Meldung auf dem Smartphone anzeigen:

„Vergiss nicht, deine Mathematik-Hausaufgaben zu erledigen.“

Das ist ein wichtiger Vorteil gegenüber einer normalen Website.

9. Können Daten offline gespeichert werden?

Ja.

Capacitor stellt APIs für die Arbeit mit dem nativen Dateisystem bereit.

Für eine Offline-Anwendung können beispielsweise folgende Technologien kombiniert werden:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

Die Offline-Architektur und die Synchronisierung müssen allerdings von Ihnen selbst entwickelt werden.

Eine typische Architektur sieht so aus:

Lokale Datenbank
       ↓
Synchronisierungs-Engine
       ↓
API
       ↓
Server-Datenbank

10. Können Web und Mobile denselben Code verwenden?

Zum großen Teil ja.

Eine React-Anwendung kann beispielsweise so aufgebaut sein:

src/
├── components/
├── pages/
├── services/
├── hooks/
├── api/
└── utils/

Ein großer Teil dieses Codes kann gemeinsam verwendet werden für:

Web
Android
iOS

Bei Bedarf können jedoch plattformspezifische Funktionen implementiert werden.

11. Kann Capacitor zu einem bestehenden React-Projekt hinzugefügt werden?

Ja.

Das ist einer der größten Vorteile von Capacitor.

Sie können Capacitor zu einer bestehenden React-Anwendung hinzufügen, ohne die gesamte Anwendung neu zu schreiben.

Grundinstallation:

npm install @capacitor/core @capacitor/cli

Danach:

npx cap init

Für Android:

npm install @capacitor/android
npx cap add android

Für iOS:

npm install @capacitor/ios
npx cap add ios

Ihre bestehende React-Anwendung bleibt der Kern des Projekts.

12. Wie funktioniert der Build-Prozess?

Zuerst wird die React-Anwendung erstellt:

npm run build

Danach synchronisiert Capacitor die erzeugten Webdateien mit dem nativen Projekt.

React-Quellcode
      │
      ▼
npm run build
      │
      ▼
Web-Build
      │
      ▼
Capacitor
      │
      ├───────────────┐
      ▼               ▼
 Android            iOS

Das Android-Projekt kann anschließend in Android Studio geöffnet werden. Das iOS-Projekt kann in Xcode geöffnet werden.

13. Kann man APK oder AAB erstellen?

Ja.

Capacitor erstellt ein echtes Android-Projekt.

Mit Android Studio können Sie:

APK

oder für Google Play:

AAB

erstellen.

Die Anwendung kann anschließend bei Google Play veröffentlicht werden.

14. Was ist mit iOS?

Capacitor erstellt ein natives iOS-Projekt, das in Xcode geöffnet werden kann.

Der grundlegende Ablauf:

React
  ↓
Capacitor
  ↓
Xcode
  ↓
iOS-App
  ↓
App Store

Danach wird der normale Entwicklungs- und Veröffentlichungsprozess von Apple verwendet.

15. Sind Capacitor und Ionic dasselbe?

Nein.

Ionic ist hauptsächlich ein UI-Framework und eine Komponentenbibliothek.

Capacitor ist eine native Runtime.

Sie können:

React
   +
Ionic
   +
Capacitor

verwenden.

Sie können aber auch einfach:

React
   +
Capacitor

ohne Ionic verwenden.

16. Capacitor oder React Native?

Der wichtigste Unterschied besteht darin, wie die Benutzeroberfläche dargestellt wird.

Capacitor

React
  ↓
HTML
CSS
JavaScript
  ↓
WebView
  ↓
Native APIs

React Native

React
  ↓
React Native
  ↓
Native UI-Komponenten
  ↓
iOS / Android

Mit Capacitor können Sie einen großen Teil der bestehenden Weboberfläche beibehalten.

Bei React Native wird die Benutzeroberfläche mit React-Native-Komponenten aufgebaut.

Wenn Sie bereits eine große React-Webanwendung besitzen, kann Capacitor daher erheblich weniger Entwicklungsaufwand erfordern.

17. Was ist mit Google Login und OAuth?

Ein großer Teil der Authentifizierungsarchitektur kann gemeinsam genutzt werden, allerdings benötigen mobile Plattformen zusätzliche Konfiguration.

Zum Beispiel:

Web
 ↓
Google OAuth
 ↓
Backend

Auf Mobilgeräten können native OAuth-Flows, Deep Links, Universal Links oder App Links erforderlich sein.

Capacitor löst nicht automatisch alle OAuth-Konfigurationsprobleme.

Die zentrale Authentifizierungslogik und das Backend können jedoch weitgehend gemeinsam verwendet werden.

18. Kann man mit Capacitor nativen Code schreiben?

Ja.

Wenn kein vorhandenes Plugin die benötigte Funktion bereitstellt, können Sie ein eigenes Capacitor-Plugin entwickeln.

Android:

React
  ↓
Eigenes Capacitor-Plugin
  ↓
Kotlin / Java
  ↓
Native Android API

iOS:

React
  ↓
Eigenes Capacitor-Plugin
  ↓
Swift
  ↓
Native iOS API

Sie sind daher nicht auf die Funktionen vorhandener Plugins beschränkt.

19. Welche Nachteile gibt es?

Capacitor hat auch einige Einschränkungen.

Abhängigkeit von der WebView

Die Benutzeroberfläche läuft in einer WebView. Sehr spezielle native Oberflächen können sich daher weniger natürlich anfühlen als bei einer vollständig nativen Anwendung.

Möglicherweise benötigte Plugins

Für spezielle Gerätefunktionen benötigen Sie eventuell ein vorhandenes Plugin oder müssen selbst eines entwickeln.

Unterschiede zwischen Plattformen

Android und iOS unterscheiden sich unter anderem bei:

• Berechtigungen

• Benachrichtigungen

• Hintergrundaufgaben

• OAuth

• Dateisystem

• Bluetooth

Diese Unterschiede müssen weiterhin berücksichtigt werden.

Aufwendige Grafikanwendungen

Sehr anspruchsvolle 3D-Anwendungen, Spiele oder extrem grafikintensive Anwendungen können mit nativen Technologien oder spezialisierten Engines besser umgesetzt werden.

20. Für wen eignet sich Capacitor?

Capacitor eignet sich besonders für:

• React-Entwickler

• Vue-Entwickler

• Angular-Entwickler

• JavaScript-Entwickler

• Teams mit bestehenden Webanwendungen

• SaaS-Anwendungen

• Planner- und Produktivitätsanwendungen

• E-Commerce-Anwendungen

• API-basierte Anwendungen

• Offline-First-Anwendungen

Der größte Vorteil entsteht, wenn bereits eine funktionierende Webanwendung vorhanden ist.

21. Beispiel für eine reale Architektur

Nehmen wir eine Planner-Anwendung:

                    PLANNER
                       │
              ┌────────┴────────┐
              │                 │
             Web              Mobile
              │                 │
           React             React
              │                 │
              │             Capacitor
              │              /      \
              │             /        \
              ▼            ▼          ▼
           Browser      Android      iOS
              │
              └──────────┬──────────┘
                         │
                        API
                         │
                    Laravel
                         │
                    PostgreSQL

Für Offline-Daten:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

Die Synchronisierung kann folgendermaßen aufgebaut werden:

Lokale Datenbank
       ↓
Synchronisierungs-Engine
       ↓
API
       ↓
Server-Datenbank

Diese Architektur ist besonders sinnvoll, wenn Web und Mobile Bestandteile desselben Produkts sind.

22. Die einfachste Definition von Capacitor

In einem Satz:

Capacitor ist eine native Runtime, mit der Webanwendungen, die beispielsweise mit React, Vue oder Angular entwickelt wurden, auf Android und iOS ausgeführt werden können und über JavaScript Zugriff auf native Gerätefunktionen erhalten.

Noch einfacher:

Sie haben eine React-Anwendung
        ↓
Sie fügen Capacitor hinzu
        ↓
Android- und iOS-Projekte werden erstellt
        ↓
Ihre Webanwendung läuft auf dem Smartphone
        ↓
Plugins ermöglichen den Zugriff auf Gerätefunktionen
        ↓
Android- und iOS-Apps werden erstellt

Fazit

Die größte Stärke von Capacitor ist:

Webentwicklern den Einstieg in die native mobile Welt mit möglichst wenig Neuentwicklung zu ermöglichen.

Wenn Sie eine sehr stark native und grafikintensive Anwendung ausschließlich für iOS und Android entwickeln, können React Native oder eine vollständig native Entwicklung geeigneter sein.

Wenn Sie jedoch bereits eine leistungsfähige React-Webanwendung besitzen und zusätzlich:

• Web/PWA

• Android

• iOS

• Offline-Funktionalität

• Kamera und GPS

• Benachrichtigungen

• native Gerätefunktionen

• App-Store-Veröffentlichung

• Google-Play-Veröffentlichung

aus einer weitgehend gemeinsamen Codebasis anbieten möchten, ist Capacitor eine sehr interessante Lösung.

Der größte Vorteil für bestehende React-Anwendungen ist einfach: Sie müssen die mobile Anwendung nicht vollständig von Grund auf neu entwickeln.