Kuunganisha Manifest + Service Worker ndani ya Website | HATUA YA 3
Baada ya kutengeneza manifest.json na sw.js, hatua inayofuata ni kuhakikisha zote zinajumuishwa kwenye website yako kwa usahihi. Hii itawawezesha watumiaji “install” app yako kwenye simu zao kama PWA na kufanya offline caching.
1️⃣ Link Manifest kwenye <head> ya HTML
Fungua index.html yako na ongeza link hii ndani ya <head>:
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0d6efd">
theme-color inaweka rangi ya header kwenye browser na splash screen wakati app imeinstall.
2️⃣ Register Service Worker
Kama Hatua ya 2, hakikisha sw.js inasajiliwa kwenye script yako:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(err => {
console.log('Service Worker registration failed:', err);
});
});
}
</script>
Hii inaunda bridge kati ya browser na service worker, ikihakikisha caching inafanya kazi.
3️⃣ Manifest Example (manifest.json)
Hapa ni mfano wa manifest.json ya Faulink-style website:
{
"name": "Faulink Official",
"short_name": "Faulink",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0d6efd",
"description": "Faulink Official Website – Jifunze Web Design & Programming",
"icons": [
{
"src": "/images/icons-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Hii inaweka jina, icon, theme, na startup page ya app.
4️⃣ Test PWA Installation
Fungua website yako kwenye Chrome/Edge.
Angalia Install prompt au icon ya “+” kwenye address bar.
Install app kwenye device.
Funga internet na fungua app kuona kama bado inafanya kazi (offline).
🔗 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
1️⃣ Link Manifest kwenye <head> ya HTML
Fungua index.html yako na ongeza link hii ndani ya <head>:
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0d6efd">
theme-color inaweka rangi ya header kwenye browser na splash screen wakati app imeinstall.
2️⃣ Register Service Worker
Kama Hatua ya 2, hakikisha sw.js inasajiliwa kwenye script yako:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(err => {
console.log('Service Worker registration failed:', err);
});
});
}
</script>
Hii inaunda bridge kati ya browser na service worker, ikihakikisha caching inafanya kazi.
3️⃣ Manifest Example (manifest.json)
Hapa ni mfano wa manifest.json ya Faulink-style website:
{
"name": "Faulink Official",
"short_name": "Faulink",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0d6efd",
"description": "Faulink Official Website – Jifunze Web Design & Programming",
"icons": [
{
"src": "/images/icons-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Hii inaweka jina, icon, theme, na startup page ya app.
4️⃣ Test PWA Installation
Fungua website yako kwenye Chrome/Edge.
Angalia Install prompt au icon ya “+” kwenye address bar.
Install app kwenye device.
Funga internet na fungua app kuona kama bado inafanya kazi (offline).
🔗 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