Créons une nouvelle application web à l'aide de 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.
Avec Capacitor, vous pouvez changer votre application web Quasar en application mobile sans avoir besoin de faire beaucoup de choses difficiles ou d'apprendre une nouvelle façon de créer des applications comme vous le feriez avec quelque chose appelé React Native.
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 envoyer live update à votre application en quelques secondes.
À propos de Capacitor
CapacitorJS est vraiment un jeu de hasard ! Vous pouvez l'intégrer facilement à tout projet web, et il enveloppera votre application dans une vue web native, générant le projet Xcode et Android Studio natif pour vous. De plus, ses plugins fournissent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JS.
Avec Capacitor, vous obtenez une application mobile native fantastique sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa maigre API et sa fonctionnalité épurée en font un plaisir à intégrer dans votre projet. Faites-moi confiance, vous serez impressionné par la facilité avec laquelle vous pouvez obtenir une application native fonctionnelle avec Capacitor!
Préparation de votre application Quasar
Pour créer une nouvelle application Quasar, exécutez la commande suivante :
npm init quasar
Sélectionnez l'option « Application avec Quasar CLI » puis « Quasar v2 ».
Pour créer une application mobile native, nous avons besoin d'une exportation de notre projet. Par conséquent, ajoutons un script simple à notre package.json qui peut être utilisé pour construire et copier le projet Quasar :
{
"scripts": {
// ...
"build": "quasar build"
}
}Après avoir exécuté la commande generate, vous devriez pouvoir repérer une nouvelle dist dossier à la racine de votre projet.
Ce dossier sera utilisé par Capacitor plus tard, mais pour l'instant, nous devons le configurer correctement.
Ajouter Capacitor à votre application Quasar
Pour emballer n'importe quel application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales, mais ensuite, c'est aussi simple que d'exécuter une seule commande. sync command.
Nous pouvons d'abord installer le Capacitor CLI Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.
Enfin, nous pouvons ajouter les plateformes, et Capgo créera des dossiers pour chaque plateforme à la racine de notre projet:
Enfin, nous pouvons ajouter les plateformes, et Capacitor créera des dossiers pour chaque plateforme à la racine de notre projet.
# 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
À ce stade, vous devriez pouvoir observer de nouvelles ios et android dossiers dans votre projet Quasar.
Les dossiers de votre projet Quasar.
Pour accéder au projet Android ultérieurement, vous devez installer Android StudioPour iOS, vous avez besoin d'un Mac et devez installer Xcode.
De plus, vous devriez trouver un 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 webDirqui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte.
Pour rectifier cela, ouvrez le capacitor.config.json et mettez à jour le webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Vous pouvez essayer en exécutant les commandes suivantes :
npm run generate
npx cap syncLa première commande npm run generate construira simplement votre projet Quasar et copiera la construction statique, tandis que la deuxième commande npx cap sync syncra toutes les web code dans les bons endroits des plateformes natives afin qu'elles puissent être affichées dans une application.
Lorsque vous installez un nouveau plugin, il peut également mettre à jour les plateformes natives et installer des plugins. Capacitor plugins il est temps de relancer npx cap sync encore.
Sans vous en apercevoir, vous êtes maintenant effectivement terminé, voyons donc l'application sur un appareil !
Construire et déployer des applications natives
Pour développer des applications iOS, vous devez avoir Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez distribuer votre application sur l'app store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.
Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser le Capacitor CLI pour ouvrir facilement les projets natifs :
npx cap open ios
npx cap open androidUne fois que vous avez configuré vos projets natifs, déployer votre application sur un appareil connecté est facile. Dans Android Studio, il suffit d'attendre que tout soit prêt, et vous pouvez déployer votre application sur un appareil connecté sans modifier les paramètres. Voici un exemple :
In Xcode, vous devez configurer votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Si vous n'avez pas déjà effectué cela, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit dans le Programme de développeur). Une fois cela fait, vous pouvez simplement appuyer sur 'play' pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :
Félicitations ! Vous avez réussi à déployer votre application web Quasar sur un appareil mobile. Voici un exemple :
Attendez, il y a aussi un moyen plus rapide de procéder pendant le développement…
Capgo Live Update
Capgo Live Update est un service qui permet aux développeurs de déployer des mises à jour de leurs applications mobiles sans passer par le processus traditionnel de soumission de l'App Store. Cela peut être un moyen pratique pour corriger rapidement des bogues ou apporter de petites mises à jour à une application sans attendre le processus de revue de l'App Store.
Intégrer Capgo dans votre application Quasar est un processus simple qui vous permet de tirer parti de la puissance des mises à jour en temps réel. Ce guide étape par étape vous guidera à travers l'intégration et la mise en œuvre de Capgo Live Update, vous permettant de livrer des mises à jour sans heurt.
Inscrivez-vous et accédez au tableau de bord de Capgo:
Le moment est venu de vous inscrire et d'obtenir votre clé API pour télécharger votre première version ! Commencez par s'inscrire à un compte Capgo.
Installez le Capgo SDK:
Exécutez depuis une ligne de commande, directement dans la racine de votre application Capacitor :
npm i @capgo/capacitor-updater && npx cap sync Pour installer le plug-in dans votre application Capacitor.
Ajoutez ensuite à votre application ce code en remplacement de CodePush :
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Cela indiquera au plug-in natif que l'installation a réussi.
Connectez-vous à votre compte Capgo CLOUD:
Tout d'abord, utilisez l' all apikey présente dans votre compte pour vous connecter avec CLI :
`npx @capgo/cli@latest login YOU_KEY`Ajoutez votre première application:
Commencez par créer une application dans Capgo Cloud avec le CLI.
npx @capgo/cli@latest app addCette commande utilisera toutes les variables définies dans le fichier de configuration Capacitor pour créer l'application.
Téléchargez votre première version:
Exécutez la commande pour construire votre code et envoyez-l’à Capgo avec :
npx @capgo/cli@latest bundle upload`Par défaut, le nom de version sera celui de votre fichier package.json.
Vérifiez dans Capgo si la construction est présente.
si la construction est présente. application mobile de test.
application mobile sandbox:
Après avoir envoyé votre application à Capgo, vous devez définir votre canal par défaut pour que les applications reçoivent des mises à jour de Capgo.
npx @capgo/cli@latest channel set production -s default
Configure app to validate updates:
Configurez l'application pour valider les mises à jour
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Faites ensuite npm run build && npx cap copy Pour mettre à jour votre application.
Recevez un Live Update.:
Pour que votre application reçoive un live update de Deploy, vous devrez exécuter l'application sur un appareil ou un émulateur. La façon la plus simple de faire cela est de simplement utiliser la commande suivante pour lancer votre application locale dans un émulateur ou un appareil connecté à votre ordinateur.
npx cap run [ios | android]Ouvrez l'application, mettez-l’en arrière-plan et ouvrez-l’à nouveau, vous devriez voir dans les journaux que l'application a effectué la mise à jour.
Congrats! 🎉 You have successfully deployed your first Live Update. This is just the start of what you can do with Live Updates. To learn more, view the complete Mises à jour en direct.
Utilisation des plugins Capacitor
Regardons comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour faire cela, nous pouvons installer un plugin relativement simple en exécutant :
npm i @capacitor/shareCe n'est pas très compliqué. Le plugin de partageMais cela affiche quand même le dialogue de partage natif ! Pour cela, il suffit maintenant d'importer le package et d'appeler la fonction correspondante. share() fonction de notre application, donc changeons donc la pages/index.vue à cet endroit :
<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>Comme nous l'avons mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et puis redéployer l'application sur notre appareil. Pour effectuer cela, exécutez la commande suivante :
npx cap syncAprès avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !
Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec des Capgo de navigation et des transitions, et corriger les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.
UI natif avec des Capgo de navigation et de transitions natives
J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais l'intégration avec Quasar est hacky et rarement justifiée lorsque vous avez déjà Tailwind CSS.
Pour un sentiment mobile natif dans une application Quasar + Capacitor , utilisez les plugins Capgo au lieu des kits UI web uniquement comme Konsta UI :
- @capgo/capacitor-navigation native native --- une barre de navigation native, une barre de Liquid Glass sur iOS et un style de barre de navigation flou sur Android. Votre routeur Quasar conserve l'état des routes ; le plugin possède la barre native de navigation.
- @capgo/capacitor-transitions --- transitions de page Ionic et un retour arrière par balayage sur l'éditeur iOS, sans adopter l'interface UI Ionic.
Installez les deux :
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncConfigurez la navigation native avec le mode CSS inset pour que le contenu web respecte les barres natives :
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendez une barre de Liquid Glass (iOS utilise la mise en page système ; Android utilise un arrière-plan flou de la fenêtre WebView) :
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}`);
});Add native page transitions in your app shell:
<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>Enveloppez les pages routées dans cap-router-outlet, cap-pageet appelez cap-contentou setDirection('forward') or setDirection('back') Avant de naviguer. N'ajoutez pas de titres ou de pieds de page web si la navigation native les gère déjà.
Voir les guides complets : Utilisation de @capgo/capacitor-navigation native et Utilisation de @capgo/capacitor-transitions.
Aires sûres avec Tailwind
Pour les zones sûres du dispositif dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié comme tailwind-capacitor sur npm). Il fournit safe-areas outils et autres plugins Tailwind compatibles avec Capacitor :
npm add -D tailwind-capacitorDans src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utilisez des utilitaires comme pt-safe, pb-safe, et px-safe au lieu de les répandre env(safe-area-inset-*) à la main. Le projet est actuellement développé — si quelque chose manque pour votre configuration Quasar, ouvrir une PR sur GitHub.
Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité et Débordement horizontal)
Si le contenu semble coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster seul le tag Vueport ne suffit généralement pas. Travaille à travers ces vérifications dans l'ordre.
Assurez-vous que le tag meta Vueport est appliqué correctement
En index.html (ou votre modèle HTML Quasar), définissez le tag meta Vueport dans <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Gérez la zone de sécurité iOS à partir d'un seul enveloppe racine
Créez un noyau d'application unique et appliquez une marge de zone de sécurité là-bas — pas dans plusieurs composants imbriqués :
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);
}Wrappez tout le contenu de la page à l'intérieur .app-shellDupliquer la marge de sécurité dans les en-têtes, les modaux et les enveloppes de mise en page rend souvent l'interface utilisateur coupée ou trop grande.
Avec @capgo/tailwind-capacitorvous pouvez exprimer la même marge avec des utilitaires comme pt-safe pb-safe px-safe sur cette coquille unique.
Fixez Capacitor iOS contentInset à never first
premier capacitor.config.tsPréférez l'interface native désactivée et laissez CSS (ou la navigation native) contentInsetMode: 'css'Propriétaire de la zone de sécurité :
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mélangez les Capacitor automatiques d'indentation de contenu avec CSS env(safe-area-inset-*) l'espace de padding est une cause fréquente de double espace.
Trouvez l'élément qui déborde vraiment
Le coupable habituel est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou une large min-width.
Inspecteur Web Safari, exécutez :
[...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,
}));Avec Tailwind, remplacez w-screen par w-full lorsque possible. De nombreux problèmes de débordement horizontal proviennent de 100vw / w-screenPas de padding de zone de sécurité dupliquée, ni d'un conteneur à largeur fixe — pas de la balise meta viewport elle-même.
Conclusion
Capacitor est une excellente option pour créer des applications natives sur la base d'un projet web existant, offrant une façon simple de partager code et de maintenir une interface utilisateur cohérente.
Et avec l'ajout de Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.
Si vous souhaitez apprendre à ajouter Capgo à votre application Next.js, consultez l'article suivant :
Continuez avec la création d'applications mobiles avec mises à jour en temps réel, Quasar et Capacitor.
Si vous utilisez Créer des applications mobiles avec mises à jour en temps réel, Quasar et Capacitor. pour planifier le travail de plugin natif, connectez-l’à Capgo Répertoire des plugins pour le flux de travail du produit dans Capgo Répertoire des plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins Alternatives aux Plugins Ionic Enterprise pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.
