Erstellung von mobilen Apps mit Live-Updates, Quasar und Capacitor.

In diesem Tutorial werden wir mit der Erstellung einer neuen Web-App beginnen, die Quasar. Later on, we’ll learn how to turn it into a mobile app using Capacitor. If you want to make your app look better on mobile.

Mit Capacitor können Sie Ihre Quasar-Web-App in eine mobile App umwandeln, ohne dass Sie viel Arbeit oder eine neue Art der App-Entwicklung wie bei React Native lernen müssen.

Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Quasar-App und dann die Einbindung von Capacitor zur Umwandlung in native mobile Apps. Darüber hinaus werden Sie auch Capgo zum Senden von live update an Ihre App in Sekunden.

Über Capacitor

CapacitorJS ist wirklich ein Game-Changer! Sie können es problemlos in jede Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, sodass Xcode und Android Studio Projekte generiert werden. Zusätzlich 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 komplizierten Aufbau oder steile Lernkurve. Sein schlanker API und gestreamlinertes Funktionsdesign machen es ein Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erstellen!

Vorbereitung Ihrer Quasar-App

Um eine neue Quasar-App zu erstellen, führen Sie den 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 des Projekts. Daher fügen wir ein einfaches Skript in unserem package.json ein, das zum Bauen und Kopieren des Quasar-Projekts verwendet werden kann:

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

Nachdem Sie den Befehl generateausgeführt haben, sollten Sie eine frische dist Ordner an der Wurzel Ihres Projekts.

Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.

Hinzufügen von Capacitor zu Ihrer Quasar App

Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige Anfangsschritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen Befehls. sync command.

Erstens können wir das Capacitor CLI as a development dependency, and then set it up within our project. During the setup, you can press “enter” to accept the default values for name and bundle ID.

Installieren wir zunächst das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

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

Sie sollten jetzt in der Lage sein, Änderungen zu beobachten iOS und Android Ordner in Ihrem Quasar-Projekt.

Das sind echte native Projekte!

Um auf das Android-Projekt später zuzugreifen, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.

. Zudem sollten Sie ein capacitor.Konfigurationsdatei Datei in Ihrem Projekt finden, die einige grundlegende Capacitor-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist das webDir, das auf das Ergebnis Ihres Build-Befehls verweist. Derzeit ist es ungenau.

Um dies zu korrigieren, öffne das capacitor.config.json Datei und aktualisiere die 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 sync

Der erste Befehl npm run generate baut einfach dein Quasar-Projekt und kopiert die statische Build, während der zweite Befehl 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 du ein neues Capacitor-Plugin Es ist Zeit, loszulegen npx cap sync wieder.

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 müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Sobald Sie Ihre native Projekte eingerichtet haben, ist das Bereitstellen 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 Ihr Signierkonto einrichten, um Ihre App auf einem echten Gerät zu deployen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Entwicklerprogramm angemeldet haben). 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 Ihre Quasar-Web-App erfolgreich 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 das traditionelle App-Store-Submission-Verfahren bereitzustellen. Dies kann eine praktische Möglichkeit sein, um schnell Fehler zu beheben oder kleine Updates an einer App durchzuführen, ohne auf das App-Store-Bewertungsverfahren warten zu müssen.

Die Integration von Capgo in Ihre Quasar-App ist ein einfacher Prozess, der Ihnen ermöglicht, die Macht von Echtzeit-Updates zu nutzen. Diese Schritt-für-Schritt-Anleitung wird Sie durch die Integration und Implementierung von Capgo Live Update führen, um Ihnen ermöglichen, störungsfreie Updates bereitzustellen.

Registrieren und Zugriff auf das Capgo Dashboard erhalten:

Es ist Zeit, sich anzumelden und Ihre erste Version hochzuladen! Beginnen Sie damit, sich für ein API-Konto anzumelden Installieren Sie das Capgo-__CAPGO_KEEP_1__.

Installieren Sie die Capgo SDK:

Aus einer Befehlszeile direkt in das Verzeichnis Ihres Capacitor-Apps ausführen:

npm i @capgo/capacitor-updater && npx cap sync Um den Plugin in Ihr Capacitor-App zu installieren.

Und fügen Sie dann Ihrem App diesen code als Ersatz für CodePush ein:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Dies wird dem nativen Plugin mitteilen, dass die Installation erfolgreich war.

Anmelden bei Capgo CLOUD:

Zuerst verwenden Sie den all apikey der in Ihrem Konto vorliegt, um sich mit CLI anzumelden:

`npx @capgo/cli@latest login YOU_KEY`

Hinzufügen Ihrer ersten App:

Lassen Sie uns mit der Erstellung einer App in Capgo Cloud mit dem CLI beginnen.

    npx @capgo/cli@latest app add

Diese Befehlszeile verwendet alle Variablen, die in der Capacitor-Konfigurationsdatei definiert sind, um die App zu erstellen.

Hochladen Ihrer ersten Version:

Lauf den Befehl, um dein code zu bauen und es an Capgo zu senden mit:

