Jifunze hatua kwa hatua jinsi ya kuifanya website yako kuwa Progressive Web App (PWA) ili watumiaji waweze kuiweka kama app kwenye simu/computer, kuitumia bila intaneti, na kupata speed kubwa zaidi.
🟦 1. PWA ni Nini?
PWA ni website inayofanya kazi kama app. Ina uwezo wa:
✔ Kufanya kazi bila intaneti (offline)
✔ Ku-install kwenye simu au PC
✔ Kuwa haraka na nyepesi
✔ Kuonekana kama native app
🟩 2. Mahitaji Muhimu
PWA inahitaji faili tatu muhimu:
manifest.json
service-worker.js
HTTPS domain (security requirement)
🟨 3. Hatua ya Kwanza: Tengeneza manifest.json
Unda faili jipya ndani ya root folder ya website yako:
✅ manifest.json
{
"name": "Faulink App",
"short_name": "Faulink",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0d6efd",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Kisha ongeza link kwenye <head> ya website:
<link rel="manifest" href="manifest.json">
🟧 4. Hatua ya Pili: Tengeneza Service Worker
Service worker ndiyo inafanya website kuwa offline. Unda faili:
✅ service-worker.js
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open("faulink-cache").then((cache) => {
return cache.addAll([
"/",
"/index.html",
"/style.css",
"/script.js"
]);
})
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((res) => {
return res || fetch(event.request);
})
);
});
🟫 5. Hatua ya Tatu: Register Service Worker kwenye index.html
Weka script hii mwisho wa body:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("service-worker.js")
.then(() => console.log("PWA Ready!"));
}
</script>
🟪 6. Hatua ya Mwisho: Hakiki Kama Website Yako ni PWA
Fungua Chrome → Inspect → Application → Manifest
Ukiona ✓ Manifest ✓ Service Worker — website yako ni PWA tayari.
🎉 Faida za Kubadilisha Website Kuwa PWA
✔ Inaweza kufunguka bila intaneti
✔ Inaweza ku-install kwenye Home Screen
✔ Inakimbia haraka kuliko website ya kawaida
✔ Inaboresha user experience
🔗 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