1️⃣ Hatua 1 – Kutengeneza Manifest File (manifest.json)

Unda manifest.json kwenye root folder (public_html/manifest.json)

Weka: name, short_name, start_url, display, theme_color, background_color, icons

Example:

{
"name": "Faulink Official App",
"short_name": "Faulink",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a73e8",
"icons": [
{"src": "icons/faulink-192.png", "sizes": "192x192", "type": "image/png"},
{"src": "icons/faulink-512.png", "sizes": "512x512", "type": "image/png"}
]
}

2️⃣ Hatua 2 – Kutengeneza Service Worker (sw.js)

Unda sw.js kwenye root folder

Cache pages na icons, handle fetch events

Example:

self.addEventListener("install", e => {
e.waitUntil(caches.open("cache-v1").then(cache => cache.addAll(["/","/index.php","/icons/faulink-192.png","/icons/faulink-512.png"])));
});
self.addEventListener("fetch", e => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

3️⃣ Hatua 3 – Kuunganisha Manifest + SW

Link manifest kwenye <head>:

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


Register SW kwenye JS:

if("serviceWorker" in navigator){navigator.serviceWorker.register("/sw.js");}

4️⃣ Hatua 4 – Kuunda App Icons

Tengeneza icons kwa sizes: 72, 96, 128, 144, 152, 192, 256, 384, 512

Weka /icons/

Update manifest.json na <link rel="apple-touch-icon"> kwa iOS

5️⃣ Hatua 5 – Kufanya Website Iwe Installable

Hakikisha HTTPS, manifest na sw.js active

Create button:

<button id="installAppBtn">Install App</button>


JS handle install:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => { e.preventDefault(); deferredPrompt=e; installAppBtn.style.display='block'; });
installAppBtn.addEventListener('click', async () => { deferredPrompt.prompt(); deferredPrompt=null; installAppBtn.style.display='none'; });

6️⃣ Hatua 6 – Testing PWA

Android: Chrome → Add to Home Screen → test offline

PC: Chrome/Edge → Install → test offline

iOS: Safari → Share → Add to Home Screen

7️⃣ Hatua 7 – Kuweka App Play Store (Optional)

Tumia PWABuilder.com → generate APK

Test APK

Upload kwenye Google Play Console → Free → Submit

8️⃣ Hatua 8 – Kulinda App kwa Login

Pages: login.php, dashboard.php, logout.php

PHP session + password_verify()

Redirect user asiyelogin → login.php

session_start();
if(!isset($_SESSION['user_id'])){header("Location: login.php"); exit;}

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming: https://www.faulink.com/excel_mifumo.php

📲 WhatsApp kwa msaada: https://wa.me/255693118509