Dans ce tutoriel, nous allons commencer par créer une nouvelle application web en utilisant Quasar. Plus tard, nous apprendrons à la transformer en une application mobile en utilisant Capacitor. Si vous souhaitez rendre votre application plus attractive sur 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.
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 pour envoyer des mises à jour en direct à 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 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 structure API et sa fonctionnalité épurée rendent l'intégration dans votre projet un jeu d'enfant. Faites-moi confiance, vous serez impressionné par la facilité avec laquelle vous pouvez obtenir une application native fonctionnelle complète 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 « App avec Quasar CLI » puis « Quasar v2 ».
Pour créer une application mobile native, nous avons besoin d'une export de notre projet. Par conséquent, incluez un script simple dans votre 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 voir un dossier frais à la racine de votre projet. dist Ce dossier sera utilisé par __CAPGO_KEEP_0__ plus tard, mais pour l'instant, nous devons le configurer correctement.
Ajoutez Capacitor à votre application Quasar
Ajouter Capacitor à votre application Quasar
Pour emballer toute application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales, mais ensuite, c'est aussi simple que d'exécuter un seul sync commande.
Tout d'abord, nous pouvons installer le Capacitor CLI comme dépendance de développement, et puis le configurer dans notre projet. Lors de la configuration, vous pouvez appuyer sur “entrer” pour accepter les valeurs par défaut pour le nom et l'ID de l'application.
Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.
Finalement, 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 dossiers de 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 fichier capacitor.config.ts qui contient certaines configurations fondamentales Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est la 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 répertoire web:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Vous pouvez essayer de le faire 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 tous les web code dans les bons endroits des plateformes natives afin qu'ils puissent être affichés dans une application.
De plus, la commande sync pourrait mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez un nouveau Capacitor plugins il est temps de relancer npx cap sync sans vous en rendre compte, vous êtes maintenant effectivement terminé, alors voyons donc l'application sur un appareil !
protectedTokens
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 le magasin d'applications, 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 fait cela avant, 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 :
Mais attendez, il existe une méthode plus rapide pour effectuer cela pendant le développement…
Capgo Mise à jour en temps réel
Capgo Mise à jour en temps réel est un service qui permet aux développeurs de déployer des mises à jour dans 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. Cette étape par étape vous guidera à travers l'intégration et la mise en œuvre de Capgo Mise à jour en temps réel, vous permettant de délivrer des mises à jour sans heurt.
Inscrivez-vous et accédez au tableau de bord Capgo:
Il est temps de s'inscrire et d'obtenir votre clé API pour télécharger votre première version ! Commencez par s'inscrire à un compte Capgo.
Installer le Capgo SDK:
À partir d'une ligne de commande, directement dans le répertoire racine de votre application Capacitor, exécutez :
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.
Se connecter à Capgo CLOUD:
Tout d'abord, utilisez le all clé d'API présente 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 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 l'envoyer à Capgo avec :
npx @capgo/cli@latest bundle upload`Par défaut, le nom de la version sera celui dans votre fichier package.json.
Vérifiez Capgo si la construction est présente.
Vous pouvez même le tester avec mon application sandbox mobile Définir le canal par défaut.
Après avoir envoyé votre application à __CAPGO_KEEP_0__, vous devez définir votre canal par défaut pour permettre aux applications de recevoir des mises à jour de __CAPGO_KEEP_1__.:
After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from Capgo.
npx @capgo/cli@latest channel set production -s default
Ajoutez cette configuration à votre fichier JavaScript principal.:
Ensuite, faites un
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()pour mettre à jour votre application. npm run build && npx cap copy Recevoir une mise à jour en direct
Pour que votre application reçoive une mise à jour en direct de Deploy, vous devrez exécuter l'application sur un appareil ou un émulateur. La façon la plus simple de faire cela est simplement d'utiliser la commande suivante pour lancer votre application locale dans un émulateur ou un appareil connecté à votre ordinateur.:
Receive a Live Update
npx cap run [ios | android]Ouvrez l'application, mettez-la en arrière-plan et ouvrez-la à 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 mise à jour en direct. C'est juste le début de tout ce que vous pouvez faire avec les mises à jour en direct. Pour en savoir plus, consultez la documentation complète sur les mises à jour en direct. Documentation sur les mises à jour en direct.
Utilisation des plugins Capacitor
Regardons comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour cela, nous pouvons installer un plugin relativement simple en exécutant :
npm i @capacitor/shareIl n'y a rien de particulier dans le Plugin de partage, mais il apporte quand même le dialogue de partage natif ! Pour cela, nous n'avons maintenant besoin que d'importer le package et d'appeler la fonction correspondante de notre application, alors changeons donc le share() pages/index.vue en cela : Comme mentionné plus tôt, 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 cela, exécutez la commande suivante :
<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 assister à l'animation de la boîte de dialogue de partage native en action !
Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec Capgo de navigation et de 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 native avec Capgo de navigation et de transitions natives
J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais intégrer Ionic avec Quasar est hacky et rarement valable lorsque vous avez déjà Tailwind CSS.
Pour un sentiment de mobilité native dans une application Quasar + Capacitor , utilisez les Capgo plugins au lieu des kits UI web uniquement comme Konsta UI :
- @capgo/capacitor-native-navigation — barre de navigation native, barre de Liquid Glass 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 balayage de swipe-back sur iOS dans la couche WebView, sans adopter la UI Ionic.
Installez les deux :
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncConfigurez la navigation native avec le mode d'insertion CSS 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',
},
});Affichez une barre de tabs en verre liquide (iOS utilise la mise en page système ; Android utilise un fond d'arrière-plan WebView flou) :
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}`);
});Ajoutez des transitions de page natives dans votre coquille d'application :
<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 en double lorsque la navigation native possède ces surfaces.
Consultez les guides complets : En utilisant @capgo/capacitor-navigation-native et En utilisant @capgo/capacitor-transitions.
Aires de sécurité avec Tailwind
Pour les zones de sécurité des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous tailwind-capacitor le npm). Il fournit safe-areas des utilitaires et d'autres plugins de 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-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration Quasar, ouvrir une PR sur GitHub.
Résolution des problèmes de mise en page iOS (Vueport, Zone de sécurité et débordement horizontal)
Si le contenu semble être coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster la balise de vueport seule ne résout généralement pas le problème. Effectuez ces vérifications dans l'ordre.
Vérifiez que la balise meta de vueport est appliquée correctement
Dans index.html (ou votre modèle HTML Quasar), définissez la balise meta de vueport dans <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Gérer la zone de sécurité iOS à partir d'un seul wrapper racine
Créez un seul conteneur d'application et appliquez la mise en forme de la zone de sécurité là-bas — 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);
}Enveloppez tout le contenu de la page à l'intérieur .app-shellLa mise en forme de la zone de sécurité dupliquée dans les en-têtes, les modales et les conteneurs de mise en page fait souvent que l'interface utilisateur semble coupée ou trop grande.
Avec @capgo/tailwind-capacitor, vous pouvez exprimer le même padding avec des utilitaires comme pt-safe pb-safe px-safe dans cette seule fenêtre de commande.
Définir Capacitor iOS contentInset sur never premier
Dans capacitor.config.ts, préférez l'insérer natif désactivé et laissez CSS (ou la navigation Native’s) contentInsetMode: 'css') posséder la zone de sécurité :
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mélanger Capacitor’s automatique contenu insérer avec CSS env(safe-area-inset-*) le padding est une cause courante de double espacement.
Trouvez l'élément débordant réel
Le coupable habituel est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou un grand min-width.
Dans l'inspecteur Web de 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-screen, de la duplication de la marge de sécurité, ou d'un conteneur à largeur fixe — et non de la balise meta de la vue d'ensemble elle-même.
Conclusion
Capacitor est une excellente option pour construire 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 CapgoIt est même plus facile d'ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs ont toujours accès aux dernières fonctionnalités et corrections de bogues.
Si vous souhaitez apprendre à ajouter Capgo à votre application Next.js, consultez l'article suivant :
Continuez à partir de la création d'applications mobiles avec des mises à jour en temps réel, Quasar et Capacitor.
Si vous utilisez La création d'applications mobiles avec des mises à jour en temps réel, Quasar et Capacitor. pour planifier le travail de plugin natif, connectez-le avec Répertoire de plugins Capgo pour le flux de travail du produit dans Répertoire de plugins Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo Ajout ou mise à jour de plugins pour les détails d'implémentation dans Ajout ou mise à jour de plugins, Alternatives aux plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives aux plugins d'entreprise Ionic, et Capgo Éditeur natif pour le flux de travail du produit dans Capgo Éditeur natif.
