Jinsi ya Kufahamu Progressive Web Apps | PWA

Jifunze kuhusu Progressive Web Apps (PWA) – teknolojia inayowezesha websites kufanya kazi kama native apps kwenye simu na desktop. PWA hutoa features kama offline access, push notifications, na app-like experience, bila kuhitaji kupakua app kutoka Play Store au App Store.

Misingi ya PWA:

Manifest File (manifest.json)
Hii inafafanua app metadata: jina, icons, theme color, na start URL.

{
"name": "Mfano PWA",
"short_name": "PWA",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3498db",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}


Service Worker (Offline Functionality)
Hii inahifadhi resources kwenye cache ili app ifanye kazi hata bila internet.

// service-worker.js
const cacheName = 'mfano-pwa-cache-v1';
const assets = [
'/',
'/index.html',
'/style.css',
'/script.js',
'/icons/icon-192.png'
];

self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName).then(cache => cache.addAll(assets))
);
});

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});


Register Service Worker

// script.js
if('serviceWorker' in navigator){
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker Registered', reg))
.catch(err => console.log('Service Worker Registration Failed', err));
});
}


Manufaa ya PWA:

Inafanya website yako fast na responsive.

Ina uwezo wa kufanya kazi offline.

Inatoa app-like experience na push notifications.

Rahisi kusambaza bila app store.

🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

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