Kufanya Website Iwe Installable PWA Installation Prompt | HATUA YA 5

Baada ya kuunda manifest.json, service worker, na icons sahihi, website yako inaweza kuwa Progressive Web App (PWA). Sasa tunahitaji prompt ambayo inawawezesha watumiaji kufunga app kwenye home screen yao, kama native app.

1️⃣ Tambua “beforeinstallprompt” Event

Kwa Chrome na browsers zingine zinazounga mkono PWA, tunatumia beforeinstallprompt event kuonyesha prompt:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;

// Show custom install button
const installBtn = document.getElementById('install-btn');
installBtn.style.display = 'block';

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

2️⃣ Ongeza Install Button kwenye HTML
<button id="install-btn" style="display:none; position:fixed; bottom:20px; right:20px; z-index:1000;" class="btn btn-success">
Install App
</button>


Button hii itakuwa visible tu wakati beforeinstallprompt event inatokea.

3️⃣ Hifadhi Service Worker

Hakikisha service worker (sw.js) ime register kwenye script yako:

if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service Worker registered', reg))
.catch(err => console.log('Service Worker not registered', err));
});
}

4️⃣ Kuangalia Install Prompt

Fungua website kwenye Chrome au Edge.

Angalia icon ya + (install) au prompt inayoonyesha “Add to Home Screen”.

Bonyeza Install App.

App yako itakuwa kwenye home screen, splash screen ikionyesha icons sahihi uliyo upload.

5️⃣ Tips

App works offline: Hakikisha una offline fallback page kwenye service worker.

Theme color: Set theme-color kwenye manifest.json ili splash screen ionekane vizuri.

HTTPS: PWA inahitaji site kuwa secure (HTTPS).

🔗 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