jifunza kutengeneza app kwa Kuunganisha Manifest + Service Worker Ndani ya Website
Hatua hii ni rahisiโunahitaji tu kuongeza mistari michache kwenye sehemu ya <head> ya website.
๐ ๏ธ 1. Unganisha manifest.json kwenye <head>
Fungua faili la header la website yako (mf. header.php au index.php) kisha ongeza:
<link rel="manifest" href="/manifest.json">
Hii inaiambia browser mahali pa kupata manifest ya app.
๐ ๏ธ 2. Ongeza meta tags muhimu za mobile app
Hizi ni za kuifanya app ionekane kama app halisi ya Android/iOS:
<meta name="theme-color" content="#2b2b2b">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Unaweza kubadilisha rangi ya theme-color kulingana na brand ya Faulink.
๐ ๏ธ 3. Ongeza Icons kwa Apple (iOS)
iOS hai-read icons kutoka manifest, hivyo ongeza:
<link rel="apple-touch-icon" href="/icons/faulink-192.png">
<link rel="apple-touch-icon" sizes="512x512" href="/icons/faulink-512.png">
๐ ๏ธ 4. Register Service Worker (sw.js)
Hii ndiyo inaiwezesha website kuwa offline, kuwa na cache, na kuwa installable.
Weka chini ya <body> au mwisho wa <head>:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(() => console.log("Service Worker Registered"))
.catch((error) => console.log("SW Registration Failed:", error));
}
</script>
โ๏ธ Matokeo ya Hatua Hii
Ukimaliza hatua hii:
โ Manifest itakuwa active
โ Service Worker itasajiliwa
โ Website yako itakuwa installable
โ Android na PC zitaonyesha โInstall Appโ
โ App yako itaanza kufanya caching na offline mode
๐ Muundo sahihi wa mafaili (directory structure)
Ili kufanya kazi vizuri, hakikisha muundo ni huu:
/faulink.com
โโโ index.php
โโโ manifest.json
โโโ sw.js
โโโ /icons
โ โโโ faulink-192.png
โ โโโ faulink-512.png
๐ 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
https://wa.me/255693118509