npx @capgo/cli@latest bundle upload`

Standardmäßig wird der Versionsname aus Ihrem package.json-File genommen.

Überprüfe in Capgo kontrolliere, wenn das Build vorhanden ist.

Du kannst es sogar mit meinem mobil Sandbox-App.

Machen Kanal Standard:

Nachdem du dein App an Capgo gesendet hast, musst du deinen Kanal standardmäßig machen, um Apps Updates von Capgo zu erhalten.

npx @capgo/cli@latest channel set production -s default

Configure app to validate updates:

Hinzufügen Sie diese Konfiguration zu Ihrem Haupt-JavaScript-Datei.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Machen Sie dann npm run build && npx cap copy Ihre App zu aktualisieren.

Einen Live Update erhalten.:

Damit Ihre Anwendung einen 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, 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]

Öffne die App, lege sie in den Hintergrund und öffne sie erneut, du solltest im Protokoll sehen, dass die App aktualisiert wurde.

Glückwunsch! 🎉 Sie haben Ihre erste Live Update erfolgreich bereitgestellt. 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.

Mit Capacitor-Plugins

Lassen Sie uns nun sehen, wie man ein Capacitor-Plugin in Aktion verwendet, das wir vorher bereits erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir die folgende Kommandozeilenanweisung ausführen:

npm i @capacitor/share

Es 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 Pakete zu importieren und die entsprechende share() Funktion in unserer App aufzurufen, also ändern wir nun die pages/index.vue zu diesem Punkt:

<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>

Zuvor erwähnt wurde, dass bei der Installation neuer Plugins eine Synchronisierungsoperation durchgeführt und die App dann auf unserem Gerät neu bereitgestellt werden muss. Um dies durchzuführen, führen Sie bitte folgenden Befehl aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Dialog sehen!

Als Nächstes können Sie die App mit Capgo Navigation und Übergängen so anfühlen lassen, als wäre sie native auf iOS und Android, und die häufigen iOS-Anzeigeprobleme beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Native-fühlende UI mit Capgo Native Navigation und Übergängen

Jahre lang habe ich mit Ionic gearbeite, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit Quasar ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

Für ein nativ anführendes Mobile-Erlebnis in einer Quasar + Capacitor-App verwenden Sie stattdessen Capgo-Plugins anstelle von web-basierten UI-Kits wie Konsta UI.

• @capgo/capacitor-native-Navigation --- native Navbar, Liquid Glass Tabbar auf iOS und eine verschwommene Tabbar-Style auf Android. Ihr Quasar-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-Übergänge — Seitenübergänge im Ionic-Stil und iOS-Rückwärts-Schwenken am Rand in der WebView-Schicht, ohne Ionic-UI zu übernehmen.

Install beide:

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalte 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 Tabbar (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>

Wrap routed Pages in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie keine Web-Über- oder Fußzeilen, wenn native Navigation diese Oberflächen besitzt.

Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-Navigation und Verwenden Sie @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (publikiert als) tailwind-capacitor auf npm). Es bietet safe-areas Nutzfunktionen und andere Capacitor-freundliche Tailwind-Plugins:

npm add -D tailwind-capacitor

In src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Verwenden Sie Nutzungen wie pt-safe, pb-safeund px-safe anstatt, dass man sie env(safe-area-inset-*) manuell verteilt. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Quasar-Konfiguration fehlt, eröffnen Sie einen PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschuss)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder das Anpassen der Viewport-Tags allein hilft normalerweise nicht. Arbeiten Sie durch diese Kontrollen auf der Reihenfolge nach.

Stellen Sie sicher, dass die Viewport-Meta-Tags korrekt angewendet werden.

In index.html (in Ihrem Quasar-HTML-Template), setzen Sie das Viewport-Meta-Tags in <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Verwenden Sie den iOS-Safe-Area nur von einem Root-Wrapper aus.

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort sicherer Bereich-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);
}

Alle Inhalte auf der Seite einbetten .app-shellDie doppelte sichere Bereichsabstand in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitorkönnen Sie denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Hülle ausdrücken.

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzugt native Inset disabled und lassen Sie CSS (oder Native Navigation’s) contentInsetMode: 'css') den sicheren Bereich besitzen:

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-*) Abstand ist eine häufige Ursache für doppelte Zeilenabstände.

Finden Sie das überlaufende Element

Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine feste Pixelbreite oder eine große min-width.

In Safari Web Inspector, führen Sie aus:

[...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 Sie w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, duplizierten sicheren Bereichsabständen oder einem festsitzenden 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 Capgo, ist es sogar einfacher, Live-Updates in Ihre App hinzuzufügen, um sicherzustellen, dass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihrer Next.js-App hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel :

Fortsetzen Sie von Creating Mobile Apps mit Live-Updates, Quasar und Capacitor.

Wenn Sie Capgo verwenden Erstellen von mobilen Apps mit Live-Updates, Quasar und Capacitor. um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugins von __CAPGO_KEEP_1__ für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Alternativen zu Ionic Enterprise Plugins für das Produktworkflow in Alternativen zu Ionic Enterprise Plugins, und Capgo native Builds für das Produktworkflow in Capgo Native Builds.