Qu'est-ce qu'une PWA (Application Web Progressive)…

PWA est une application web qui ressemble et se comporte comme une application mobile native, tout en fonctionnant dans le navigateur.

Caractéristiques principales de PWA :

Fiabilité : Fonctionne hors ligne grâce aux Service Workers.
Performance : Se charge rapidement et répond aux actions de l'utilisateur.
Installabilité : Les utilisateurs peuvent ajouter la PWA à l'écran d'accueil de leur appareil.
Découvrabilité : Indexée par les moteurs de recherche.
Attractivité : Peut envoyer des notifications push.
Réactivité : S'adapte à toutes les tailles d'écran.
Sécurité : Fonctionne uniquement sur HTTPS.

Technologies utilisées dans la PWA :

Service Workers : Proxy entre le navigateur et le réseau, permettant de mettre en cache les ressources et de fonctionner hors ligne.

// Exemple d'installation d'un Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker enregistré avec le scope :', registration.scope);
      })
      .catch(error => {
        console.log('Erreur lors de l’enregistrement du Service Worker :', error);
      });
  });
}

Web App Manifest : Fichier JSON contenant des informations sur l'application (nom, icônes, orientation de l'écran, etc.).

{
  "short_name": "My PWA",
  "name": "Ma PWA d'exemple",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

HTTPS : Assure une connexion sécurisée.

Avantages de PWA :

Ne nécessite pas d'installation via les magasins d'applications.
Prend moins de place sur l'appareil.
Se met à jour plus facilement.
Disponible sur toutes les plateformes supportant le navigateur.

Les tests PWA incluent la vérification :

Fonctionnalités en mode en ligne et hors ligne.
Installation et fonctionnement sur l'écran d'accueil.
Réactivité sur différents appareils.
Notifications push.
Fonctionnement du Service Worker et mise en cache.
Le manifeste de l'application.
Performance.

Qu'est-ce qu'une PWA (Application Web Progressive) ?