Aller au contenu
PWA + Cadriciel

Introduction aux PWA et au cadriciel

Les applications web progressives (PWA)

Imaginez qu’un commerce local — disons une microbrasserie de Sherbrooke — souhaite offrir à ses clients une application pour consulter le menu, passer des commandes et recevoir des notifications sur les nouveaux produits. Deux options s’offrent à elle :

  1. Développer une application native pour iOS et Android — coûteux, deux bases de code à maintenir, publication dans les magasins d’applications.
  2. Développer une PWA — une seule base de code web, installable directement depuis le navigateur, fonctionnelle hors ligne.

Les applications web progressives (PWA) sont des applications web qui offrent une expérience utilisateur proche de celle des applications natives, en utilisant les technologies web standards (HTML, CSS, JavaScript).

Avantages

Installation directe

L’utilisateur ajoute la PWA à son écran d’accueil directement depuis le navigateur — aucun magasin d’applications requis.

Fonctionnement hors ligne

Grâce aux Service Workers, la PWA peut fonctionner sans connexion Internet.

Notifications push

Les développeurs peuvent maintenir l’engagement des utilisateurs même lorsque l’application est fermée.

Multiplateforme

Une seule version fonctionne sur smartphone, tablette et ordinateur — réduction des coûts de développement.

Un avantage supplémentaire : les mises à jour automatiques. Contrairement aux applications natives, où l’utilisateur doit manuellement déclencher la mise à jour via un magasin, les PWAs se mettent à jour en arrière-plan. L’utilisateur bénéficie toujours de la version la plus récente.

Limitations

Malgré leurs avantages, les PWAs présentent certaines limitations à connaître :

  • Accès limité aux fonctionnalités natives : Bluetooth, capteurs de proximité, intégration profonde avec le système d’exploitation — certaines fonctionnalités restent hors de portée.
  • Support inégal sur iOS : Les notifications push, l’accès complet à la caméra et l’ajout à l’écran d’accueil sont plus limités ou moins intuitifs sur iOS que sur Android.
  • Absence des magasins d’applications : Les PWAs ne sont pas référencées dans le Google Play Store ou l’App Store, ce qui peut réduire leur visibilité.

Architecture d’une PWA

L’architecture d’une PWA repose sur trois piliers technologiques qui travaillent ensemble pour offrir une expérience fiable et performante.

Les trois piliers

Les Service Workers sont des scripts JavaScript exécutés en arrière-plan, indépendamment de la page web. Ils agissent comme un intermédiaire entre l’application, le navigateur et le réseau.

Leurs responsabilités principales :

  • Mise en cache des ressources pour le fonctionnement hors ligne
  • Interception des requêtes réseau pour servir des réponses depuis le cache
  • Gestion des notifications push
// Exemple simplifié d'un Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/style.css', '/app.js']);
    })
  );
});


self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Vue d’ensemble

Le schéma suivant illustre comment les différentes couches interagissent :

UTILISATEUR
(navigateur / PWA)
↓
COUCHE FRONTEND
HTML · CSS · JavaScript · React
Interface utilisateur + logique UI
↓
SERVICE WORKER
Cache API · Push API · Interception réseau
manifest.json · LocalStorage · IndexedDB
↓
COUCHE BACKEND (externe)
API REST / GraphQL · Base de données
Serveur · Authentification

Cadriciel vs librairie

Avant de plonger dans React, clarifions une distinction fondamentale.

Un cadriciel fournit une structure complète et impose une organisation du code. C’est le framework qui contrôle le flux d’exécution — le développeur s’insère dans l’architecture préétablie.

Analogie : Un cadriciel, c’est comme un template. La structure globale est déjà définie, vous remplissez les champs et personnalisez les composantes.

Exemples : Angular, Next.js, Django

React

React est une librairie JavaScript open-source, développée par Meta (Facebook), pour construire des interfaces utilisateur modulaires, réactives et performantes.

Pourquoi React ?

React est la technologie web la plus utilisée par les développeurs professionnels pour construire des applications web modernes (Survey StackOverflow 2024). Sa popularité repose sur plusieurs forces : une approche par composants réutilisables, un écosystème mature et une communauté massive.

Écosystème React

