In diesem Tutorial beginnen wir damit, eine neue Web-App mit Quasarzu erstellen. Später lernen wir, wie du sie mit Capacitor in eine mobile App verwandelst. Wenn du möchtest, dass deine App auf dem Smartphone besser aussieht.
Mit Capacitor kannst du deine Quasar-Web-App in eine mobile App verwandeln, ohne komplizierte Schritte oder eine völlig neue Art der App-Entwicklung lernen zu müssen, wie es etwa bei React Native der Fall wäre.
In diesem Tutorial lernst du Schritt für Schritt, wie du mit einer neuen Quasar-App startest und Capacitor integrierst, um den Sprung zu nativen mobilen Apps zu schaffen. Außerdem wirst du Capgo um live update in Sekundenschnelle an deine App zu senden.
Über Capacitor
CapacitorJS ist ein echter Game-Changer! Du kannst es mühelos in jedes Webprojekt einbinden, woraufhin deine App in eine native WebView verpackt wird und die passenden Xcode- und Android Studio-Projekte erstellt werden. Zudem bieten die Plugins über eine JS-Bridge Zugriff auf native Gerätefunktionen wie die Kamera.
Mit Capacitor erhältst du eine fantastische native mobile App, ganz ohne kompliziertes Setup oder steile Lernkurve. Die schlanke API und die optimierte Funktionalität machen die Integration in dein Projekt zum Kinderspiel. Glaub mir, du wirst staunen, wie einfach es ist, mit Capacitor eine voll funktionsfähige native App zu bauen!
Deine Quasar-App vorbereiten
Um eine neue Quasar-App zu erstellen, führe diesen Befehl aus:
npm init quasar
Wähle die Option „App with Quasar CLI“ und dann „Quasar v2“.
Um eine native mobile App zu erstellen, benötigen wir ein Export unseres Projekts. Also fügen wir ein einfaches Script in unsere package.json das zum Build und Kopieren des Quasar-Projekts genutzt werden kann:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nach Ausführen des Befehls generate, you should be able to spot a fresh dist Ordner in deinem Projekt-Root finden.
Dieser Ordner wird später von Capacitor verwendet, aber fürs Erste müssen wir ihn korrekt einrichten.
Capacitor zu deiner Quasar App hinzufügen
Um eine Web-App in einen nativen Mobile-Container zu verpacken, sind ein paar erste Schritte nötig, danach reicht ein einziger sync Befehl.
Zuerst können wir den Capacitor CLI als Dev-Dependency installieren und dann in unserem Projekt einrichten. Während des Setups kannst du „Enter“ drücken, um die Standardwerte für Name und Bundle ID zu übernehmen.
Als Nächstes müssen wir das Core-Package und die relevanten Packages für iOS und Android installieren.
Schließlich können wir die Plattformen hinzufügen, und Capacitor erstellt für jede Plattform einen Ordner im Wurzelverzeichnis unseres Projekts:
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your Quasar project
npx cap init
# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android
# Add the native platforms
npx cap add ios
npx cap add android
An diesem Punkt solltest du in der Lage sein, neue iOS und Android Ordner in deinem Quasar-Projekt.
Das sind echte native Projekte!
Um später auf das Android-Projekt zuzugreifen, musst du Android Studioinstallieren. Für iOS brauchst du einen Mac und solltest Xcode.
installieren. Außerdem solltest du einen capacitor.config.ts Datei in deinem Projekt, die einige grundlegende Capacitor-Einstellungen enthält, die während des Syncs verwendet werden. Das Einzige, worauf du achten musst, ist die webDir, das auf das Ergebnis deines Build-Befehls zeigen muss. Aktuell ist es nicht korrekt.
Um das zu korrigieren, öffne die capacitor.config.json -Datei und aktualisiere das webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Du kannst es ausprobieren, indem du die folgenden Befehle ausführst:
npm run generate
npx cap syncDer erste Befehl npm run generate erstellt einfach dein Quasar-Projekt und kopiert den statischen Build, während der zweite Befehl npx cap sync alle Web-code an die richtigen Stellen der nativen Plattformen synchronisiert, damit sie in einer App angezeigt werden können.
Zudem kann der sync-Befehl die nativen Plattformen aktualisieren und Plugins installieren, wenn du ein neues Capacitor Plugins Es ist Zeit zu starten npx cap sync erneut aus.
Ohne es zu merken, bist du nun fertig – schauen wir uns die App also mal auf einem Gerät an!
Native Apps bauen und deployen
Um iOS-Apps zu entwickeln, musst du Xcode installiert haben, und für Android-Apps benötigst du Android Studio installiert haben. Wenn du deine App außerdem im App Store veröffentlichen willst, musst du dich für das Apple Developer Program (iOS) und die Google Play Console (Android) anmelden.
Wenn du neu in der nativen Mobile-Entwicklung bist, kannst du das Capacitor CLI nutzen, um beide nativen Projekte ganz einfach zu öffnen:
npx cap open ios
npx cap open androidSobald deine nativen Projekte eingerichtet sind, ist das Deployment auf ein verbundenes Gerät kinderleicht. In Android Studio musst du nur warten, bis alles bereit ist, und kannst deine App ohne weitere Einstellungen auf ein verbundenes Gerät deployen. Hier ein Beispiel:
In Xcode musst du dein Signing-Account einrichten, um deine App auf einem echten Gerät statt nur im Simulator zu deployen. Falls du das noch nie gemacht hast, führt dich Xcode durch den Prozess (du musst dafür allerdings im Developer Program angemeldet sein). Danach kannst du einfach auf Play drücken, um die App auf deinem verbundenen Gerät zu starten, das du oben auswählen kannst. Hier ein Beispiel:
Glückwunsch! Du hast deine Quasar Web-App erfolgreich auf einem mobilen Gerät deployed. Hier ist ein Beispiel:
Aber Moment, es gibt während der Entwicklung auch einen noch schnelleren Weg…
Capgo Live Update
Capgo Live Update ist ein Service, mit dem Entwickler Updates für ihre mobilen Apps deployen können, ohne den klassischen App Store Submission-Prozess zu durchlaufen. Das ist ein praktischer Weg, um Bugs schnell zu fixen oder kleine Updates zu machen, ohne auf den App Store Review-Prozess zu warten.
Die Integration von Capgo in deine Quasar-App ist einfach und gibt dir die Power von Live-Updates in Echtzeit. Diese Schritt-für-Schritt-Anleitung führt dich durch Integration und Implementierung von Capgo Live Update, damit du nahtlose Updates ausliefern kannst.
Registrieren und Capgo Dashboard aufrufen:
Melde dich an und hol dir deinen API Key, um deine erste Version hochzuladen! Starte hier: dich für einen Capgo-Account zu registrieren.
Installiere das Capgo SDK:
Führe in der Kommandozeile direkt im Root-Verzeichnis deiner Capacitor App aus:
npm i @capgo/capacitor-updater && npx cap sync Um das Plugin in deine Capacitor App zu installieren.
Und füge dann code als Ersatz für CodePush zu deiner App hinzu:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dies teilt dem Native Plugin mit, dass die Installation erfolgreich war.
Login bei Capgo CLOUD:
Zuerst verwendest du all API-Key in deinem Account vorhanden, um dich mit CLI einzuloggen:
`npx @capgo/cli@latest login YOU_KEY`Erste App hinzufügen:
Los geht's: Erstelle zuerst eine App in der Capgo Cloud mit dem CLI.
npx @capgo/cli@latest app addDieser Befehl nutzt alle in der Capacitor Config-Datei definierten Variablen, um die App zu erstellen.
Erste Version hochladen:
Führe folgenden Befehl aus, um dein code zu builden und es an Capgo zu senden:
npx @capgo/cli@latest bundle upload`Standardmäßig entspricht der Versionsname dem in deiner package.json.
Check-in Capgo falls der Build vorhanden ist.
Du kannst es sogar mit meiner Mobile Sandbox-App.
Channel als Standard festlegen:
Nachdem du deine App an Capgo gesendet hast, musst du deinen Channel als Standard festlegen, damit Apps Updates von Capgo empfangen können.
npx @capgo/cli@latest channel set production -s default
App konfigurieren, um Updates zu validieren:
Füge diese Konfiguration in deine Haupt-JavaScript-Datei ein.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Führe dann einen npm run build && npx cap copy aus, um deine App zu aktualisieren.
Erhalte ein Live Update:
Damit deine App ein live update von Deploy erhält, musst du sie auf einem Gerät oder Emulator ausführen. Am einfachsten geht das mit dem folgenden Befehl, um deine lokale App in einem Emulator oder auf einem mit deinem Computer verbundenen Gerät zu starten.
npx cap run [ios | android]Öffne die App, schicke sie in den Hintergrund und öffne sie erneut; in den Logs solltest du sehen, dass die App das Update ausgeführt hat.
Glückwunsch! 🎉 Du hast dein erstes Live Update erfolgreich bereitgestellt. Das ist erst der Anfang von dem, was du mit Live Updates machen kannst. Um mehr zu erfahren, lies die vollständige Live Updates-Dokumentation.
Capacitor Plugins verwenden
Schauen wir uns an, wie ein Capacitor Plugin in der Praxis funktioniert, das wir bereits mehrfach erwähnt haben. Dazu können wir ein recht einfaches Plugin mit folgendem Befehl installieren:
npm i @capacitor/shareEs gibt nichts Besonderes am Share-Plugin, aber es öffnet trotzdem den nativen Share-Dialog! Dafür müssen wir jetzt nur noch das Package importieren und die entsprechende share() Funktion aus unserer App aufrufen, also ändern wir die pages/index.vue wie folgt:
<template>
<div>
<h1>Welcome to Quasar and Capacitor!</h1>
<button @click="share">Share now!</button>
</div>
</template>
<script setup lang="ts">
import { Share } from '@capacitor/share';
async function share() {
await Share.share({
title: 'Open Youtube',
text: 'Check new video on youtube',
url: 'https://www.youtube.com',
dialogTitle: 'Share with friends'
});
}
</script>Wie bereits erwähnt, müssen wir nach der Installation neuer Plugins einen Sync durchführen und die App anschließend neu auf das Gerät deployen. Nutze dazu diesen Befehl:
npx cap syncNach dem Klick auf den Button siehst du den nativen Share-Dialog in Aktion!
Als Nächstes kannst du die App auf iOS und Android mit Capgo Navigation und Transitions nativer wirken lassen und typische iOS-Layoutprobleme beheben, die horizontalen Overflow oder abgeschnittene Safe Areas verursachen.
Native-Feeling-UI mit Capgo Native Navigation und Transitions
Ich arbeite schon seit Jahren mit Ionic um plattformübergreifende Apps zu bauen, aber die Integration mit Quasar wirkt oft wie ein Hack und lohnt sich kaum, wenn man bereits Tailwind CSS.
Für ein natives Mobile-Feeling in einer Quasar + Capacitor App solltest du Capgo Plugins statt reiner Web-UI-Kits wie Konsta UI nutzen:
- @capgo/capacitor-native-navigation — native Navbar, Liquid Glass Tab Bar auf iOS und ein Blur-Effekt für die Tab Bar auf Android. Dein Quasar Router verwaltet den Route-State; das Plugin übernimmt das native Chrome.
- @capgo/capacitor-transitions — Page Transitions im Ionic-Stil und iOS Edge Swipe-Back in der WebView-Ebene, ohne das Ionic UI zu übernehmen.
Beides installieren:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncKonfiguriere die native Navigation mit dem CSS Inset Mode, damit Web-Content die nativen Bars berücksichtigt:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendere eine Liquid Glass Tab Bar (iOS nutzt systemeigenes Rendering; Android nutzt einen geblurrten WebView-Hintergrund):
await NativeNavigation.setTabbar({
selectedId: 'home',
labelVisibilityMode: 'labeled',
icons: true,
colors: { dynamic: true },
tabs: [
{ id: 'home', title: 'Home', icon: { svg: '...' } },
{ id: 'settings', title: 'Settings', icon: { svg: '...' } },
],
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
router.push(`/${id}`);
});Füge native Page Transitions in deine App Shell ein:
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';
initTransitions({ platform: 'auto' });
const router = useRouter();
const outletRef = ref(null);
onMounted(() => {
if (outletRef.value) {
setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
}
});
const openSettings = () => {
setDirection('forward');
router.push('/settings');
};
</script>
<template>
<cap-router-outlet ref="outletRef">
<router-view />
</cap-router-outlet>
</template>Umschließe geroutete Seiten mit cap-router-outlet, cap-page, und cap-content, und rufe setDirection('forward') oder setDirection('back') bevor du navigierst. Dupliziere keine Web-Header oder -Footer, wenn die native Navigation diese Bereiche bereits übernimmt.
Hier findest du die vollständigen Guides: Verwendung von @capgo/capacitor-native-navigation und Verwendung von @capgo/capacitor-transitions.
Safe Areas mit Tailwind
Für Device Safe Areas in Tailwind CSS verwende @capgo/tailwind-capacitor (veröffentlicht als tailwind-capacitor auf npm). Es bietet safe-areas Utilities und andere Capacitor-freundliche Tailwind-Plugins:
npm add -D tailwind-capacitorUnter src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Nutze Utilities wie pt-safe, pb-safe, und px-safe anstatt alles manuell env(safe-area-inset-*) manuell. Das Projekt wird aktiv weiterentwickelt – falls etwas für dein Quasar-Setup fehlt, eröffne einen PR auf GitHub.
iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontaler Overflow)
Wenn Inhalte auf iOS abgeschnitten, verschoben oder horizontal scrollbar wirken, hilft es meist nicht, mehr overflow-x: hidden hinzuzufügen oder nur das Viewport-Tag zu ändern. Gehe diese Checks der Reihe nach durch.
Stelle sicher, dass das Viewport-Meta-Tag korrekt angewendet wird
Unter index.html (oder dein Quasar HTML-Template), setze das Viewport-Meta-Tag in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOS Safe Area nur von einem Root-Wrapper aus handhaben
Erstelle eine einzige App-Shell und wende dort das Safe-Area-Padding an – nicht in mehreren verschachtelten Komponenten:
html,
body,
#q-app {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.app-shell {
min-height: 100dvh;
width: 100%;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}Umschließe den gesamten Seiteninhalt mit .app-shellDoppeltes Safe-Area-Padding in Headern, Modals und Layout-Wrappern lässt das UI oft abgeschnitten oder zu groß wirken.
Mit @capgo/tailwind-capacitor, kannst du dasselbe Padding mit Utilities wie pt-safe pb-safe px-safe in dieser einen Shell ausdrücken.
Setze Capacitor iOS contentInset zu never zuerst
Unter capacitor.config.ts, deaktiviere lieber native Insets und überlasse CSS (oder der Native Navigation contentInsetMode: 'css') die Safe Area:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Kombination von Capacitor’s automatischen Content Insets mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppelte Abstände.
Das tatsächlich überlaufende Element finden
Der übliche Übeltäter ist ein Element mit 100vw, Tailwind w-screen, einer festen Pixelbreite oder einem großen min-width.
Im Safari Web Inspector ausführen:
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
el,
tag: el.tagName,
class: el.className,
scrollWidth: el.scrollWidth,
clientWidth: document.documentElement.clientWidth,
}));Mit Tailwind ersetzen w-screen mit w-full wann immer möglich. Viele Probleme mit horizontalem Overflow entstehen durch 100vw / w-screen, doppeltes Safe-Area-Padding oder einen Container mit fester Breite – nicht durch das Viewport-Meta-Tag selbst.
Fazit
Capacitor ist eine hervorragende Option, um native Apps auf Basis eines bestehenden Webprojekts zu bauen, da es einen einfachen Weg bietet, code zu teilen und ein konsistentes UI zu pflegen.
Und mit der Ergänzung von Capgo, wird es noch einfacher, Live Updates in deine App einzubinden, damit deine Nutzer immer Zugriff auf die neuesten Features und Bugfixes haben.
Wenn du lernen möchtest, wie du Capgo in deine Next.js-App einbindest, schau dir den nächsten Artikel an:
Weiterlesen nach: Erstellen von Mobile Apps mit Live Updates, Quasar und Capacitor.
Wenn du es nutzt Mobile Apps erstellen mit Live Updates, Quasar und Capacitor. 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.
