PWA

Transformer votre quiz en une application installable sur smartphone, avec une interface responsive adaptée aux petits écrans en créant une Progressive Web App (PWA).

Notions théoriques

Qu’est-ce qu’une PWA ?

Une Progressive Web App est une application Web qui :

Fonctionne dans un navigateur
Peut être installée sur un smartphone (comme une app native)
Fonctionne hors ligne (si on ajoute un service worker)
Est responsive (s’adapte à tous les écrans)
Est rapide à charger

astuce

Les PWA sont de plus en plus utilisées car elles offrent une expérience utilisateur proche des applications natives, tout en étant plus simples à développer et à maintenir.

Plus d'infos sur Wikipedia : Progressive Web App

Transformer votre quiz en PWA

Pourquoi transformer votre application Web en PWA ?

Pour permettre aux joueurs d’installer votre quiz sur leur téléphone
Pour donner l’impression d’une application mobile
Pour motiver les utilisateurs à revenir jouer
Parce que c’est gratuit, rapide et moderne

Les 5 éléments d’une PWA

Éléments PWA

Une balise <meta> dans le <head>

→ indique au navigateur que le site est une PWA
Un fichier manifest.json

→ décrit l’application (nom, icône, couleurs…)
Deux fichiers d’icônes (192x192px et 512x512px)

→ pour l’écran d’accueil et les notifications
Une interface responsive

→ s’adapte à toutes les tailles d’écran
Un fichier service-worker.js (facultatif)

→ gère le cache et le mode hors-ligne

1) Une balise `<meta>`

Dans le projet Next.js, il faut tout-d'abord ajouter 2 lignes dans le fichier app/layout.tsx :

export const metadata: Metadata = {
  title: "CyberQuiz",
  description: "Un quiz pour tester vos connaissances en cybersécurité",
  manifest: "/manifest.json",
  themeColor: "#0f172a",
};

Et dans la partie return du fichier app/layout.tsx, il faut ajouter une balise <head> :

  return (
    <html lang="fr">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="icon" href="/icons/icon-192x192.png" />
        <meta name="theme-color" content="#0f172a" />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );

2) Un fichier `manifest.json`

Fichier à placer dans /public/manifest.json :

{
  "name": "Quiz Cyber",
  "short_name": "CyberQuiz",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

3) Des icônes

Placez 2 images dans /public/icons/ :

icon-192x192.png
icon-512x512.png

astuce

Vous pouvez créer les 2 images à placer dans /public/icons/ avec un outil de génération d’icônes PWA tel que https://realfavicongenerator.net/.

4) Une interface responsive

Rappel

Responsive signifie : qui s’adapte à toutes les tailles d'écran.

Pour rendre l'application Web responsive, il suffit d'ajouter les classes CSS flex flex-col md:flex-row et w-full md:w-1/2 pour gérer la disposition des éléments en fonction de la taille de l'écran.

Voici les modifications à apporter dans le composant principal :

<div className="flex flex-col md:flex-row">
  <div className="w-full md:w-1/2 p-4">Image</div>
  <div className="w-full md:w-1/2 p-4">Texte + Réponses</div>
</div>

5) Un fichier `service-worker.js`

(Nous verrons plus tard comment créer un service worker pour gérer le mode hors-ligne)

Quelques éléments à connaître

Élément	Utilité
`manifest.json`	Décrit l’application pour l’installation
`display: standalone`	Affiche l’app sans barre d’URL
`theme_color`	Couleur de la barre système (mobile)
`icons[]`	Icônes pour l’écran d’accueil
`flex-col md:flex-row`	Affichage vertical sur mobile, horizontal sur desktop

Test de mémorisation / compréhension

TP pour réfléchir et résoudre des problèmes

Il vous est maintenant demander de transformer votre quiz en une application installable sur smartphone, avec une interface responsive adaptée aux petits écrans en créant une PWA.

1) Une balise `<meta>`

Dans votre projet Next.js, ajoutez 2 lignes dans le fichier app/layout.tsx :

export const metadata: Metadata = {
  title: "CyberQuiz",
  description: "Un quiz pour tester vos connaissances en cybersécurité",
  manifest: "/manifest.json",
  themeColor: "#0f172a",
};

Et dans la partie return de votre fichier app/layout.tsx, ajoutez une balise <head> :

  return (
    <html lang="fr">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="icon" href="/icons/icon-192x192.png" />
        <meta name="theme-color" content="#0f172a" />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );

Ajouter balise meta dans head

2. Un fichier `manifest.json`

Créez un fichier manifest.json dans le dossier /public :

