Katika hatua hii tunabadili website kuwa Progressive Web App (PWA) ili ionekane kama app ya simu, iweke ICON kwenye home screen, ifunguke full-screen, na kufanya kazi hata bila intaneti (offline).
PWA ni njia ya bure kabisa kugeuza website kuwa app bila kutumia Play Store.

✅ 🔵 Hatua ya 3: Ongeza Manifest.json + Service Worker

Hii ndiyo hatua muhimu zaidi ya kuibadilisha website kuwa app.

🔹 STEP 1: Unda manifest.json File

👉 Tengeneza file jipya kwenye root ya website:

manifest.json

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

MUHIMU:

✔ Tengeneza folder: /icons/
✔ Weka icon 192×192 na 512×512

🔹 STEP 2: Unganisha Manifest kwa Header ya Website

Katika <head> ya website yako (mfano index.php) weka hizi code:

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

<link rel="apple-touch-icon" href="icons/icon-192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">


Hii inaiambia browser kuwa site inaweza kuwa app.

🔹 STEP 3: Unda service-worker.js

Hiki ndicho kinawezesha offline mode + caching.

service-worker.js

self.addEventListener("install", event => {
event.waitUntil(
caches.open("faulink-cache").then(cache => {
return cache.addAll([
"/",
"/index.php",
"/css/style.css",
"/js/main.js",
"/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);
})
);
});

🔹 STEP 4: Sajili Service Worker (Register)

Weka hii script mwishoni mwa <body> ya website:

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

🔹 STEP 5: Test App Yako
🧪 Test A:

Fungua website kupitia Chrome (Android)

Click dots (⋮)

Chagua Add to Home Screen

App itaonekana na ICON kama application ya simu

🧪 Test B:

✔ Funga intaneti
✔ Fungua app
👉 Pages ulizotembelea zitafunguka bila net (offline)

👌 Baada ya Hatua ya 3, sasa website yako ni App kamili!
🔗 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