Add to Home Screen mini-info bar not showing on some devices - google-chrome

Question

I am trying to implement my first PWA service worker and I have referred only google documentation. For now my manifest.json is complete and the service worker is a simple code as below.
// sw.js
var CACHE_NAME = "MyFirstPWA";
var filesToCache = [
// some css and js files to cache
];
self.addEventListener('install', function (e) {
e.waitUntil(caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(filesToCache);;
}).then(function (e) {
return self.skipWaiting();
}));
});
self.addEventListener('activate', function (event) {
event.waitUntil(caches.keys().then(function (cacheNames) {
return Promise.all(cacheNames.map(function (cacheName) {
return caches.delete(cacheName);
}));
}));
});
self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
return response || fetch(event.request);
}).catch(function (e) {
console.log(e);
}));
});
// Manifest.json
{
"name": "MyFirstPWA",
"short_name": "MyFirstPWA",
"icons": [
{
"src": "/images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/?utm_source=pwa&utm_medium=pwa",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#0054a6",
"background_color": "#ffffff",
"scope": "/",
"splash_pages": null
}
The working status of google's mini-info bar feature as below.
I want to know if I am missing something or have implemented wrongly?
Please suggest.