In diesem Tutorial beginnen wir mit der Erstellung einer neuen Web-App mit Quasar. Später werden wir erfahren, wie man sie in eine mobile App umwandelt, indem man Capacitor verwendet. Wenn Sie möchten, dass Ihre App auf dem Mobilgerät besser aussieht.
Mit Capacitor können Sie Ihre Quasar-Web-App in eine mobile App umwandeln, ohne dass Sie viele harte Dinge tun oder eine völlig neue Art der App-Entwicklung wie bei etwas genanntem React Native lernen müssen.
This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo um live-Updates an Ihre App in Sekunden zu senden.
Über Capacitor
CapacitorJS ist wirklich ein Game-Changer! Sie können es leicht in jedes Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, wodurch Xcode- und Android Studio-Projekte generiert werden. Zudem bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.
Mit Capacitor erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder steile Lernkurve. Sein schlanker API und gestreamlinerte Funktionalität machen es ein Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!
Vorbereitung Ihrer Quasar-Anwendung
Um eine neue Quasar-Anwendung zu erstellen, führen Sie bitte folgenden Befehl aus:
npm init quasar
Wählen Sie die Option „App mit Quasar CLI“ und dann „Quasar v2“.
Um eine native mobile App zu erstellen, benötigen wir ein export von unserem Projekt. Daher sollten wir ein einfaches Skript in unserem package.json einsetzen, das verwendet werden kann, um das Quasar-Projekt zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nachdem Sie die Kommandozeile generateausgeführt haben, sollten Sie ein frisches dist Ordner an Ihrem Projektroot finden.
Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.
Adding Capacitor to Your Quasar App
Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Kommandos.
Zunächst können wir das Capacitor CLI As eine Entwicklungsabhängigkeit installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe von “Enter” die Standardwerte für Namen und Bundle-ID akzeptieren.
Als nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.
Schließlich können wir die Plattformen hinzufügen, und Capacitor wird für jede Plattform einen Ordner am Root unseres Projekts erstellen:
# 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
Zu diesem Zeitpunkt sollten Sie neue ios und android Felder in Ihrem Quasar-Projekt beobachten können.
Das sind echte native Projekte!
Um später auf das Android-Projekt zugreifen zu können, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.
Darüber hinaus sollten Sie ein capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist die
webDir capacitor.config.json Um dies zu korrigieren, öffnen Sie die __CAPGO_KEEP_0__.config.json:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Datei und aktualisieren Sie die
npm run generate
npx cap syncDie erste Kommandozeilenanweisung npm run generate wird einfach Ihr Quasar-Projekt bauen und die statische Ausgabe kopieren, während das zweite Kommando npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisiert, damit sie in einer App angezeigt werden können.
Zusätzlich kann das Synchronisierungs-Kommando die nativen Plattformen aktualisieren und Plugins installieren, daher sollten Sie, wenn Sie ein neues Capacitor-Plugin installieren wiederholen. npx cap sync Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir mal das App auf einem Gerät!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, müssen Sie
Xcode installiert haben, und um Android-Apps zu entwickeln, müssen Sie installiert haben Android Studio ist installiert. Darüber hinaus benötigen Sie, wenn Sie Ihre App im App Store verteilen möchten, eine Registrierung im Apple Developer Program für iOS und im Google Play Console für Android. Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ verwenden, um beide native Projekte leicht zu öffnen:
If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:
npx cap open ios
npx cap open androidandroid-studio-run
xcode-run
Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
__CAPGO_KEEP_0__ Live Update ist ein Dienst, der Entwicklern ermöglicht, Updates für ihre mobilen Apps ohne den traditionellen App Store-Submission-Prozess bereitzustellen. Dies kann eine praktische Möglichkeit sein, um schnell Fehler zu beheben oder kleine Updates an einer App vorzunehmen, ohne auf den App Store-Bewertungsprozess warten zu müssen.
Capgo Live Update
Capgo Live Update is a service that allows developers to deploy updates to their mobile apps without going through the traditional App Store submission process. This can be a convenient way to quickly fix bugs or make small updates to an app without waiting for the App Store review process.
Die Integration von Capgo in Ihre Quasar-Anwendung ist ein einfacher Prozess, der Ihnen ermöglicht, die Macht von Echtzeit-Updates zu nutzen. Diese Schritt-für-Schritt-Anleitung führt Sie durch die Integration und Implementierung von Capgo Live Update, um Ihnen eine reibungslose Aktualisierung zu ermöglichen.
Registrieren Sie sich und zugreifen Sie auf das Capgo-Dashboard:
Es ist Zeit, sich anzumelden und Ihre API-Schlüssel zu erhalten, um Ihre erste Version hochzuladen! Beginnen Sie damit, sich für ein Capgo-Konto anzumelden.
Installieren Sie das Capgo-SDK:
Von einer Befehlszeile direkt in das Verzeichnis Ihrer Capacitor-Anwendung, führen Sie:
npm i @capgo/capacitor-updater && npx cap sync Um die Erweiterung in Ihre Capacitor-Anwendung zu installieren.
Und fügen Sie dann Ihrem App-Code diese code als Ersatz für CodePush hinzu:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dies wird dem native-Plugin mitteilen, dass die Installation erfolgreich war.
Anmelden bei Capgo CLOUD:
Zuerst verwenden Sie den all apikey sind in Ihrem Konto vorhanden, um mit dem CLI: zu anmelden
`npx @capgo/cli@latest login YOU_KEY`Fügen Sie Ihre erste App hinzu:
Lassen Sie uns mit der Erstellung einer App in Capgo Cloud beginnen, die mit dem CLI erstellt wird
npx @capgo/cli@latest app addDiese Kommandozeilenanweisung verwendet alle in der Capacitor Konfigurationsdatei definierten Variablen, um die App zu erstellen
Hochladen der ersten Version:
Führen Sie die Kommandozeile aus, um Ihre code zu erstellen und an Capgo zu senden mit:
npx @capgo/cli@latest bundle upload`Der Standardname der Version wird der im package.json-File sein
Überprüfen Sie Capgo ob die Veröffentlichung vorhanden ist
Sie können es sogar mit meinem mobil-fähigen Sandbox-App testen.
Machen Sie den Kanal standardmäßig:
Nachdem Sie Ihr App bei Capgo gesendet haben, müssen Sie Ihren Kanal standardmäßig machen, damit Apps Updates von Capgo erhalten können.
npx @capgo/cli@latest channel set production -s default
Konfigurieren Sie die App, um Updates zu validieren:
Fügen Sie diese Konfiguration in Ihr Haupt-JavaScript-File ein.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dann machen Sie ein npm run build && npx cap copy um Ihr App zu aktualisieren.
Live-Update erhalten:
Damit Ihre Anwendung ein Live-Update von Deploy erhält, müssen Sie die App auf einem Gerät oder einem Emulator ausführen. Der einfachste Weg, dies zu tun, besteht darin, einfach die folgende Kommandozeilenanweisung auszuführen, um Ihre lokale App in einem Emulator oder einem mit Ihrem Computer verbundenen Gerät zu starten.
npx cap run [ios | android]Öffnen Sie die App, stellen Sie sie in den Hintergrund und öffnen Sie sie erneut, Sie sollten im Protokoll sehen, dass die App die Aktualisierung durchgeführt hat.
Glückwunsch! 🎉 Sie haben Ihre erste Live-Update erfolgreich deployt. Das ist nur der Anfang dessen, was Sie mit Live-Updates machen können. Um mehr zu erfahren, besuchen Sie die vollständigen Live-Updates-Dokumentation.
Verwenden Sie Capacitor-Plugins
Schauen wir uns an, wie man einen Capacitor-Plugin in Aktion verwendet, das wir vorher mehrfach erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir folgendes ausführen:
npm i @capacitor/shareEs ist nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf! Für dies benötigen wir nun nur noch die Importierung der Pakete und die Aufruf der entsprechenden share() Funktion in unserer App, also ändern wir das pages/index.vue
<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>zu diesem:
npx cap syncWenn wir neue Plugins installieren, müssen wir eine Synchronisierungsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte folgende Kommando aus:
Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.
Als nächstes können Sie die App auf iOS und Android mit Capgo-Navigation und Übergängen noch nativer anfühlen lassen und häufige iOS-Layoutprobleme lösen, die zu horizontaler Überflutung oder gekürzten sicheren Bereichen führen.
Natürliche UI mit __CAPGO_KEEP_0__-Native Navigation und Übergängen: Ich habe in den letzten Jahren mit Ionic um cross-plattform-Anwendungen zu erstellen, aber die Integration mit Quasar ist umständlich und selten lohnenswert, wenn Sie bereits Tailwind CSS.
Für einen nativen mobilen Look in einer Quasar + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstatt web-only-UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — nativere Navigationsleiste, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Der Quasar-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Seitenübergänge im Stil von Ionic und iOS-Rückwärts-Schub auf der WebView-Ebene, ohne Ionic-UI zu übernehmen.
Installieren Sie beide:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit Webinhalte die native Leisten respektieren:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendern Sie eine Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene 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ügen Sie native Seitenübergänge in Ihrem App-Shell hinzu:
<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>Wie Sie Seiten mit Routen umschließen cap-router-outlet, cap-page, und cap-content, und aufrufen setDirection('forward') oder setDirection('back') vor der Navigation. Duplizieren Sie Web-Header oder -Footer nicht, wenn native Navigation diese Oberflächen besitzt.
Sehen Sie sich die vollständigen Anleitungen an: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (veröffentlicht als tailwind-capacitor auf npm). Es bietet safe-areas Hilfsfunktionen und andere Capacitor-freundliche Tailwind-Plugins:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie Hilfsfunktionen wie pt-safe, pb-safe, und px-safe anstatt env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Quasar-Konfiguration fehlt, erstellen Sie einen PR auf GitHub.
iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschuss)
Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr overflow-x: hidden oder passen Sie den Viewport-Tag alleine an, um es normalerweise nicht zu beheben. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass die Meta-Tags für die Ansicht korrekt angewendet werden
In index.html (oder in Ihrem Quasar-HTML-Template), setzen Sie die Meta-Tags für die Ansicht in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandeln Sie die sichere Bereich von iOS aus einer einzigen Root-Wrapper heraus
Erstellen Sie ein einzelnes App-Shell und fügen Sie dort den sicheren Bereich ein — 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);
}Verwenden Sie alle Seiteninhalte innerhalb von .app-shellDoppelte sichere-Bereich-Paddings in Kopfzeilen, Modalen und Layout-Wrappern machen die Benutzeroberfläche oft gekürzt oder zu groß aus.
Mit @capgo/tailwind-capacitor, können Sie denselben Puffer mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.
Setzen Sie Capacitor iOS contentInset zuerst never erst
In capacitor.config.ts, bevorzugt native Eingabefelder, deaktiviert und lasse CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besetzen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mischen Sie Capacitor’s automatische Inhaltsabstände mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppelten Abstand.
Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine fixe Pixelbreite oder eine große min-width.
In Safari Web Inspector, führen Sie:
[...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,
}));With Tailwind, ersetzen Sie w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichsabstand oder einem festen Breitencontainer — nicht von der Viewport-Meta-Tags selbst.
Zusammenfassung
Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Webprojekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.
Und mit der Zugabe von Capgo, ist es sogar einfacher, live aktualisierte Inhalte in Ihre App zu integrieren, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihre Next.js-Anwendung integrieren können, nehmen Sie einen Blick auf das nächste Artikel :
Fortsetzen Sie von Creating Mobile Apps mit live aktualisierten Inhalten, Quasar und Capacitor.
Wenn Sie bereits Mit lebendigen Updates, Quasar und Capacitor. um native Plugin-Arbeit zu planen, mit ihm zu verbinden Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
