Kutengeneza Service Worker Ili Website iwe PWA (Progressive Web App) | Hatua ya 3

Service Worker ndiyo inafanya website yako kuwa App-ish, ikiwa na uwezo wa:

Kufanya offline browsing

Kuwa na caching

Speed ya juu

“Add to Home Screen”

Kuongezeka performance ndani ya app

Mfano wetu: Faulink.com (Website tayari imetengenezwa vizuri na responsive design).

📌 Description
Katika hatua hii utafundishwa:

Kazi ya Service Worker

Kuunda service-worker.js file

Kuunganisha website na Service Worker

Kuweka caching ili app ifunguke bila intaneti

Kutengeneza folder structure ya PWA

Baada ya hatua hii, website yako itakuwa tayari ku-convert kuwa real Android App kwa hatua inayofuata.

🛠 1. Unda Faili Linaloitwa service-worker.js
Hili ni faili muhimu sana. Liweke kwenye root directory ya website.
✳ service-worker.js
const cacheName = "faulink-cache-v1";
const filesToCache = [
"/",
"/index.php",
"/manifest.json",
"/icons/icon-192.png",
"/icons/icon-512.png"
];

self.addEventListener("install", event => {
event.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll(filesToCache);
})
);
});

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

✔ Hii inasaidia website kufanya kazi hata kama network ni ndogo.
✔ App itakuwa inapakia haraka sana.

🛠 2. Link Service Worker Kwenye HTML
Weka script hii kwenye footer ya website yako (kabla ya </body>):
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js")
.then(() => console.log("Service Worker Registered"));
}
</script>

🛠 3. Hakikisha Manifest Inaungana na Service Worker
Kwa nini?
Kwa sababu manifest ndiyo inasema:

App name

Icon

Theme color

Display mode (standalone)

Mfano wa manifest yako:
{
"name": "Faulink App",
"short_name": "Faulink",
"display": "standalone",
"start_url": "/",
"background_color": "#ffffff",
"theme_color": "#0d6efd",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

📱 4. Jaribu Kama PWA Imefanya Kazi
✔ Chrome Steps:

Fungua website yako

Nenda Inspect → Application

Cheki:

Manifest: ✔

Service Worker: ✔

Cache Storage: ✔

✔ Simu (Android Chrome):

Tembelea website

Gusa dot 3

Chagua Add to Home Screen

Ikiwa unapata Install App, basi PWA yako imefanikiwa 🎉

🧪 5. Test Offline Mode
Zima data/wifi → Fungua website
Ikiwa inafunguka basi service worker yako imefanikiwa kufanya cache.
Mfano: Faulink.com unaweza kuifanya ifanye offline caching ya sehemu muhimu za system.

🔚 Hitimisho la Hatua ya 3
Hatua hii imekamilisha sehemu muhimu ya kufanya website yako kuwa:

Offline-ready

Faster

Installable

PWA-ready

Sasa website yako iko tayari kuanza hatua inayofuata:
👉 Kubadilisha kuwa Real Android APK — Free Tools

🔗 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