Jifunze kutengeneza app | hatua ya 2| Service Worker (sw.js) – Muhimu Ili APP Ifanye Kazi Offline
Baada ya kutengeneza manifest.json, hatua muhimu inayofuata ili kugeuza Faulink.com kuwa app (PWA) ni kutengeneza faili linaloitwa:
👉 Service Worker (sw.js)
Service Worker ni program ndogo inayokimbia nyuma ya website (background) bila kuhitaji kufungua page.
Ndiyo inafanya app yako iweze:
Kufanya kazi bila intaneti (offline mode)
Kuhifadhi (cache) pages zinazotembelewa mara nyingi
Kuongeza speed ya website
Kuruhusu installation ya app
Kwa kifupi:
Bila sw.js, Faulink.com haiwezi kuwa app inayoweka (installable).
🔧 SW.js Hufanya Kazi Gani?
✔ Inahifadhi (cache) files kama:
CSS
JavaScript
Images
HTML pages
✔ Inawezesha user kufungua app hata kama hana bundle
✔ Inaongeza kasi ya website mara 2–4
✔ Ni sehemu ya lazima ya PWA App
📄 Mfano Rahisi wa Service Worker (sw.js) kwa Faulink.com
Huu ni service worker wa standard, salama na unaofanya kazi papo hapo:
const cacheName = "faulink-cache-v1";
const filesToCache = [
"/",
"/index.php",
"/manifest.json",
"/icons/faulink-192.png",
"/icons/faulink-512.png",
"/css/style.css",
"/js/main.js"
];
// Install Service Worker
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(cacheName).then((cache) => {
return cache.addAll(filesToCache);
})
);
});
// Fetch Cached Files
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
📌 Maelezo ya Kila Sehemu
🔸 cacheName
Jina la cache — uki-update app, badilisha version (mfano: v2)
🔸 filesToCache
Orodha ya files za kutunzwa bila intaneti.
Unaweza kuongeza kama unataka:
blog_viewer.php
matokeo_index.php
mauzologin.php
CSS/JS zako zote
🔸 install event
Hapa ndio browser inahifadhi files kwenye cache.
🔸 fetch event
Hii inafanya page ifunguke hata kama hakuna internet.
📁 Mahali pa Kuweka sw.js
Weka sw.js hapa:
public_html/sw.js
Sio ndani ya folder — lazima iwe kwenye root (sehemu moja na index.php)
🔗 JINSI YA KUSAJILI SERVICE WORKER KWENYE WEBSITE
Ongeza code hii mwisho wa <body> au kwenye main.js:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(() => console.log("Service Worker Registered"))
.catch(err => console.log("SW Error:", err));
}
</script>
Baada ya kufanya hivi:
✔ App ita-install bila error
✔ Chrome itatambua PWA
✔ Install button itaonekana
✔ MAFUNZO YA ZIADA
Hakikisha:
Website ipo kwenye HTTPS
manifest.json ipo sawa
icons zipo sahihi
sw.js iko root folder
🚀 Tayari – Faulink.com sasa iko 50% kubadilishwa kuwa App!
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.