jinsi ya kubadilisha app kuwa Offline Mode & Caching (PWA Offline Access) | HATUA YA 9

Moja ya nguvu za Progressive Web App (PWA) ni uwezo wa kufanya kazi bila internet. Hii inafanyika kwa Service Worker na caching ya resources muhimu (HTML, CSS, JS, images). Hii inaboresha user experience kwa watumiaji wa simu na PC.

1️⃣ Kumbuka Service Worker (sw.js)

Tumeanza na Service Worker kwenye Hatua ya 2. Sasa tunachukua hatua za caching ili kuruhusu offline access.

const CACHE_NAME = 'faulink-pwa-v1';
const urlsToCache = [
'/',
'/index.html',
'/style.css',
'/script.js',
'/logo192.png',
'/logo512.png'
];

// Install SW and cache files
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Caching app shell...');
return cache.addAll(urlsToCache);
})
);
});

// Activate SW
self.addEventListener('activate', event => {
console.log('Service Worker activated');
});

// Fetch requests
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});


Ufafanuzi:

urlsToCache ni resources muhimu unazotaka watumiaji wapewe offline.

fetch listener inarudisha resource kutoka cache ikiwa ipo, vinginevyo inafanya network request.

2️⃣ Kuunganisha Service Worker katika HTML
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service Worker registered', reg))
.catch(err => console.log('Service Worker registration failed', err));
});
}
</script>

3️⃣ Testing Offline Mode

Fungua website yako kwenye Chrome.

Open DevTools → Application → Service Workers

Activate Offline mode kwenye Network tab

Reload page, ukaona site inafanya kazi bila internet!

Tip: hakikisha all static files (CSS, JS, images) zimetajwa kwenye urlsToCache

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming:
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509