Jinsi ya Kutumia Service Workers kwa Offline Functionality

Jifunze jinsi ya kutumia Service Workers kuifanya website yako iwe offline-capable kama Progressive Web App (PWA). Service Workers hufanya cache ya resources, hivyo watumiaji wanaweza kuona content hata bila internet.

Mfano wa Code (Service Worker):

// service-worker.js
const CACHE_NAME = 'mfano-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/style.css',
'/script.js',
'/images/logo.png'
];

// Install Event
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
.then(() => self.skipWaiting())
);
});

// Activate Event
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
)
);
});

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


Jinsi ya Ku-register Service Worker:

// script.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker Registered', reg))
.catch(err => console.log('Registration Failed', err));
});
}


Maelezo ya Code:

Install Event: Inahifadhi files muhimu kwenye cache wakati service worker inasakinishwa.

Activate Event: Inasafisha cache ya zamani ili kuepuka storage overload.

Fetch Event: Inashughulikia requests za network; inarudisha cache kwanza, kisha inajaribu network.

Hii inahakikisha offline functionality, na kuruhusu app kufanya kazi bila internet.

🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

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