{
  "name": "Quiz Cyber",
  "short_name": "CyberQuiz",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Ajouter balise meta dans head

Supprimer des fichiers inutiles

Vous pouvez supprimer les fichiers suivants dans /public/ :

file.svg
globe.svg
next.svg
windows.svg
vercel.svg

Supprimer fichiers inutiles

3. Création de 2 icônes

Nous allons créer les 2 images (192x192 et 512x512) qui vont servir d'icônes à la PWA :

Ouvrez un outil de génération d’icônes PWA tel que https://realfavicongenerator.net/

Téléchargez (upload) une image carrée

astuce
Choisissez une image simple, claire et reconnaissable même en petite taille.

Vous pouvez créer vous même une image, par exemple avec un cadenas et un point d'interrogation :

Pour configurer la génération des icônes, indiquez le nom de votre application :

Cliquez sur le bouton Next pour générer les icônes

Pour télécharger les icônes générées :
- Choisissez le framework Next.js :
- Cliquez sur le bouton Download the app files
- Cliquez sur le bouton Download the public files

Renommez les fichiers web-app-manifest-192x192.png en icon-192x192.png et web-app-manifest-512x512.png en icon-512x512.png et placez-les dans le dossier /public/icons/ de votre projet.

4. Installation sur ordinateur

Retournez dans votre navigateur :

une icône apparaît à côté du nom de votre site (dans l'onglet)
un bouton Installer apparaît dans la barre d’adresse
cliquez sur le bouton Installer pour installer la PWA sur votre ordinateur
une icône apparaît sur votre Bureau et/ou dans votre menu Démarrer
lancez l’application depuis cette icône

attention

Vous avez maintenant une application Web installable, mais elle n’est pas encore responsive et ne s'affiche donc pas encore correctement sur smartphone.

5. Rendre l'application responsive

astuce

<div className="flex flex-col md:flex-row">
  <div className="w-full md:w-1/2 p-4">Image</div>
  <div className="w-full md:w-1/2 p-4">Texte + Réponses</div>
</div>

Icons

Que faire si le texte des réponses ne s'affiche pas correctement ?

Icons

Si le texte des réponses ne s'affiche pas correctement, vous pouvez ajouter les classes whitespace-normal text-left à l'élément <Button/> pour permettre au texte de s'afficher correctement sur plusieurs lignes.

<CardContent className="p-0">
  <p className="text-lg font-semibold mb-4">{question.texte}</p>
  {question.reponses.map((reponse: any) => (
    <Button
      key={reponse.id}
      onClick={() => handleClick(reponse)}
      disabled={afficherExplication}
      className="w-full justify-start mt-2 whitespace-normal text-left"
      variant="outline"
    >
      {reponse.texte}
    </Button>
  ))}
</CardContent>   

Icons

6. Installation sur smartphone

Voici comment tester l'installation de votre application sur votre smartphone Android :

Ouvrez le quiz dans Chrome sur votre smartphone
Cliquez sur le bouton "Installer" dans la barre d’adresse
Vérifiez que l’icône apparaît sur l’écran d’accueil
Ouvrez le quiz depuis l’écran d’accueil

Voici comment tester l'installation de votre application sur votre smartphone iOS :

Ouvrez le quiz dans Safari (ou Chrome) sur votre iPhone
Cliquez sur le bouton "Partager" en bas (ou en haut) de l’écran
Cliquez sur "Ajouter à l’écran d’accueil"
Vérifiez que l’icône apparaît sur l’écran d’accueil
Ouvrez le quiz depuis l’écran d’accueil

Une solution

PWA

Notions théoriques

Qu’est-ce qu’une PWA ?

Transformer votre quiz en PWA

Les 5 éléments d’une PWA

1) Une balise `<meta>`

2) Un fichier `manifest.json`

3) Des icônes

4) Une interface responsive

5) Un fichier `service-worker.js`

Quelques éléments à connaître

Test de mémorisation / compréhension

Quel fichier est indispensable pour qu’un site soit reconnu comme PWA ?

Quel paramètre permet d’afficher une PWA sans barre d’URL ?

Où place-t-on le fichier manifest.json dans un projet Next.js ?

Quelle balise HTML est nécessaire dans le layout pour activer la PWA ?

Quel outil permet de simuler un smartphone dans Chrome ?

TP pour réfléchir et résoudre des problèmes

1) Une balise `<meta>`

2. Un fichier `manifest.json`

3. Création de 2 icônes

4. Installation sur ordinateur

5. Rendre l'application responsive

6. Installation sur smartphone

Notions théoriques​

Qu’est-ce qu’une PWA ?​

Transformer votre quiz en PWA​

Les 5 éléments d’une PWA​

1) Une balise <meta>​

2) Un fichier manifest.json​

3) Des icônes​

4) Une interface responsive​

5) Un fichier service-worker.js​

Quelques éléments à connaître​

Test de mémorisation / compréhension​

Quel fichier est indispensable pour qu’un site soit reconnu comme PWA ?

Quel paramètre permet d’afficher une PWA sans barre d’URL ?

Où place-t-on le fichier manifest.json dans un projet Next.js ?

Quelle balise HTML est nécessaire dans le layout pour activer la PWA ?

Quel outil permet de simuler un smartphone dans Chrome ?

TP pour réfléchir et résoudre des problèmes​

1) Une balise <meta>​

2. Un fichier manifest.json​

3. Création de 2 icônes​

4. Installation sur ordinateur​

5. Rendre l'application responsive​

6. Installation sur smartphone​

Notions théoriques

Qu’est-ce qu’une PWA ?

Transformer votre quiz en PWA

Les 5 éléments d’une PWA

1) Une balise `<meta>`

2) Un fichier `manifest.json`

3) Des icônes

4) Une interface responsive

5) Un fichier `service-worker.js`

Quelques éléments à connaître

Test de mémorisation / compréhension

TP pour réfléchir et résoudre des problèmes

1) Une balise `<meta>`

2. Un fichier `manifest.json`

3. Création de 2 icônes

4. Installation sur ordinateur

5. Rendre l'application responsive

6. Installation sur smartphone