10 – Création d’une PWA – Computer Sciences

Création d’une Progressive Web App (PWA) Simple avec JavaScript

Module 1: Introduction aux Progressive Web Apps et Concepts de Base

Objectif :

Comprendre ce qu’est une Progressive Web App (PWA) et ses avantages. Connaître les bases d’HTML, CSS et JavaScript.

Contenu :

Définition et Avantages des PWA :
- Une Progressive Web App (PWA) est une application web moderne qui offre une expérience utilisateur proche de celle des applications natives.
- Avantages : accessibilité hors ligne, performances améliorées, installation rapide, etc.
Introduction à HTML, CSS et JavaScript :
- HTML (HyperText Markup Language) : Langage de balisage utilisé pour créer la structure de base d’une page web.
- CSS (Cascading Style Sheets) : Langage utilisé pour styliser et mettre en forme les pages web.
- JavaScript : Langage de programmation utilisé pour rendre les pages web interactives.

Exemple :

<!DOCTYPE html>
<html>
<head>
  <title>Ma PWA</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Bienvenue dans ma PWA!</h1>
  <p>Ceci est une Progressive Web App.</p>
</body>
</html>

\pagebreak

Module 2: Structure de Base d’une PWA

Objectif :

Comprendre la structure de base d’une PWA. Découvrir le manifeste Web App et les service workers.

Contenu :

Manifeste Web App :
- Fichier JSON qui définit les métadonnées de l’application, comme son nom, icônes, thème, etc.
- Il permet d’installer l’application sur l’écran d’accueil d’un appareil.
Service Workers :
- Scripts JavaScript qui agissent comme des proxies entre l’application, le navigateur et le réseau.
- Ils permettent un contrôle avancé sur les requêtes réseau, facilitant l’expérience hors ligne.

Exemple (manifeste Web App) :

{
  "name": "Ma PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

\pagebreak

Module 3: Gestion des Ressources et de l’Affichage

Objectif :

Apprendre à gérer les ressources de manière efficace. Savoir adapter l’affichage en fonction des appareils.

Contenu :

Caching des Ressources :
- Mise en cache des fichiers (HTML, CSS, JS, images) pour un accès rapide même en mode hors ligne.
Affichage Responsif :
- Conception de l’interface utilisateur pour s’adapter à différents appareils (ordinateurs, tablettes, smartphones).

Exemple (caching des ressources) :

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
        '/img/logo.png'
      ]);
    })
  );
});

\pagebreak

Module 4: Interaction Utilisateur et Finalisation de la PWA

Objectif :

Ajouter de l’interactivité à la PWA. Comprendre les étapes de finalisation et de déploiement.

Contenu :

Ajout d’Interactivité :
- Utilisation de JavaScript pour rendre l’application interactive en réagissant aux actions de l’utilisateur.
Finalisation et Déploiement :
- Vérification des fonctionnalités et déploiement de la PWA sur un serveur.

Exemple (ajout d’interactivité) :

document.getElementById('myButton').addEventListener('click', () => {
  alert('Le bouton a été cliqué !');
});