Kutengeneza Service Worker (sw.js) kwa PWA | HATUA YA 2

Service Worker ni sehemu muhimu ya PWA (Progressive Web App) inayoruhusu app yako kufanya kazi offline, cache files, na kuongeza speed. Hii ni hatua ya pili baada ya kuweka manifest.json.

1️⃣ Kuunda sw.js

Hapa tunaunda file mpya sw.js kwenye root ya website yako.

const cacheName = 'faulink-cache-v1';
const assetsToCache = [
'/',
'/index.html',
'/style.css',
'/script.js',
'/favicon.ico',
'/images/logo.png'
];

// Install Service Worker
self.addEventListener('install', event => {
console.log('[Service Worker] Installing...');
event.waitUntil(
caches.open(cacheName).then(cache => {
console.log('[Service Worker] Caching all assets');
return cache.addAll(assetsToCache);
})
);
});

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

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


Hii inahakikisha assets muhimu zinapewa cache na app inaweza kufanya kazi offline.

2️⃣ Register Service Worker kwenye index.html
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(err => {
console.log('Service Worker registration failed:', err);
});
});
}
</script>


Hii inamleta sw.js kwenye browser na kuanza cache assets.

3️⃣ Test Offline Functionality

Fungua website yako kwenye browser (Chrome/Edge/Firefox).

Fungua DevTools → Application → Service Workers.

Hakikisha sw.js imesajiliwa.

Funga internet kisha refresh page kuona kama app bado inafanya kazi.

🔗 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