Créons d'abord une nouvelle application web en utilisant QuasarPlus tard, nous apprendrons à le transformer en application mobile en utilisant Capacitor. Si vous souhaitez rendre votre application plus attractive sur mobile.
Avec Capacitor, vous pouvez transformer 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 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 entrer dans le domaine des applications mobiles natives. De plus, vous utiliserez Capgo pour envoyer une mise à jour live à 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 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 structure API et sa fonctionnalité épurée en font un plaisir à intégrer dans votre projet. Croyez-moi, 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 « 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 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.
Capacitor dans 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 en tant que dépendance de développement, et puis configurez-le 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'ensemble.
Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.
Dernièrement, 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 context Page/area: Site de marketing Capgo. Rôle: Étiquette de navigation ou élément UI court. Vu dans: page trust.astro. Clé de message `et` (Et).
android
dossiers contextPour 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 de Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est le webDircontexte : fragment de texte HTML d'une chaîne de texte Capgo plus longue (clé parente `solutions_cordova_to_capacitor_ai_step2_body`). Page/zone : page de marketing de solutions Capgo. Rôle : phrase de copie du site web. Vu dans : page solutions/cordova-to-capacitor-ai.astro. Clé de message `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).
, qui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte. capacitor.config.json __CAPGO_KEEP_0__.config.json fichier et mettez à jour le:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}webDir
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 syncraserera 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 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 Studio Android 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 console Google Play pour Android.
Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser les Capacitor et les 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 Studio Android, 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 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 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 dans l'intégration et l'implémentation 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 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:
À 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.
Connectez-vous à Capgo CLOUD:
Premièrement, utilisez le all clé API 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 l'intégration Capgo si la construction est présente.
Vous pouvez même le tester avec mon application de sandbox mobile.
Configure le canal par défaut:
Après avoir envoyé votre application à Capgo, vous devez configurer votre canal par défaut pour que les applications reçoivent des mises à jour à partir 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()Faites ensuite un npm run build && npx cap copy pour mettre à jour votre application.
Recevez une mise à jour en direct:
Pour que votre application reçoive une mise à jour en direct depuis Deploy, vous devez exécuter l'application sur un appareil ou un émulateur. La méthode la plus simple consiste à 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.
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 de 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 partage , mais il amène quand même le dialogue de partage natif ! Pour cela, nous n'avons besoin désormais que d'importer le package et d'appeler la fonction correspondante de notre application, alors changeons donc la share() page d'accueil (pages/index.vue) à ceci : 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 :
<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 courants d'iOS qui entraînent un débordement horizontal ou des zones de sécurité coupées.
UI native avec navigation et transitions Capgo natives
Native-feeling UI with Capgo Native Navigation and Transitions
Nous avons mentionné quelques fois avant. Ionic pour construire des applications cross-plateformes, 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 de la route ; le plugin gère 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',
},
});Rendre une barre de tab en verre liquide (iOS utilise la mise en page 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}`);
});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>Wrap 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 lorsqu'une navigation native contrôle ces surfaces.
Voir les guides complets : Utiliser @capgo/capacitor-navigation-native et Utiliser @capgo/capacitor-transitions.
Les zones de sécurité avec Tailwind
Pour les zones de sécurité des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous le titre de) tailwind-capacitor sur npm). Il fournit safe-areas des outils et d'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 outils 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, ouvre 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 de overflow-x: hidden ou ajuster la balise de vueport seule ne suffit généralement pas pour résoudre le problème. Travaillez à travers ces vérifications dans l'ordre.
Assurez-vous que la balise meta viewport est 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 d'iOS à partir d'un seul enveloppe racine
Créez une coquille d'application unique et appliquez la mise en forme 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 forme de l'espace sûr dupliquée dans les en-têtes, les modaux et les enveloppes de mise en page peut rendre l'interface utilisateur coupée ou trop grande.
Avec @capgo/tailwind-capacitor, vous 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.ts, préférez les inset natifs désactivés et laissez CSS (ou la navigation Native) gérer l'espace sûr : contentInsetMode: 'css'Mélanger les inset automatiques de contenu de __CAPGO_KEEP_0__ avec des 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 de pixels fixe, ou une large w-screenDans l'Inspecteur Web de Safari, exécutez : min-width.
In
[...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,
}));En utilisant Tailwind, remplacez w-screen par w-full lorsque possible. Beaucoup d'issues d'écoulement horizontal proviennent de 100vw / w-screenla duplication de la marge de zone de sécurité, ou d'un conteneur de largeur fixe — et non de la balise meta de la vue d'ensemble 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 Capgoce n'est même plus compliqué 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 correctifs de bogues.
Si vous souhaitez apprendre à ajouter Capgo à votre application Next.js, consultez l'article suivant :
Continuez à lire de Créer des 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, connectez-l’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.
