Front-end, Mobile, Outils

Au premier coup d’œil, on pourrait croire à une réponse d’Ionic à React Native, mais cette fois-ci, le framework dédié aux applications mobiles a préféré se tourner vers les PWA. Découvrez cette semaine Capacitor : le nouvel outil open source d’Ionic qui vous propose de créer des NPWA (des PWA en natif).

Qu’est-ce que Capacitor ?

Ionic définit son nouvel outil comme un successeur logique d’Apache Cordova et d’Adobe PhoneGap. Cependant, étant donné qu’il se tourne vers le développement en natif, il est également inspiré de plusieurs frameworks tels que React Native ou encore TurboLinks.

Ce qui différencie Capacitor de ses concurrents, c’est qu’il possède une partie axée sur les applications web. Il est donc possible d’utiliser Capacitor pour développer aussi sur IOS (avec Xcode9) et Android (avec Java 8 JDK).

Installation de Capacitor

Installation simple

Le moyen le plus simple d’installer l’outil est de passer par le gestionnaire de paquets NPM. Vous avez à ce niveau-là deux possibilités :

– Soit vous avez une application existante, dans ce cas tapez la requête suivante dans votre terminal :

cd my-app
npm install –save @capacitor/core @capacitor/cli

– Soit vous créez un nouveau projet, dans ce cas, il faudra taper :

npx @capacitor/cli create

Installation avec Ionic

Pour cette partie relativement simple, il vous suffira de deux étapes :

– Démarrer le projet Ionic :

ionic start myApp tabs
cd myApp

– Installer Capacitor sur votre projet Ionic

npm install –save @capacitor/cli @capacitor/core

Quelles fonctionnalités propose Capacitor ?

Même si Ionic a voulu entièrement moderniser son nouvel outil, il sera quand même possible de bénéficier des plugins Cordova. Ils sont utilisables aussi bien sur IOS, sur Android ou sur les PWA.

Capacitor sera également fourni avec un IDE natif, compatible avec Xcode et Android Studio.

Mais ce qui fait la force de cet outil, ce sont les 20 API qu’il propose, en voici quelques-unes :

– Camera : permet à l’utilisateur de choisir une photo dans son album ou de prendre une photo avec sa caméra native.

– Filesystem : fournit une API de type NodeJS afin de travailler avec des fichiers sur l’appareil

– Haptics : fournit une rétroaction à l’utilisateur par le biais de vibrations par exemple.

– Toast : malgré son nom insolite, cette api permet d’envoyer une notification à l’utilisateur.

 

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

vignette de l'article portant sur la balise des pages AMP

du javascript personnalisé dans les pages AMP ?

Lors de la conférence AMP 2019 qui s’est déroulée le 17 avril dernier à Tokyo, Google a dévoilé plusieurs nouveautés au sujet de son format de page mobile AMP (Accelerated Mobile Page), dont trois majeures. La première concerne la technologie signed HTTP exchange qui permet d’afficher l’url canonique d’une page sur une page AMP. La deuxième quant à elle concerne la mise en place d’un carrousel dédié aux AMP stories dans la page de résultat du moteur de recherche. Et la troisième, qui constitue le sujet de cet article concerne la révélation d’une balise permettant d’insérer du javascript personnalisé (custom javascript) dans une page AMP.
Avant de parler du custom javascript dans AMP, nous aborderons également les nouvelles fonctionnalités en terme d’UI apportées à AMP.

vignette de prévisualisation de l'article portant sur les Accelerate Mobile Pages

AMP : un format de page Googlien optimisé pour le mobile.

AMP ou Accelerate Mobile Pages, est un format de page spécifique proposé par le moteur de recherche Google et disponible depuis février 2016. Ce type de page a pour but d’optimiser l’expérience utilisateur sur mobile en réduisant drastiquement le temps de chargement des pages web. Comment fonctionne une page AMP ? À qui s’adresse ce format de page ? Pourquoi rendre compatible son site vers AMP ?
Réponses dans cet article !

PS : Le 17 avril 2019, AMP a dévoilé trois nouveautés majeures lors de sa conférence éponyme :

 

Centre de préférences de confidentialité

    Cookies Fonctionnels

    gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

    Advertising

    Cookies Satistiques

    _ga, _gat, _gid

    Cookies externes

    PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
    CONSENT, 1P_JAR