fix(PWA): icons

This commit is contained in:
Julien Froidefond
2025-02-13 14:21:40 +01:00
parent 7a79da017a
commit dc36ccaae0
16 changed files with 147 additions and 79 deletions

18
public/apple-icon.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Fond carré -->
<rect width="32" height="32" fill="#4F46E5"/>
<!-- Lettre S stylisée -->
<path
d="M21 12C21 10.3431 19.6569 9 18 9H14C12.3431 9 11 10.3431 11 12V12.5C11 14.1569 12.3431 15.5 14 15.5H18C19.6569 15.5 21 16.8431 21 18.5V19C21 20.6569 19.6569 22 18 22H14C12.3431 22 11 20.6569 11 19"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- Points décoratifs -->
<circle cx="11" cy="24" r="1.5" fill="white"/>
<circle cx="21" cy="8" r="1.5" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 693 B

View File

@@ -1,16 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Fond -->
<rect width="32" height="32" rx="8" fill="#4F46E5"/>
<!-- Fond avec coins arrondis -->
<path
d="M8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8C0 3.58172 3.58172 0 8 0Z"
fill="#4F46E5"
/>
<!-- Lettre S stylisée -->
<path d="M20.5 11C20.5 9.61929 19.3807 8.5 18 8.5H14C12.6193 8.5 11.5 9.61929 11.5 11V11.5C11.5 12.8807 12.6193 14 14 14H18C19.3807 14 20.5 15.1193 20.5 16.5V17C20.5 18.3807 19.3807 19.5 18 19.5H14C12.6193 19.5 11.5 18.3807 11.5 17"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"/>
<path
d="M21 12C21 10.3431 19.6569 9 18 9H14C12.3431 9 11 10.3431 11 12V12.5C11 14.1569 12.3431 15.5 14 15.5H18C19.6569 15.5 21 16.8431 21 18.5V19C21 20.6569 19.6569 22 18 22H14C12.3431 22 11 20.6569 11 19"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- Points décoratifs -->
<circle cx="11.5" cy="22" r="1.5" fill="white"/>
<circle cx="20.5" cy="6" r="1.5" fill="white"/>
<circle cx="11" cy="24" r="1.5" fill="white"/>
<circle cx="21" cy="8" r="1.5" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 731 B

After

Width:  |  Height:  |  Size: 820 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -36,72 +36,72 @@ self.addEventListener("activate", (event) => {
self.addEventListener("fetch", (event) => {
// Pour les requêtes API, on utilise "Network First" avec un timeout
if (event.request.url.includes("/api/")) {
event.respondWith(
Promise.race([
fetch(event.request.clone())
.then((response) => {
// Ne mettre en cache que les réponses réussies
if (response.ok) {
const responseToCache = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
}
return response;
})
.catch(() => {
// En cas d'erreur réseau, essayer le cache
return caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
// Si pas de cache, renvoyer une erreur appropriée
return new Response(JSON.stringify({ error: "Hors ligne" }), {
status: 503,
headers: { "Content-Type": "application/json" },
});
});
}),
// Timeout après 5 secondes
new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 5000)).catch(
() => {
return caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return new Response(JSON.stringify({ error: "Timeout" }), {
status: 504,
headers: { "Content-Type": "application/json" },
});
});
}
),
])
);
// event.respondWith(
// Promise.race([
// fetch(event.request.clone())
// .then((response) => {
// // Ne mettre en cache que les réponses réussies
// if (response.ok) {
// const responseToCache = response.clone();
// caches.open(CACHE_NAME).then((cache) => {
// cache.put(event.request, responseToCache);
// });
// }
// return response;
// })
// .catch(() => {
// // En cas d'erreur réseau, essayer le cache
// return caches.match(event.request).then((cachedResponse) => {
// if (cachedResponse) {
// return cachedResponse;
// }
// // Si pas de cache, renvoyer une erreur appropriée
// return new Response(JSON.stringify({ error: "Hors ligne" }), {
// status: 503,
// headers: { "Content-Type": "application/json" },
// });
// });
// }),
// // Timeout après 5 secondes
// new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 5000)).catch(
// () => {
// return caches.match(event.request).then((cachedResponse) => {
// if (cachedResponse) {
// return cachedResponse;
// }
// return new Response(JSON.stringify({ error: "Timeout" }), {
// status: 504,
// headers: { "Content-Type": "application/json" },
// });
// });
// }
// ),
// ])
// );
} else {
// Pour les autres ressources, on garde la stratégie "Cache First"
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request)
.then((response) => {
// Mettre en cache la nouvelle réponse
const responseToCache = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
return response;
})
.catch(() => {
// Si la requête échoue et que c'est une page, renvoyer la page hors ligne
if (event.request.mode === "navigate") {
return caches.match(OFFLINE_PAGE);
}
return new Response("Hors ligne", { status: 503 });
});
})
);
// event.respondWith(
// caches.match(event.request).then((cachedResponse) => {
// if (cachedResponse) {
// return cachedResponse;
// }
// return fetch(event.request)
// .then((response) => {
// // Mettre en cache la nouvelle réponse
// const responseToCache = response.clone();
// caches.open(CACHE_NAME).then((cache) => {
// cache.put(event.request, responseToCache);
// });
// return response;
// })
// .catch(() => {
// // Si la requête échoue et que c'est une page, renvoyer la page hors ligne
// if (event.request.mode === "navigate") {
// return caches.match(OFFLINE_PAGE);
// }
// return new Response("Hors ligne", { status: 503 });
// });
// })
// );
}
});