Dans ce tutoriel, nous allons commencer par créer une nouvelle application web à l'aide de Quasar. Plus tard, nous apprendrons à la transformer en application mobile à l'aide de Capacitor. Si vous souhaitez rendre votre application plus attractive sur mobile.
Avec Capacitor, vous pouvez convertir 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.
Ce tutoriel vous guidera tout au long du processus, en commençant par une nouvelle application Quasar et en incorporant ensuite Capacitor pour passer dans le monde des applications mobiles natives. De plus, vous utiliserez Capgo envoyer live update à votre application en quelques secondes.
À propos de Capacitor
CapacitorJS est vraiment un changement de jeu ! Vous pouvez l'intégrer facilement dans tout projet web, et il enveloppera votre application dans une vue web native, générant ainsi 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 mise en place compliquée ou courbe d'apprentissage raide. Sa fine API et sa fonctionnalité épurée en font un plaisir à intégrer dans votre projet. Croyez-moi, vous serez émerveillé par la facilité avec laquelle vous pouvez obtenir une application mobile 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'un export de notre projet. Par conséquent, incluez un script simple dans notre package.json ce qui peut être utilisé pour créer et copier le projet Quasar :
{
"scripts": {
// ...
"build": "quasar build"
}
}Après avoir exécuté la commande generateVous 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
To package any web app into a native mobile container, we must follow a few initial steps, but afterward it’s as simple as executing a single sync command.
Tout d'abord, nous pouvons installer le 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.
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 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 nouveaux ios et android des dossiers dans votre projet Quasar.
Ce sont des projets natives réels !
Pour accéder au projet Android ultérieurement, vous devez installer Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.
De plus, vous devriez trouver un capacitor.config.ts un fichier dans votre projet, qui contient certaines configurations fondamentales Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est le webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte.
Pour rectifier cela, ouvrez le capacitor.config.json fichier 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 mise en page statique, tandis que la deuxième commande npx cap sync mettra en synchronisation 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, le commandant de synchronisation peut également mettre à jour les plateformes natives et installer des plugins. Capacitor plugins il est temps de lancer npx cap sync again.
Vous n'avez même pas réalisé que vous étiez fini, voyons donc l'application sur un appareil !
Construire et Déployer des applications natives
Construire et déployer des applications natives 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, vous n'avez qu'à 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 :
Dans 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à fait cela, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit au programme de développement). Une fois cela fait, vous pouvez simplement appuyer sur la touche de lecture 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 une façon plus rapide de faire cela 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 à 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.
Integrating Capgo into your Quasar app is a straightforward process that empowers you to harness the power of real-time live updates. This step-by-step guide will walk you through the integration and implementation of Capgo Live Update, enabling you to deliver seamless updates.
Inscrivez-vous et accédez au tableau de bord Capgo.:
Le moment est venu de s'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 directement dans la racine de votre Capacitor application à partir d'une ligne de commande :
npm i @capgo/capacitor-updater && npx cap sync Pour installer le plugin dans votre application Capacitor.
Et ajoutez ensuite à votre application ce code en remplacement de CodePush :
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Cela indiquera au plugin natif que l'installation a réussi.
Connectez-vous à Capgo CLOUD:
Premièrement, utilisez l' all apikey présent dans votre compte pour vous connecter avec le 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 utilise toutes les variables définies dans le fichier de configuration Capacitor pour créer l'application.
Envoyez votre première version:
Exécutez la commande pour construire votre code et l'envoyer à 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 mise à jour est présente.
Vous pouvez même le tester avec mon application de sandbox mobile.
Fixer le canal par défaut:
Après avoir envoyé votre application sur Capgo, vous devez rendre 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:
Ajoutez cette configuration à votre fichier JavaScript principal.
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 à partir de Deploy, vous devrez exécuter l'application sur un appareil ou un émulateur. La façon la plus simple de procéder est de lancer simplement l'application locale dans un émulateur ou un appareil connecté à votre ordinateur à l'aide de la commande suivante.
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.
Félicitations ! Vous avez réussi à déployer votre première Live Update. C'est juste le début de ce que vous pouvez faire avec les mises à jour en temps réel. Pour en savoir plus, consultez la documentation complète sur les Mises à jour en temps réel.
Utiliser les plugins Capacitor
Prenez un moment pour voir comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour ce faire, nous pouvons installer un plugin relativement simple en exécutant :
npm i @capacitor/shareRien de spécial ne se passe avec 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() page d'accueil (pages/index.vue) Comme 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 ce faire, exécutez la commande suivante : à cela :
<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>As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:
npx cap syncAprès avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !
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.
Interface utilisateur ressemblant à du natif avec Capgo Navigation et Transitions natifs
app mobile avec Capacitor et Quasar Ionic pour construire des applications plateformes croisées, mais intégrer Ionic avec Quasar est fastidieux et rarement justifié 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 — barre de navigation native, Liquid Glass barre de tab sur iOS, et un style de barre de tab flou sur Android. Votre routeur Quasar conserve l'état de la route ; le plugin possède la barre de chrome native.
- @capgo/capacitor-transitions — transitions de page Ionic et iOS swipe-back sur l'arrière de la couche WebView, sans adopter l’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 tab Liquide (iOS utilise la rendu système ; Android utilise un arrière-plan flou de la couche 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-page, et cap-content, et appelez setDirection('forward') ou 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 : Utiliser @capgo/capacitor-navigation native and Utiliser @capgo/capacitor-transitions.
Zones de sécurité avec Tailwind
Utiliser @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions @capgo/tailwind-capacitor (publié sous le titre) tailwind-capacitor sur npm). Il fournit safe-areas des outils et d'autres plugins Tailwind compatibles avec Capacitor:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utilisez des outils comme pt-safe, pb-safe, et px-safe au lieu de les ajouter env(safe-area-inset-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration Quasar, ouvre une PR sur GitHub.
Résolution des problèmes de disposition sur iOS (Vueport, zone de sécurité et débordement horizontal)
Si le contenu semble coupé, décalé ou défile horizontalement sur iOS, ajouter plus de overflow-x: hidden ou ajuster seul le tag de viewport ne résout généralement pas le problème. Travaillez ces vérifications dans l'ordre.
Assurez-vous que la balise meta viewport soit appliquée correctement
En index.html (ou votre modèle HTML Quasar), définissez la balise meta viewport dans <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Gérez l'espace sûr d'iOS à partir d'un seul enveloppe racine
Créez un noyau d'application unique et appliquez-y un padding de zone de sécurité — et non 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);
}Wrapper tout le contenu de la page à l'intérieur .app-shellLes marges de sécurité dupliquées dans les en-têtes, les modales et les enveloppes de mise en page rendent souvent l'interface utilisateur coupée ou trop grande.
Avec @capgo/tailwind-capacitorvous pouvez exprimer la même mise en forme avec des utilitaires comme pt-safe pb-safe px-safe sur cette coquille unique.
Définissez Capacitor iOS contentInset vers never premier
Dans 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élanger les marges automatiques de contenu de Capacitor avec CSS env(safe-area-inset-*) Le coupable habituel est un élément utilisant
Trouvez l'élément qui déborde réellement
, une largeur fixe en pixels, ou une large 100vw, Tailwind w-screenune largeur fixe de pixels, ou une grande min-width.
Exécutez dans l'Inspecteur Web de Safari :
[...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, 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 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 basées sur 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 CapgoIl est même plus facile d'ajouter des mises à jour en temps réel à votre application, garantissant ainsi que vos utilisateurs aient toujours accès aux dernières fonctionnalités et correctifs de bugs.
Si vous souhaitez apprendre à ajouter Capgo à votre application Next.js, consultez l'article suivant :
Continuez avec la création d'applications mobiles avec des 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, le connecter avec Capgo Répertoire de plugins pour le flux de travail du produit dans Capgo Répertoire de 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 de plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs.
