Kutengeneza Service Worker & Kuweka Offline Support | Hatua ya 2

Baada ya maandalizi yote ya hatua ya 1, sasa tunaingia kwenye hatua muhimu ya kuifanya website iwe ready kuwa app.
Hapa tunatengeneza Service Worker, kipengele kinachowezesha website kufanya kazi kama app halisi.

📌 Description

Katika hatua hii uta:

Tengeneza service worker file (sw.js)

Fanya website yako iweze kufunguka hata kama hakuna internet

Kuweka caching rules

Kuunganisha service worker na website yako

Kufanya test kwenye Google Chrome

Website nyingi zinazobadilishwa kuwa app lazima ziwe na service worker.

Mfano tunachukulia website ya Faulink.com.

1️⃣ Tengeneza Faili sw.js

Unda faili jipya kwenye root directory ya website:

sw.js

self.addEventListener("install", event => {
event.waitUntil(
caches.open("faulink-cache-v1").then(cache => {
return cache.addAll([
"/",
"/index.php",
"/about.php",
"/contact.php",
"/services.php",
"/icons/icon-192.png",
"/icons/icon-512.png"
]);
})
);
});

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


Hii inasaidia kuruhusu website kufunguka hata bila internet.

2️⃣ Unganisha Service Worker na HTML

Ongeza script hii kwenye index.php au header.php.

<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(() => console.log("Service Worker Registered"))
.catch(err => console.log("SW failed: ", err));
}
</script>


Hii inafanya browser kutambua kuwa website yako ni kama App.

3️⃣ Hakikisha Umeweka manifest.json vizuri

Kwenye hatua ya 1 tulitengeneza manifest. Hapa hakikisha linatambulika:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0d6efd">

4️⃣ Hakikisha Icons Ziko Kwenye Folda Sahihi

Katika mfano huu:

/icons/icon-192.png
/icons/icon-512.png
/sw.js
/manifest.json


Hii ni muhimu sana kwa ajili ya later app packaging.

5️⃣ Test Kama App Inatambulika Kama PWA

Fungua website yako kwenye Chrome:

Right click → Inspect

Nenda Application Tab

Angalia sehemu ya Service Workers

Angalia sehemu ya Manifest

Angalia sehemu ya Lighthouse

Kama kila kitu kiko sawa utaona:

✔ Manifest OK
✔ Service Worker Registered
✔ Icons Valid
✔ App Installable

Kama unatumia mfano wa Faulink.com,
itakuwa sweety sana kwenye simu.

6️⃣ Jaribu Kuinstall App Moja Kwa Moja (Add to Home Screen)

Hii ni kabla ya kutengeneza APK.

Safari:

Menu → Add to Home Screen
Chrome Mobile → Install App

Utaona icon ya app ikionekana kama APK halisi.

🔚 Hitimisho la Hatua ya 2

Sasa website yako ina service worker, caching, manifest, na icons.
Hii ndiyo foundation ya kuipeleka kwenye hatua inayofuata:

Kutengeneza APK ya bure

Kuitengeneza signed version

Kuituma kwenye phone au Play Store

🔗 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