service-worker, gestion des erreurs de réception

index.html

@@ -193,17 +193,37 @@ formulaire.addEventListener('submit', async (e) => {
     conversation.appendChild(citation);
     formulaire.reset();
 
-    const paragraphe = document.createElement('p');
+    let paragraphe = document.createElement('p');
     paragraphe.setAttribute("aria-busy", "true");
     conversation.appendChild(paragraphe);
     conversation.scrollTop = conversation.scrollHeight;
 
-    const requete = await fetch(formulaire.action, {
-        method: formulaire.method,
-        body: formulaireData
-    });
     paragraphe.setAttribute('aria-busy', 'true');
-    const reponse = await requete.text();
+    let reponse
+    try {
+        const requete = await fetch(formulaire.action, {
+            method: formulaire.method,
+            body: formulaireData
+        });
+        reponse = await requete.text();
+    } catch (error) {
+        paragraphe.setAttribute('aria-busy', 'false');
+
+        paragraphe = document.createElement('p');
+        paragraphe.innerHTML = "😿 <em>Je ne suis pas disponible pour le moment. Merci de laisser un message !</em>";
+        favicon.href = 'cat-tears.svg';
+        conversation.appendChild(paragraphe);
+        document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
+
+        bouton_envoyer.disabled = false;
+        bouton_envoyer.setAttribute("aria-busy", false);
+        bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
+        question.focus();
+        question.onfocus();
+
+        return
+    }
+
     paragraphe.setAttribute('aria-busy', 'false');
     nb_reponses++;
 
@@ -214,6 +234,8 @@ formulaire.addEventListener('submit', async (e) => {
 
     let t = 0;
     Array.from(reponse).forEach((lettre, i) => {
+        t += 100 * Math.random()
+        if (lettre == " ") t += 100
         setTimeout(() => {
             if (lettre == "\n") {
                 paragraphe.innerHTML += "<br>";
@@ -222,12 +244,12 @@ formulaire.addEventListener('submit', async (e) => {
             }
             document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
 
-        }, t += 100 * Math.random());
+        }, t);
     });
     setTimeout(() => {
         const paragraphe = document.createElement('p');
         paragraphe.innerHTML = (nb_reponses % 5 ? '😸' : '😹') + ' Voulez-vous que je réponde à une autre question ?';
-        favicon.href = (nb_reponses % 5 ? 'cat-troll.svg' : 'cat-tears.svg');
+        favicon.href = (nb_reponses % 5 ? 'cat-troll.svg' : 'cat-lol.svg');
         conversation.appendChild(paragraphe);
         document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
 
@@ -335,6 +357,8 @@ window.onresize = function() {
 }
 window.visualViewport?.addEventListener('resize', window.onresize);
 window.onresize();
+
+navigator?.serviceWorker.register('service-worker.js')
         </script>
     </body>