My PWA Add To Homescreen banner works perfectly in desktop but it is not working in android mobile
Here is my manifest.json file
{
"short_name": "SK",
"name": "SK App",
"description": "Make Your Shop Online.",
"icons" : [
{
"src" : "admin_shop_img/ai.png",
"type" : "image/png",
"sizes" : "192x192"
},
{
"src" : "admin_shop_img/ai.png",
"type" : "image/png",
"sizes" : "512x512"
}
],
"start_url": "/admin_area/details2.php?shop_id=6",
"background_color" : "#3367D6" ,
"display": "standalone" ,
"theme_color" : "#3367D6"
}
And Here is my sw.js
self.addEventListener('fetch', function(event) {});
self.addEventListener('install', evt => {
console.log('service worker has been installed');
});
self.addEventListener('fetch', (e) => {
console.log(e.request.url);
e.respondWith(
caches.match(e.request).then((response) => response || fetch(e.request)),
);
});index.js
// Register service worker to control making site work offline
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('sw.js')
.then(() => { console.log('Service Worker Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', () => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
<button class="add-button" style="">Add To Home Screen</button>
Kindly Help me with this
I don't understand that what problem is coming. I am new to PWA When I am opening this in desktop the a2hs banner is showing and working properly but it is not showing in mobile devices .