L’écosystème de React complète ses capacités de base pour couvrir tous les aspects du développement d’applications.

Gestion de l’état

  • React Context API — solution intégrée et légère pour partager l’état entre composants sans passer de props manuellement
  • Redux — solution centralisée pour les grandes applications nécessitant un flux de données prévisible

Données asynchrones

  • React Query — facilite la récupération, la mise en cache et la synchronisation des données d’API. Gère automatiquement les états loading, success et error

Syntaxe JSX

JSX (JavaScript XML) est une extension de syntaxe qui permet d’écrire du balisage similaire au HTML directement dans un fichier JavaScript. C’est la manière standard de décrire l’interface utilisateur dans React.

// Ceci ressemble à du HTML, mais c'est du JSX !
const element = <h1>Bonjour, monde !</h1>;

L’un des avantages clés du JSX est la possibilité d’intégrer des expressions JavaScript directement dans le balisage à l’aide d’accolades {} :

const prenom = "Maude";
const age = 22;


const element = (
  <div>
    <h1>Bienvenue, {prenom} !</h1>
    <p>Vous avez {age} ans.</p>
    <p>L'an prochain, vous aurez {age + 1} ans.</p>
  </div>
);

Règles essentielles du JSX

  1. Un seul élément racine — Un composant doit retourner un seul élément parent. Utilisez <div> ou le fragment <>...</> pour regrouper plusieurs éléments.

    // ✅ Correct — un seul élément racine
    return (
      <div>
        <h1>Titre</h1>
        <p>Contenu</p>
      </div>
    );
    

    // ❌ Incorrect — deux éléments racines
    return (
      <h1>Titre</h1>
      <p>Contenu</p>
    );

  2. Toutes les balises doivent être fermées — Y compris les balises auto-fermantes comme <img /> et <br />.

    // ✅ Correct
    <img src="photo.jpg" alt="Description" />
    

    // ❌ Incorrect
    <img src="photo.jpg" alt="Description">

  3. className au lieu de class — Puisque class est un mot réservé en JavaScript, on utilise className en JSX.

    // ✅ JSX
    <div className="conteneur">...</div>
    

    // ❌ Ce n'est pas du JSX valide
    <div class="conteneur">...</div>

Outils de développement

Le rôle des outils de build

Dans le développement moderne, les outils de compilation (build tools) jouent un rôle essentiel. Ils gèrent les dépendances du projet grâce à la modularité d’ES6 (import/export), optimisent le code en éliminant les dépendances inutiles (tree-shaking), et réduisent la taille des fichiers livrés au navigateur (bundling).

Vite

Vite est un outil de build moderne, conçu pour offrir un développement ultra-rapide. Son principal atout : l’utilisation des ES Modules natifs du navigateur, ce qui élimine le bundling lourd au démarrage et permet un rechargement quasi-instantané lors des modifications de code (Hot Module Replacement).

Vite est compatible avec React, Vue.js, Svelte, et d’autres frameworks.

Créer un projet React avec Vite

  1. Ouvrir un terminal et naviguer vers le dossier où vous souhaitez créer le projet.

  2. Exécuter la commande de création :

    Fenêtre de terminal
    npm create vite@latest mon-app -- --template react

  3. Installer les dépendances :

    Fenêtre de terminal
    cd mon-app
    npm install

  4. Lancer le serveur de développement :

    Fenêtre de terminal
    npm run dev

    L’application est accessible à l’adresse affichée (généralement http://localhost:5173).

Récapitulatif

PWA

Applications web offrant une expérience native : installation directe, fonctionnement hors ligne, notifications push, multiplateforme.

Architecture

Trois piliers : Service Workers (cache, interception réseau), Manifeste (manifest.json), et Cache API.

Cadriciel vs Librairie

Le cadriciel impose la structure et le flux ; la librairie offre des outils sans imposer d’organisation.

React + JSX

Librairie populaire pour des UI modulaires. JSX permet de combiner logique JavaScript et balisage dans un même fichier.

Vite

Outil de build moderne avec démarrage instantané et rechargement rapide grâce aux ES Modules natifs.

npm

Gestionnaire de paquets pour installer, mettre à jour et gérer les dépendances JavaScript.

Ressources