Offline Question Caching
To make our CBT app truly resilient, it should work even if the student's internet connection drops mid-exam. Thankfully, because we fetch all 40 questions upfront and store them in the examQuestions array, the exam itself is already offline-proof! However, we can take this a step further by caching subjects and years so the Home Screen loads instantly.
Caching Static Data
3.19.1The list of JAMB subjects rarely changes. Fetching it from the API every single time the user opens the app is wasteful. Let's cache it in localStorage.
async function loadSubjects() {
// 1. Check local cache first
const cachedSubjects = localStorage.getItem('jamb_subjects');
if (cachedSubjects) {
populateSubjectDropdown(JSON.parse(cachedSubjects));
return;
}
// 2. If no cache, fetch from API
try {
const response = await fetch(`${API_BASE}/subjects`, { headers });
const data = await response.json();
// 3. Save to cache for next time
localStorage.setItem('jamb_subjects', JSON.stringify(data.data));
// 4. Render
populateSubjectDropdown(data.data);
} catch (error) {
console.error("Network failed, and no cache available.");
}
}Service Workers (PWA)
3.19.2If you want to allow users to install your CBT App directly to their phone's home screen, you should explore Progressive Web App (PWA) technologies. By registering a Service Worker, you can cache your index.html, style.css, and app.js files so the app shell loads even in airplane mode!