کاربران به یک اپلیکیشن لیست خرید قابل اعتماد نیاز داشتند که بهطور کامل آفلاین کار کند، بین دستگاهها همگامسازی شود و تجربهای مشابه اپلیکیشنهای بومی در وب ارائه دهد.
من یک PWA مبتنی بر Vue.js با Vuex برای مدیریت state ساختم و Service Workers را برای قابلیت آفلاین و IndexedDB را برای ذخیرهسازی محلی دادهها پیادهسازی کردم.
فرانتاند: Vue.js + Vuex + Vuetify | آفلاین: Service Workers + IndexedDB | همگامسازی: Firebase Realtime Database
این Service Worker درخواستهای شبکه را رهگیری کرده و در حالت آفلاین محتوای کششده را ارائه میدهد و اطمینان حاصل میکند که اپلیکیشن حتی بدون اینترنت نیز کار میکند.
// 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');
})
);
});