Baada ya kuunda manifest.json na sw.js, sasa tunaviunganisha kwenye website yako ili Faulink.com iwe Progressive Web App (PWA) inayoweza ku-install kwenye simu au kompyuta.

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