Dans ce tutoriel, nous allons commencer par créer une nouvelle application web à l'aide de Quasar. Plus tard, nous apprendrons à la convertir 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.
Cette tutrice vous guidera tout au long du processus, en commençant par une nouvelle application Quasar et en incorporant ensuite Capacitor pour entrer dans le domaine 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 incorporer facilement le __CAPGO_KEEP_0__ dans tout projet web, et il enroulera votre application dans une vue web native, générant les projets Xcode et Android Studio natifs 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 fine 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 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 « 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 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 pouvoir repérer un dossier frais dist à la racine de votre projet.
Ce dossier sera utilisé par Capacitor plus tard, mais pour l'instant, nous devons le configurer correctement.
Intégrer 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 une seule sync commande.
Tout d'abord, nous pouvons installer le Capacitor CLI comme une dépendance de développement, et installez ensuite le tout 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'archive.
Nous devons ensuite 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 dossiers dans votre projet Quasar.
Ce sont des projets natifs 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 le webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, cela est inexact.
Pour rectifier cela, ouvrez le fichier 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 syncThe first command npm run generate va simplement construire votre projet Quasar et copier la mise en page statique, tandis que la deuxième commande npx cap sync va synchroniser toutes les web code dans les bons endroits des plateformes natives afin qu'elles puissent être affichées dans une application.
De plus, la commande de synchronisation peut mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez un nouveau Capacitor il est temps de relancer npx cap sync encore.
Sans vous en rendre compte, vous êtes maintenant effectivement terminé, alors 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 est installé. De plus, si vous prévoyez de 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 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ pour ouvrir facilement les projets natifs :
If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:
npx cap open ios
npx cap open androidandroid-studio-run
xcode-run
quasar-mobile-app
__CAPGO_KEEP_0__ Mise à jour en direct
Capgo Mise à jour en direct est un service qui permet aux développeurs de déployer des mises à jour à leurs applications mobiles sans passer par le processus traditionnel de soumission de l'App Store. Cela peut être une façon pratique de corriger rapidement des bogues ou de faire des mises à jour mineures à une application sans attendre le processus de revue de l'App Store.
Si vous n'avez pas encore configuré vos projets natifs, vous pouvez utiliser le Capgo __CAPGO_KEEP_1__ pour ouvrir facilement les projets natifs :
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 dans l'intégration et l'implémentation de Capgo Live Update, vous permettant de délivrer des mises à jour sans heurt.
S'inscrire et accéder au tableau de bord de 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 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 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 de votre fichier package.json.
Vérifiez Capgo si la construction est présente.
Vous pouvez même le tester avec mon application de sandbox mobile.
Faire le canal par défaut:
Après avoir envoyé votre application à Capgo, vous devez faire 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
Configurer l'application pour valider les mises à jour:
Ajoutez cette configuration à votre fichier JavaScript principal.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Ensuite faites un npm run build && npx cap copy pour mettre à jour votre application.
Recevoir une mise à jour en direct:
Pour que votre application reçoive une mise à jour en direct depuis Deploy, vous devrez lancer 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.
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 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.
Utiliser les plugins Capacitor
Prenez un regard sur la façon d'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/shareRien de spécial n'est à propos du plugin de partage, mais il montre 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 à 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>Après avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !
npx cap syncEnsuite, vous pouvez rendre l'application plus native sur iOS et Android avec la navigation et les transitions __CAPGO_KEEP_0__ et corriger les problèmes de mise en page iOS courants qui provoquent un débordement horizontal ou des zones de sécurité coupées.
UI native avec la navigation et les transitions Capgo Native
Native-feeling UI with Capgo Native Navigation and Transitions
J'ai travaillé pendant des années avec Ionic pour construire des applications multiplateformes, mais intégrer Ionic avec Quasar est fastidieux et rarement justifié lorsque vous avez déjà Tailwind CSS.
Pour un sentiment de mobile natif 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, Liquid Glass barre de tab sur iOS, et un style de barre de tab flou sur Android. Votre routeur Quasar conserve l'état des routes ; le plugin possède la barre de chrome native.
- @capgo/capacitor-transitions — transitions de page de style Ionic et iOS swipe-back sur l'arrière de l'écran 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 CSS inset afin 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 Liquid Glass (iOS utilise la mise en page système ; Android utilise un fond flou de 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}`);
});Ajoutez les 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-pageet cap-contentet appelez setDirection('forward') ou setDirection('back') avant de naviguer. N'ajoutez pas de titres ou de pieds de page web lorsqu'une navigation native contrôle ces surfaces.
Consultez les guides complets : Utilisation de @capgo/capacitor-navigation-native et Utilisation de @capgo/capacitor-transitions.
Aires sûres avec Tailwind
Pour les aires sûres des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous tailwind-capacitor sur npm). Il fournit safe-areas outils et autres plugins de Tailwind compatibles avec Capacitor :
npm add -D tailwind-capacitorEn 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ésoudre les problèmes de disposition 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 la balise de vueport seul ne résout généralement pas le problème. Travaillez à travers ces vérifications dans l'ordre.
Assurez-vous que la balise meta viewport soit appliquée correctement
Dans 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 iOS à partir d'un seul enveloppe racine
Créez un seul coquille d'application et appliquez la mise en page de l'espace sûr là — 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 de .app-shellLa mise en page de l'espace sûr dupliquée dans les en-têtes, les modaux et les enveloppes de disposition peut rendre l'interface utilisateur coupée ou trop grande.
Avec @capgo/tailwind-capacitor, vous pouvez exprimer la même mise en page avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.
Définissez Capacitor iOS contentInset To never Premièrement
En capacitor.config.ts, préférez l'insérer natif désactivé et laissez CSS (ou la navigation native) gérer la zone de sécurité : contentInsetMode: 'css'Mélanger les marges automatiques de __CAPGO_KEEP_0__ avec CSS
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Trouvez l'élément qui déborde vraiment
Le coupable habituel est un élément utilisant
, Tailwind 100vw, une largeur fixe en pixels, ou un w-screenEn Inspecteur Web Safari, exécutez : min-width.
Premièrement
[...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. Beaucoup d'issues de débordement horizontal proviennent de 100vw / w-screen, de la mise en forme de la zone de sécurité dupliquée, ou d'un conteneur de largeur fixe — et non de la balise meta de la vue portative 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 Capgo, il est encore plus facile d'ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs aient 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 Créer des applications mobiles avec des mises à jour en temps réel, Quasar et Capacitor. pour planifier le travail de plugin natif, le connecter avec Capgo Répertoire de plugin pour le flux de travail du produit dans Capgo Répertoire de plugin, Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou Mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou Mettre à jour les plugins, Alternatives de plugins Enterprise Ionic pour le flux de travail du produit dans Alternatives de plugins Enterprise Ionic, et Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs.
