pwa/offline.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>QPW - Hors ligne</title>
  </head>
  <body>
    <h1>Oops !</h1>
    <h2>Vous êtes hors ligne</h2>
    <p>Déjà QPW user? vous pouvez toujours consulter les évènements déjà visités. </p>
    <ul class="ul__parties">

    </ul>
    <script>
      caches.open('parties').then((cache) =>
        cache.keys().then((keys) =>
          keys.forEach((key) => {

            const name = localStorage.getItem(key.url);
            console.log(key, name);
            let ul = document.querySelector('.ul__parties')
            
            if (name) {

              let li = document.createElement('li');
              ul.appendChild(li);
              const $link = document.createElement('a');
              $link.href = key.url;
              $link.innerHTML = name;
              li.appendChild($link);
              
            }
            else 
            {
              ul.innerHTML = `<p>Pas d'évènements à consulter</p>`
            }
          }),
        ),
      );
    </script>
  </body>
</html>