Jinsi ya Kutengeneza Add to Home Screen Feature

Jifunze jinsi ya kuongeza “Add to Home Screen (A2HS)” feature kwenye website yako kama Progressive Web App (PWA). Hii inaruhusu watumiaji kuongeza website yako kama app kwenye home screen yao, na kupata app-like experience bila Play Store au App Store.

Mfano wa Code:

let deferredPrompt;
const addBtn = document.createElement('button');
addBtn.textContent = "Add to Home Screen";
addBtn.style.display = 'none';
document.body.appendChild(addBtn);

// Listen for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent default mini-infobar
e.preventDefault();
deferredPrompt = e;
addBtn.style.display = 'block'; // Show custom button
});

// Handle button click
addBtn.addEventListener('click', async () => {
addBtn.style.display = 'none';
deferredPrompt.prompt(); // Show install prompt
const { outcome } = await deferredPrompt.userChoice;
console.log(`User response: ${outcome}`);
deferredPrompt = null;
});


Maelezo ya Code:

beforeinstallprompt event inatokea wakati browser inaridhia A2HS.

Tunazuia default prompt na kuonyesha custom button.

deferredPrompt.prompt() inaonyesha prompt halisi kwa user.

userChoice inarudisha result (accepted au dismissed) kwa analytics au feedback.

Requirements za A2HS:

Website lazima iwe served over HTTPS.

Lazima iwe na manifest.json sahihi.

Lazima iwe na service worker kwa offline support.

🔗 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