Share via

Prise en main du développement d’une application web PWA ou hybride pour Android

  • Article

Ce guide vous aidera à commencer à créer une application web hybride ou une application web progressive (PWA) sur Windows à l’aide d’un codebase HTML/CSS/JavaScript unique qui peut être utilisé sur le web et sur plusieurs plateformes d’appareils (Android, iOS, Windows).

En utilisant les infrastructures et les composants appropriés, les applications web peuvent fonctionner sur un appareil Android d’une manière qui ressemble beaucoup aux utilisateurs à une application native.

Fonctionnalités d’une application web hybride ou PWA

Il existe deux main types d’applications web qui peuvent être installés sur les appareils Android. La main différence est de savoir si votre code d’application est incorporé dans un package d’application (hybride) ou hébergé sur un serveur web (pwa).

  • Applications web hybrides : le code (HTML, JS, CSS) est empaqueté dans un FICHIER APK et peut être distribué via Google Play Store. Le moteur d’affichage est isolé du navigateur Internet des utilisateurs et ne partage pas de session ou de cache.

  • Progressive Web Apps (PWA) : le code (HTML, JS, CSS) se trouve sur le web et n’a pas besoin d’être empaqueté en tant qu’APK. Les ressources sont téléchargées et mises à jour en fonction des besoins à l’aide d’un Service Worker. Le navigateur Chrome affiche et affiche votre application, mais elle a l’air native et n’inclut pas la barre d’adresse normale du navigateur, etc. Vous pouvez partager le stockage, le cache et les sessions avec le navigateur. Cela ressemble essentiellement à l’installation d’un raccourci vers le navigateur Chrome dans un mode spécial. Les PWA peuvent également être répertoriés dans Google Play Store à l’aide de l’activité web approuvée.

Les PWA et les applications web hybrides sont très similaires à une application Android native en ce qu’elles :

  • Peut être installé via le App Store (Google Play Store et/ou Microsoft Store)
  • Avoir accès aux fonctionnalités natives de l’appareil comme l’appareil photo, le GPS, Bluetooth, les notifications et la liste des contacts
  • Travailler hors connexion (pas de connexion Internet)

Les PWA ont également quelques fonctionnalités uniques :

  • Peut être installé sur l’écran d’accueil Android directement à partir du web (sans App Store)
  • Peut également être installé via Google Play Store à l’aide d’une activité web approuvée
  • Peut être découvert via la recherche web ou partagé via un lien URL
  • S’appuyer sur un Service Worker pour éviter d’avoir à empaqueter du code natif

Vous n’avez pas besoin d’une infrastructure pour créer une application hybride ou PWA, mais il existe quelques frameworks populaires qui seront abordés dans ce guide, notamment PhoneGap (avec Cordova) et Ionic (avec Cordova ou Condensateur utilisant Angular ou React).

Apache Cordova

Apache Cordova est une infrastructure open source qui peut simplifier la communication entre votre code JavaScript vivant dans un WebView natif et la plateforme Android native à l’aide de plug-ins. Ces plug-ins exposent des points de terminaison JavaScript qui peuvent être appelés à partir de votre code et utilisés pour appeler des API d’appareil Android natives. Certains exemples de plug-ins Cordova incluent l’accès à des services d’appareil tels que l’status de batterie, l’accès aux fichiers, les vibrations/sonneries, etc. Ces fonctionnalités ne sont généralement pas disponibles pour les applications web ou les navigateurs.

Il existe deux distributions populaires de Cordova :

  • PhoneGap : le support a été interrompu par Adobe.

  • Ionic

Ionic

Ionic est une infrastructure qui ajuste l’interface utilisateur de votre application pour qu’elle corresponde au langage de conception de chaque plateforme (Android, iOS, Windows). Ionic vous permet d’utiliser Angular ou React.

Notes

Il existe une nouvelle version d’Ionic qui utilise une alternative à Cordova, appelée Condensor. Cette alternative utilise des conteneurs pour rendre votre application plus conviviale pour le web.

Bien démarrer avec Ionic en installant les outils requis

Pour commencer à créer une application web hybride ou PWA avec Ionic, vous devez d’abord installer les outils suivants :

Créer un projet avec Ionic Cordova et Angular

Installez Ionic et Cordova en entrant ce qui suit dans votre ligne de commande :

npm install -g @ionic/cli cordova

Créez une application Ionic Angular à l’aide du modèle d’application « Onglets » en entrant la commande :

ionic start photo-gallery tabs

Accédez au dossier de l’application :

cd photo-gallery

Exécutez l’application dans votre navigateur web :

ionic serve

Pour plus d’informations, consultez la documentation Ionic Cordova Angular. Consultez la section Faire de votre application Angular une PWA de la documentation Ionic pour savoir comment faire passer votre application d’une application hybride à une PWA.

Créer un projet avec Ionic Condensor et Angular

Installez Ionic et Cordova-Res en entrant les éléments suivants dans votre ligne de commande :

npm install -g @ionic/cli native-run cordova-res

Créez une application Ionic Angular à l’aide du modèle d’application « Onglets » et ajoutez Condensor en entrant la commande :

ionic start photo-gallery tabs --type=angular --capacitor

Accédez au dossier de l’application :

cd photo-gallery

Ajoutez des composants pour faire de l’application un PWA :

npm install @ionic/pwa-elements

Importez @ionic/pwa-elements en ajoutant les éléments suivants à votre src/main.ts fichier :

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Exécutez l’application dans votre navigateur web :

ionic serve

Pour plus d’informations, consultez la documentation Ionic Condensor Angular. Consultez la section Faire de votre application Angular une PWA de la documentation Ionic pour savoir comment faire passer votre application d’une application hybride à une PWA.

Créer un projet avec Ionic et React

Installez l’interface CLI Ionic en entrant ce qui suit dans votre ligne de commande :

npm install -g @ionic/cli

Créez un projet avec React en entrant la commande :

ionic start myApp blank --type=react

Accédez au dossier de l’application :

cd myApp

Exécutez l’application dans votre navigateur web :

ionic serve

Pour plus d’informations, consultez la documentation Ionic React. Visitez la section Faire de votre application React une PWA de la documentation Ionic pour savoir comment faire passer votre application d’un hybride à un PWA.

Tester votre application Ionic sur un appareil ou un émulateur

Pour tester votre application Ionic sur un appareil Android, branchez votre appareil (assurez-vous qu’il est d’abord activé pour le développement), puis dans votre ligne de commande, entrez :

ionic cordova run android

Pour tester votre application Ionic sur un émulateur d’appareil Android, vous devez :

  1. Installez les composants requis : JDK (Java Development Kit), Gradle et le Kit de développement logiciel (SDK) Android.

  2. Créer un appareil virtuel Android (AVD) : consultez le [Guide du développeur Android]](https://developer.android.com/studio/run/managing-avds.html).

  3. Entrez la commande permettant à Ionic de générer et de déployer votre application sur l’émulateur : ionic cordova emulate [<platform>] [options]. Dans ce cas, la commande doit être :

ionic cordova emulate android --list

Pour plus d’informations, consultez l’émulateur Cordova dans la documentation Ionic.

Ressources supplémentaires