A Progressive Web App (PWA) is a modern web technology that turns a regular website into an app-like experience for users.
No need to build separate Android/iOS apps, Cost-effective solution 💰
No need to build separate Android/iOS apps, Cost-effective solution 💰
✔️ Installable
Users can add the website to their home screen like a mobile app
✔️ Fast Performance
Loads quickly and provides a smooth experience
✔️ Offline Support (Optional)
Can work even without an internet connection
✔️ Responsive Design
Works perfectly on mobile, tablet, and desktop
Installation Process
First add in header
<link rel="manifest" href="public/manifest.json">
<meta name="theme-color" content="#0a3d62">
Second add install button
<button class="navbar-toggler text-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
Third Add this script before body close </body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
document.getElementById('installBtn').style.display = 'block';
});
document.getElementById('installBtn').addEventListener('click', () => {
if (deferredPrompt) {
deferredPrompt.prompt();
}
});
</script>
Create 2 new file in public folder
1.manifest.json
{
"name": "Site Name",
"short_name": "Site Name",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0a3d62",
"icons": [
{
"src": "/bootstrap/images/dki.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/bootstrap/images/dki.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
2.service-worker.js
self.addEventListener('install', function (event) {
console.log('[ServiceWorker] Installed');
self.skipWaiting();
});
self.addEventListener('activate', function (event) {
console.log('[ServiceWorker] Activated');
});
self.addEventListener('fetch', function (event) {
return; // no caching, no offline
});