jinsi ya kutengeneza app hatua ya kwanza mpaka ya mwisho for beginners full course

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

: 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 kwa iOS 5️⃣ Hatua 5 – Kufanya Website Iwe Installable Hakikisha HTTPS, manifest na sw.js active Create 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