How to cache more than the index.html with the service Worker | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How to cache more than the index.html with the service Worker

Hey, I have a problem with Progressive Web Apps. I have an app and the service worker is registered successfully. I can download the app. However, only the index.html works offline and not all other subpages. However, I have added them in the array to save. On Windows it works fine. Only on the smartphone it does not. My default browser is the Samsung browser (Samsung smartphone) What can I do? Do you have any ideas? Here are my events of my Service Worker: const contentToCache = [ '/index.html', '/Upload.html', '/Save.html', '/Routing.js', '/LocalStorageService.js' ]; self.addEventListener('install', (e) => { console.log("[SERVICE WORKER] INSTALL DATA"); e.waitUntil((async () => { const cache = await caches.open("Baum-App"); await cache.addAll(contentToCache); })()); }); self.addEventListener('fetch', (e) => { e.respondWith((async () => { const r = await caches.match(e.request); console.log(`[Service Worker] Fetching resource: ${e.request.url}`); if (r) { return r; } const response = await fetch(e.request); const cache = await caches.open("Baum-App"); console.log(`[Service Worker] Caching new resource: ${e.request.url}`); cache.put(e.request, response.clone()); return response; })()); }); Thanks for helping!

28th Mar 2022, 8:56 PM
AntiminiZwerg
1 Answer
0
* try seemed you had alot of parentheses not needed tho may have to add back to async and end depending on compiler const contentToCache = [ '/index.html', '/Upload.html', '/Save.html', '/Routing.js', '/LocalStorageService.js' ]; self.addEventListener('install', (e) => { console.log("[SERVICE WORKER] INSTALL DATA"); e.waitUntil(async () => { const cache = await caches.open("Baum-App"); await cache.addAll(contentToCache); }); }); self.addEventListener('fetch', (e) => { e.respondWith(async () => { const r = await caches.match(e.request); console.log(`[Service Worker] Fetching resource: ${e.request.url}`); if (r) { return r; } const response = await fetch(e.request); const cache = await caches.open("Baum-App"); console.log(`[Service Worker] Caching new resource: ${e.request.url}`); cache.put(e.request, response.clone()); return response; }); });
25th Oct 2023, 9:58 AM
Christopher kyllonen
Christopher kyllonen - avatar