Hello tout le monde,
J'essaye de créer une PWA avec le tutoriel de Grafikart (et celui du site web.dev) et j'aimerais mettre une page pour quand on est hors-ligne. J'arrive à mettre en cache les fichiers souhaités, mais lorsque je passe hors-ligne, j'obtiens des erreurs dans la console et dans la partie "network" qui me dit que l'app n'arrive pas à récuperer ces fichiers du cache. Seul mon fichier html est récuperé, mais pas ce qui va avec (ex: svg, scripts...). Il y a aussi une librairie sur un CDN ainsi que ce que CSS import qui est récuperé.
Voici un screenshot de mon cache :
[url=https://postimg.cc/1VQ3xp6H][img]https://i.postimg.cc/1VQ3xp6H/cache.png[/img][/url]
Et les erreurs que j'obtiens en étant hors-ligne sur le console et le "network" :
[url=https://postimg.cc/6TrQrmJ1][img]https://i.postimg.cc/6TrQrmJ1/console-error.png[/img][/url]
[url=https://postimg.cc/JH54RG5W][img]https://i.postimg.cc/JH54RG5W/network-error.png[/img][/url]
Enfin, voici le code de mon service worker :
const OFFLINE_VERSION = 1;
const CACHE_NAME = "offline";
const OFFLINE_URL = "offline.html";
const BASE = location.protocol + "//" + location.host;
const CACHED_FILES = [
"https://cdn.jsdelivr.net/npm/kute.js@2.1.2/dist/kute.min.js",
`${BASE}/src/favicon/favicon.ico`,
`${BASE}/src/favicon/android-chrome-192x192.png`,
`${BASE}/src/favicon/android-chrome-512x512.png`,
`${BASE}/src/favicon/apple-touch-icon.png`,
`${BASE}/src/favicon/favicon-16x16.png`,
`${BASE}/src/favicon/favicon-32x32.png`,
`${BASE}/src/svg/layered-waves.svg`,
`${BASE}/js/background.js`,
`${BASE}/js/animation-blob.js`
];
self.addEventListener('install', (event) => {
event.waitUntil((async() => {
const cache = await caches.open(CACHE_NAME);
await Promise.all(
[...CACHED_FILES, OFFLINE_URL].map((path) => {
return cache.add(new Request(path, {cache: "reload"}));
})
);
})());
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
if ("navigationPreload" in self.registration) {
await self.registration.navigationPreload.enable();
}
})());
self.clients.claim();
});
self.addEventListener('fetch', (event) => {
if(event.request.mode === "navigate") {
event.respondWith((async() => {
try {
const preloadResponse = await event.preloadResponse;
if(preloadResponse) {
return preloadResponse;
}
return await fetch(event.request);
} catch(e) {
const cache = await caches.open(CACHE_NAME);
return await cache.match(OFFLINE_URL);
}
})());
}
});
Voilà tout, pourriez-vous m'expliquer donc à quoi est dû cette erreur svp ?
Merci d'avance pour vous réponses !