A Progressive Web App for seamless offline shopping management
Users needed a reliable shopping list app that worked perfectly offline, synced across devices, and provided a native-app-like experience on the web.
I built a Vue.js-based PWA with Vuex for state management, implementing service workers for offline functionality and IndexedDB for local data persistence.
Frontend: Vue.js + Vuex + Vuetify | Offline: Service Workers + IndexedDB | Sync: Firebase Realtime Database
This service worker intercepts network requests and serves cached content when offline, ensuring the app remains functional without internet.
// Service Worker for Offline Functionality
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request).then((fetchResponse) => {
return caches.open('pwa-cache').then((cache) => {
cache.put(event.request, fetchResponse.clone());
return fetchResponse;
});
});
}).catch(() => {
return caches.match('/offline.html');
})
);
});