Im currently developing a simple PWA with an index file that contains an inputfield where you can enter your medication barcode and hit submit. A PHP-file will then be displayed showing some information about the drugs recieved from a MySQL database.
Im now trying to cache the app shell in order to load the necessairy resources (html, css, scripts etc.) once the app is working offline. I kinda succeeded in this, but it only seems to work when the page that you're trying to cache is already visited once when the app was online. And this only is the case when I register that same service-worker on the result page, not only on the index page.
Apparantly, this kind of caching in which only the visited pages are cached is called 'partial' caching by my professor. I don't want this partial caching, I want a complete caching in which the service-worker is registered once on the index file and then caches all the necessairy files into to cache so that I can use it when offline.
This is how my service-worker looks right:
var cacheName = 'pillexplainerPWA';
var filesToCache = [
'http://localhost:80/MedicationProject/',
'http://localhost:80/MedicationProject/index.html',
'http://localhost:80/MedicationProject/result.php',
'http://localhost:80/MedicationProject/result2.html',
'http://localhost:80/MedicationProject/scripts/app.js',
'http://localhost:80/MedicationProject/styles/main.css',
'http://localhost:80/MedicationProject/styles/result.css',
'http://localhost:80/MedicationProject/images/back-button.jpg',
'http://localhost:80/MedicationProject/images/barcode.jpg'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(e) {
console.log('[ServiceWorker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
Can someone explain to me what I'm doing wrong and what needs to be adjusted to this code so that it won't cache only what is visited but everything the moment that index.html is loaded? The strange thing is, when I look into the cache when index.html is fired..it does show me all my files being there. But when I go offline and then hit that submit button to go to the result page, it doesn't load the cache.