Jinsi ya Kutumia Cache API kwa Offline Assets

Jifunze jinsi ya kutumia Cache API kuwekea resources za website yako kwenye cache ili ziweze kupatikana offline. Hii inafanya website yako kuwa fast, reliable, na interactive kama Progressive Web App (PWA).

Mfano wa Code (Caching Assets kwa Service Worker):

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

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

// Activate event: Cleanup old caches
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: Serve cached resources
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});


Jinsi ya Ku-register Service Worker:

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: Inaweka resources muhimu kwenye cache (addAll).

Activate event: Inasafisha cache za zamani ili kuepuka storage overload.

Fetch event: Kwanza inajaribu kutoa resource kutoka cache, ikiwa haipo, inachukua kutoka network.

Hii inahakikisha offline support, kuongeza speed, na kutoa experience bora kwa watumiaji.

🔗 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