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’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
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 :
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 sur le web.
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.
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 :
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.
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.
Commentaires sur Windows developer
Windows developer est un projet open source. Sélectionnez un lien pour fournir des commentaires :
PWABuilder est un outil open source développé par Microsoft qui simplifie le processus de déploiement des applications web progressives (PWA, Progressive Web App). Il simplifie le développement d’applications PWA en automatisant la création de composants essentiels, en fournissant une interface conviviale pour la personnalisation et en empaquetant les applications PWA pour différentes plateformes et magasins d’applications. Découvrez comment générer le manifeste d’application, configurer le service Worker e