Wir beginnen mit der Erstellung einer neuen Web-App mithilfe QuasarSpäter werden wir erfahren, wie man es in eine mobile App umwandelt, indem man Capacitor verwendet. Wenn Sie möchten, dass Ihre App auf Mobilgeräten besser aussieht.
Mit Capacitor können Sie Ihre Quasar-Web-Anwendung in eine mobile App umwandeln, ohne viele schwierige Dinge tun oder eine völlig neue Art von App-Entwicklung wie bei 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 in Sekunden live aktualisieren.
About Capacitor
CapacitorJS ist wirklich ein Game-Changer! Sie können es problemlos in jedes Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, sodass Xcode und Android Studio Projekte generiert werden. Darüber hinaus bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.
With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!
Vorbereitung Ihrer Quasar-Anwendung
Um eine neue Quasar-Anwendung zu erstellen, führen Sie bitte folgende Kommando aus:
npm init quasar
Pick the “App with Quasar CLI” option then “Quasar v2”.
Um eine native mobile App zu erstellen, benötigen wir ein Export Unsere Projekt. Daher fügen wir eine einfache Skript in unserem package.json Dieses Skript kann verwendet werden, um das Quasar-Projekt zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nachdem Sie die Kommandozeile ausgeführt haben generatesollten Sie ein neues dist Ordner an der Wurzel Ihres Projekts finden.
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Quasar App
Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige Schritte ausführen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Zuerst können wir das
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI als Entwicklungsabhängigkeit und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe der Taste 'Enter' die Standardwerte für Name 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 context:Seite/ Bereich: Capgo-Marketingwebsite. Rolle: Kurze UI-Schaltfläche oder Navigationspunkt. Gesehen in: Seite trust.astro. Nachrichtsschlüssel `und` (Und). android
Ordner in Ihrem Quasar-Projekt beobachten können.
Das sind echte native Projekte! Um später auf das Android-Projekt zuzugreifen, müssen Sie Android Studio installieren.. Für iOS benötigen Sie einen Mac und sollten Xcode installieren. Xcode.
Zusätzlich sollten Sie ein capacitor.config.ts -Dokument in Ihrem Projekt finden, das einige grundlegende Capacitor-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der webDircontext
HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body). capacitor.config.json Um dies zu korrigieren, öffnen Sie das __CAPGO_KEEP_0__.config.json:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}-Dokument und aktualisieren Sie den ','webDir','-Punkt. Sie können es auch ausprobieren, indem Sie die folgenden Befehle ausführen:
npm run generate
npx cap syncDie erste Befehlszeile npm run generate wird einfach Ihren Quasar-Projekt bauen und die statische Ausgabe kopieren, während die zweite Befehlszeile 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 der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren, es Zeit ist, npx cap sync wieder auszuführen.
Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir das App auf einem Gerät!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus benötigen Sie, wenn Sie Ihre App im App Store verteilen möchten, eine Registrierung im Apple Developer Programm für iOS und im Google Play Console für Android.
Wenn Sie mit der nativen mobilen Entwicklung neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidEinmal Ihre native Projekte eingerichtet, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:
In Xcode müssen Sie Ihre Signierungskonto einrichten, um Ihre App auf einem echten Gerät bereitzustellen und nicht nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie eine Registrierung im Developer Programm). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:
Herzlichen Glückwunsch! Sie haben erfolgreich Ihre Quasar-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:
Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
Capgo Live Update
Capgo 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-Review-Prozess warten zu müssen.
Integrieren Sie 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 störungsfreie 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 Folgendes aus:
npm i @capgo/capacitor-updater && npx cap sync Um das Plugin in Ihre Capacitor-Anwendung zu installieren.
Und fügen Sie dann Ihrem App-Code diesen code als Ersatz für CodePush ein:
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 vorhanden in Ihrem Konto, um mit dem CLI einzuloggen:
`npx @capgo/cli@latest login YOU_KEY`Hinzufügen Ihres ersten Apps:
Beginnen wir mit der Erstellung einer App in Capgo Cloud mit dem CLI.
npx @capgo/cli@latest app addDiese Anweisung verwendet alle in der Capacitor Konfigurationsdatei definierten Variablen, um die App zu erstellen.
Hochladen der ersten Version:
Führen Sie die Anweisung aus, um Ihre code zu bauen und sie an Capgo zu senden mit:
npx @capgo/cli@latest bundle upload`Standardmäßig wird der Versionsname aus Ihrem package.json-File genommen.
Überprüfen Sie ein: Capgo Wenn die Veröffentlichung vorhanden ist.
Ihr könnt es sogar mit meinem mobilen Sandbox-App testen.
Machen Sie den Kanal standardmäßig:
Nachdem Sie Ihre App an 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 hinzu.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dann führen Sie ein npm run build && npx cap copy um Ihre App zu aktualisieren.
Empfangen Sie ein Live-Update:
Damit Ihre Anwendung ein Live-Update von Deploy empfangen kann, 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 implementiert. Dies ist nur der Anfang dessen, was Sie mit Live-Updates erreichen können. Um mehr zu erfahren, besuchen Sie die vollständigen Live-Updates-Dokumentation.
Verwenden Sie Capacitor-Plugins
Lasst uns einen Blick darauf werfen, wie man einen Capacitor-Plugin in Aktion verwendet, das wir bereits 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 Share-Plugin, aber es bringt trotzdem den native Share-Dialog auf! Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() function in unserer App aufrufen, 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>wie folgt:
npx cap syncWie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und die App dann auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte Folgendes 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 mit Capgo-Navigation und -Übergängen noch nativer auf iOS und Android anfühlen und gängige iOS-Layoutprobleme, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen, beheben.
Native anfühlfende UI mit __CAPGO_KEEP_0__-Native Navigation und -Übergängen: Ich habe bereits seit Jahren mit Ionic um cross-platform-Anwendungen zu erstellen, aber die Integration mit Quasar ist umständlich und selten wertvoll, wenn Sie bereits Tailwind CSS.
For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- @capgo/capacitor-native-navigation — native Navbar, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Stil auf Android. Der Quasar-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Ionic-Style-Seitenübergänge und iOS-Rückwärts-Schub auf der WebView-Schicht, 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 web-basierte Inhalte die native Balken respektieren:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendern Sie eine verschwommene Liquid Glass-Tastenleiste (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 geroutete Seiten umschließen cap-router-outlet, cap-page, und cap-content, und aufrufen setDirection('forward') oder setDirection('back') vor dem Navigieren. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.
Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als veröffentlicht) tailwind-capacitor auf npm). Es bietet safe-areas Utilitäten 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 Utilitäten wie pt-safe, pb-safe, und px-safe anstatt sie manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Quasar-Konfiguration fehlt, env(safe-area-inset-*) eine PR auf __CAPGO_KEEP_0__ öffnen open a PR on GitHub.
Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr
oder passen Sie den Viewport-Tag an, um es normalerweise nicht zu beheben. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr
Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird
In index.html (oder Ihrem Quasar-HTML-Template), setzen Sie die Viewport-Metatag in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandeln Sie das iOS-Sicherheitsbereich von einem einzigen Root-Wrapper aus
Erstellen Sie ein einzelnes App-Shell und fügen Sie dort Sicherheitsbereich-Padding hinzu — 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);
}Umgeben Sie alle Seiteninhalte innerhalb von .app-shell. Doppelte Sicherheitsbereich-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitorkönnen Sie denselben Padding mit Hilfsmitteln wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.
Setzen Sie Capacitor iOS contentInset zu never erstes
In capacitor.config.ts, bevor Sie native Einstellungen deaktivieren und CSS (oder Native Navigation’s) contentInsetMode: 'css') die sichere Bereiche übernehmen lassen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Die Mischung aus Capacitor’s automatischer Inhaltseinstellung und CSS-Paddings ist eine häufige Ursache für doppelte Abstände. env(safe-area-inset-*) Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das
, Tailwind 100vw, eine feste Pixelbreite oder eine große w-screenIn Safari Web Inspector, führen Sie: min-width.
In Safari Web Inspector, run:
[...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 festerbreiten Container — 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 Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.
Und mit der Hinzufügung von Capgoist 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 möchten, wie Sie Capgo in Ihrer Next.js-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel :
Fortsetzen Sie von Creating Mobile Apps mit live Aktualisierungen, Quasar und Capacitor.
Wenn Sie __CAPGO_KEEP_0__ verwenden Mit Capacitor live aktualisierte Mobile Apps erstellen, Quasar und Capacitor. um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktionsablauf in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins Ionic Enterprise Plugin Alternativen zur Produktionsablauf in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds zur Produktionsablauf in Capgo Native Builds.
