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

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

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

Fonctionnalités d’une application web PWA ou hybride

Il existe deux types principaux d’applications web qui peuvent être installés sur des appareils Android. La principale différence est que votre code d’application soit 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 APK et peut être distribué via le Google Play Store. Le moteur d’affichage est isolé du navigateur Internet des utilisateurs, sans session ni partage de cache.

• Applications web progressives (PWA) : le code (HTML, JS, CSS) vit 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 selon les besoins à l’aide d’un Service Worker. Le navigateur Chrome affiche et affiche votre application, mais il semble natif 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. Il s’agit essentiellement de l’installation d’un raccourci vers le navigateur Chrome en mode spécial. Les PVP peuvent également être répertoriées dans google Play Store à l’aide d’une activité web approuvée.

Les pwas et les applications web hybrides sont très similaires à une application Android native dans laquelle elles sont :

• Peut être installé via l’App Store (Google Play Store et/ou Microsoft Store)
• Avoir accès aux fonctionnalités natives de l’appareil comme l’appareil photo, GPS, Bluetooth, les notifications et la liste des contacts
• Travailler hors connexion (aucune 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 d’URL
• S’appuyer sur un Service Worker pour éviter la nécessité de empaqueter du code natif

Vous n’avez pas besoin d’une infrastructure pour créer une application hybride ou une PWA, mais il existe quelques frameworks populaires qui seront abordés dans ce guide, notamment PhoneGap (avec Cordova) et Ionic (avec Cordova ou Condensor à l’aide d’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 aux services d’appareil tels que l’état de la batterie, l’accès aux fichiers, les tonalités vibration/anneau, 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.

Bien démarrer avec Ionic en installant les outils requis

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

• Node.js pour interagir avec l’écosystème Ionique. Téléchargez NodeJS pour Windows ou suivez le guide d’installation de NodeJS à l’aide de Sous-système Windows pour Linux (WSL). Vous pouvez envisager d’utiliser Node Version Manager (nvm) si vous utiliserez plusieurs projets et versions de NodeJS.

• VS Code pour l’écriture de votre code. Téléchargez VS Code pour Windows. Vous pouvez également installer l’extension à distance WSL si vous préférez créer votre application avec une ligne de commande Linux.

• Terminal Windows pour utiliser votre interface de ligne de commande (CLI) préférée. Installez Terminal Windows à partir du Microsoft Store.

• Git pour le contrôle de version. Téléchargez Git.

Créer un projet avec Ionic Cordova et Angular

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

npm install -g @ionic/cli cordova

Créez une application Angular Ionic à 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. Visitez la section Rendre votre application Angular une page PWA de la documentation Ionic pour apprendre à déplacer votre application d’une application hybride vers 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 Angular Ionic à 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 rendre l’application PWA :

npm install @ionic/pwa-elements

Importez @ionic/pwa-elements en ajoutant ce qui suit à 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 Angular du condensateur Ionic. Visitez la section Rendre votre application Angular une page PWA de la documentation Ionic pour apprendre à déplacer votre application d’une application hybride vers 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 Rendre votre application React une section PWA de la documentation Ionic pour apprendre à déplacer votre application d’une application hybride vers une PWA.

Tester votre application Ionic sur un appareil ou un émulateur

Pour tester votre application Ionic sur un appareil Android, plug-in votre appareil (vérifiez 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 - Java Development Kit (JDK), Gradle et android SDK.

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 ionic pour générer et 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.