Jinsi ya Kutengeneza Push Notifications kwa PWA

Jifunze jinsi ya kuongeza push notifications kwenye Progressive Web App (PWA) yako ili kufikia watumiaji moja kwa moja, hata wakiwa offline au kwenye home screen. Push notifications hufanya app yako kuwa interactive na inahimiza user engagement.

Mfano wa Code (Service Worker + Push Notifications):

Service Worker (sw.js)

self.addEventListener('push', event => {
const data = event.data ? event.data.json() : { title: 'Mfano PWA', body: 'Ujumbe mpya umetumwa!' };

const options = {
body: data.body,
icon: '/icons/icon-192x192.png',
badge: '/icons/icon-72x72.png'
};

event.waitUntil(
self.registration.showNotification(data.title, options)
);
});

self.addEventListener('notificationclick', event => {
event.notification.close();
event.waitUntil(
clients.openWindow('/') // redirect user on click
);
});


Register Service Worker na Subscribe kwa Push (script.js)

if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('/sw.js')
.then(reg => {
console.log('Service Worker Registered', reg);
return reg.pushManager.getSubscription()
.then(sub => {
if (sub === null) {
return reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
});
}
});
})
.catch(err => console.error('Service Worker Registration Failed', err));
}

// Helper function to convert VAPID key
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64);
return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
}


Maelezo ya Code:

self.addEventListener('push') inashughulikia push event na kuonyesha notification.

notificationclick inashughulikia click kwenye notification.

PushManager.subscribe() inasajili user kwa push notifications, na VAPID key inahakikisha security.

VAPID keys zinapatikana kutoka server yako (Node.js, PHP, au Python) au service provider kama Firebase Cloud Messaging.

Requirements:

Lazima PWA yako iwe HTTPS.

Lazima uwe na Service Worker na manifest.json sahihi.

VAPID keys lazima ziwe sahihi ili notifications zifanye kazi.

🔗 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