Hatua ya 2: Kutengeneza Service Worker Ili Website Iwe Tayari Kuwa App (PWA Ready)

Baada ya hatua ya 1 kukamilika, sasa website yako inahitaji Service Worker.
Hiki ndicho kinachofanya website kuwa app inayoweza kufanya kazi hata bila internet (offline support), kuwa na speed kubwa, na kuwa installable kama app kwenye simu.

📌 Description

Katika Hatua ya 2, uta:

Tengeneza service worker file

Unganisha service worker na website

Weka caching ya basic files

Andaa website yako kuwa Progressive Web App (PWA)

Ifanye iweze “Install App” popup ikitokea kwenye browser

Mfano wetu: Faulink.com — tayari ina vitu vya msingi tulivyoandaa hatua ya 1.

1️⃣ Tengeneza File Linaloitwa service-worker.js

Unda faili service-worker.js kwenye root folder ya website.

Weka code hii rahisi:

self.addEventListener("install", function(event) {
event.waitUntil(
caches.open("faulink-cache-v1").then(function(cache) {
return cache.addAll([
"/",
"/index.php",
"/manifest.json",
"/css/style.css",
"/js/app.js"
]);
})
);
});

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

Hii code inafanya:

✔ Ku-cache files muhimu
✔ Offline mode ifanye kazi
✔ App ifunguke haraka

2️⃣ Unganisha Service Worker Kwenye Website

Kwenye index.php au header.php ongeza script hii chini ya body:

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

3️⃣ Hakikisha manifest.json Iko Kwenye Root

Kutoka hatua ya 1, tunayo:

<link rel="manifest" href="/manifest.json">

Hakikisha inapatikana kwa:

https://yourwebsite.com/manifest.json

Mfano:
✔ https://www.faulink.com/manifest.json

(ikiwa ungekuwa umeweka PWA tayari)

4️⃣ Tengeneza Folder la App Icons

Folder structure inapaswa kuwa:

/icons
icon-192.png
icon-512.png
/service-worker.js
/manifest.json

Ikikosekana icon, app haitoweza ku-install.

5️⃣ Test Kama App Inaweza Ku-Install

Tumia Chrome:

Fungua website yako

Bonyeza Inspect → Application

Chini ya Manifest angalia:
✔ “Installable: Yes”
✔ Icons ziko sawa
✔ Service worker registered

Ukipata "App can be installed", basi hatua yako imekamilika.

6️⃣ Install App Moja kwa Moja (Testing)

Kwenye Chrome ya simu:

Fungua website

Chini/juu utaona button:
“Add to Home Screen / Install App”

Ikiwa inaonekana, basi website yako ni PWA tayari.

🔚 Hitimisho la Hatua ya 2

Sasa website yako iko tayari 100% kubadilishwa kuwa app halisi (APK).
Tumeshatengeneza:

✔ service worker
✔ manifest
✔ offline mode
✔ install popup
✔ caching system

Hatua inayofuata:

👉 Hatua ya 3: Kuitengeneza App (APK) Bila Software — Free Tools

Ikiwa uko tayari, sema tu:

“endelea hatua ya 3”

🔗 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