In der sich ständig weiterentwickelnden Welt der mobilen App-Entwicklung haben Progressive Web Applications (PWAs) den Weg für neue Cross-Platform-Runtimes geebnet. Diese Runtimes ermöglichen es webbasierten Apps, in App Stores präsent zu sein, ohne sich allein auf code zu verlassen. Eine Technologie, die dies ermöglicht, ist CapacitorJS, mit dem Entwickler eine einfache Website als App für Android, iOS und das Web bereitstellen können – und das mit einer einzigen JavaScript-Codebasis. Dieser Ansatz senkt die Entwicklungskosten erheblich und steigert die Coding-Effizienz.
Dieser Guide konzentriert sich auf die Erstellung einer App mit reinem JavaScript, ganz ohne zusätzliche Frameworks. Obwohl es 2021 schwierig war, Ressourcen für die App-Entwicklung mit reinem JavaScript zu finden, bieten wir dir hier ein umfassendes Tutorial zum Erstellen deiner App und zur Nutzung nativer Plugins mit CapacitorJS.
‣ Voraussetzungen
Bevor wir starten, stelle sicher, dass du folgende Tools installiert hast:
- Node.js (v14.16.1) oder höher
- NPM (v7.6.2) oder höher
- Android Studio für die Android-App-Entwicklung
- Xcode für die iOS-App-Entwicklung (nur macOS)
Hinweis: Die iOS-App-Entwicklung ist nur auf einem macOS-Gerät möglich.
‣ Dein Capacitor-Projekt einrichten
Um eine Capacitor Anwendung zu erstellen, navigiere zu deinem gewünschten Ordner und führe diesen Befehl im Terminal aus:
npm init @capacitor/appFolge den Prompts, um das Package zu installieren und dein Projekt aufzusetzen. Mit Capacitor v3 sollte dein Projektverzeichnis so aussehen:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdSobald das initiale Setup abgeschlossen ist, kannst du weitermachen.
‣ Projekt-Restrukturierung
Wir nutzen Vite, um unsere JavaScript-Dateien zu bundlen. Lass uns das Projekt entsprechend umstrukturieren:
- Erstellen ein neuer Ordner
srcim Hauptverzeichnis. - Erstellen eine neue Script-Datei
index.jsin einemsrc/. - Erstellen die Vite-Konfigurationsdatei
vite.config.jsim Hauptverzeichnis. - Entfernen Die
capacitor-welcome.jsDatei vonwww/js/.
Deine neue Ordnerstruktur sollte so aussehen:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Umstellung auf reines JavaScript
Ändern wir einige Dateien für die Nutzung von reinem JavaScript:
www/index.html
- Entferne die Script-Imports für Ionic PWA Elements falls du die App nicht als PWA veröffentlichst:
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
Lösche das
<capacitor-welcome>HTML-Element aus dem Body. -
Aktualisiere den Script-Import von
capacitor.jszujs/main.js. Das wird unsere gebündelte JavaScript-Datei sein. -
Entferne den
js/capacitor-welcome.jsimport. Deineindex.htmlist jetzt bereit.
vite.config.js
Zum Bündeln unserer Node.js-Module mit Vite, benötigen wir eine Konfigurationsdatei, die das Zielverzeichnis für unser gebündeltes Skript festlegt. Die folgende Konfiguration nimmt die Datei src/index.js und bündelt sie für die Produktion als www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});capacitor.config.json
Im capacitor.config.json Datei; suchen Sie dazu die "bundledWebRuntime": true -Eigenschaft und ändern Sie diese in false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir stattdessen Vite dafür nutzen können.
Mit diesen Änderungen ist das Basis-Setup deiner Capacitor App abgeschlossen und du kannst mit der Entwicklung deiner App in reinem JavaScript beginnen.
‣ App-Entwicklung
Nachdem das Fundament gelegt ist, kannst du damit beginnen, deine App-Logik in der src/index.js Datei. Hier kannst du alle benötigten Node.js-Module importieren, die Funktionalität deiner App definieren und mit den nativen Plugins von Capacitor interagieren.
Vergiss nicht, den Build-Befehl von Vite auszuführen, um deine JavaScript-Dateien bei Änderungen zu bündeln:
vite buildDieser Befehl generiert die main.js Datei in deinem www/js Verzeichnis, auf die deine index.html Datei verweist.
‣ Testen und Debugging
Capacitor bietet eine einfache Möglichkeit, deine App auf verschiedenen Plattformen zu testen. Nutze die folgenden Befehle, um deine App in der jeweiligen Entwicklungsumgebung der Plattform zu öffnen:
Für Android:
npx cap add android
npx cap open androidFür iOS (nur macOS):
npx cap add ios
npx cap open iosFür Web/PWA:
npx cap serveMit diesen Befehlen kannst du deine App in Android Studio, Xcode oder deinem Webbrowser ausführen, um sie nach Bedarf zu testen und zu debuggen.
‣ Conclusion
Cross-Plattform-Apps mit CapacitorJS und reinem JavaScript zu entwickeln, ist ein kosteneffizienter und effizienter Weg, um mit einer einzigen Codebase Apps für mehrere Plattformen zu erstellen. Mit diesem Guide hast du dein Projekt aufgesetzt, für Vite umstrukturiert und deine App startklar gemacht. Auf dieser Basis kannst du nun eine robuste und vielseitige Anwendung bauen.
Vergiss nicht, gründlich auf allen Plattformen zu testen, und nutze die nativen Plugins von Capacitor, um die Funktionalität deiner App zu erweitern. Happy coding!
Weiterlesen: Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide
Wenn du es nutzt Cross-Platform Apps mit CapacitorJS entwickeln: Ein Schritt-für-Schritt-Guide Um die Arbeit an nativen Plugins zu planen, verbinde sie mit Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für das Implementierungsdetail in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails unter „Plugins hinzufügen oder aktualisieren“, Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow in Ionic Enterprise Plugin-Alternativen und Capgo Native Builds optimieren für den Produkt-Workflow in Capgo Native Builds.
