Exercices Service Worker

Exercice - Service Worker#

Récupérez la page de base (HTML, CSS, images)
Installez un service worker
Premièrement, faites en sorte que cette page fonctionne en offline
- Créez un cache et stockez les ressources
- Lors de l’événement fetch, retournez les ressources du cache si existantes, sinon fetch
Vérifiez que la page fonctionne sans réseau

Le HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Oh, my lovely website</h1>
  <ul>
    <li><img src="imgs/a.jpg" alt=""></li>
    <li><img src="imgs/b.jpg" alt=""></li>
    <li><img src="imgs/c.jpg" alt=""></li>
    <li><img src="imgs/d.jpg" alt=""></li>
  </ul>
</body>
</html>

Le CSS :

html {
  background: #000;
  color: #fff;
  font: 1em sans-serif;
}
li {
  list-style-type: none;
}
ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
}

Les images :

Fake image 1 Fake image 2 Fake image 3 Fake image 4