title: How to get "add to homescreen" banner to display on mobile browsers for my PWA?
body: <p>I have been trying to get a very basic PWA that plays with an api to work.</p>
  
  <p>While the PWA <strong>works as expected on my laptop</strong> ( including working offline when added to homescreen), 
  <strong>no install/add to homescreen prompts/banners are seen on mobile</strong>.</p>
  
  <p>The app does not work offline either,on  mobile</p>
  
  <p><strong>This is the service worker code :</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cacheName = 'news';
  
  const staticAssets = [
    './',
    './app.js',
    './styles.css',
    './fallback.json',
  ];
  
  self.addEventListener('install', async function () {
    const cache = await caches.open(cacheName);
    cache.addAll(staticAssets);
  });
  
  self.addEventListener('activate', event =&gt; {
    event.waitUntil(self.clients.claim());
  });
  
  self.addEventListener('fetch', event =&gt; {
    const request = event.request;
    const url = new URL(request.url);
    if (url.origin === location.origin) {
      event.respondWith(cacheFirst(request));
    } else {
      event.respondWith(networkFirst(request));
    }
  });
  
  async function cacheFirst(request) {
    const cachedResponse = await caches.match(request);
    return cachedResponse || fetch(request);
  }
  
  async function networkFirst(request) {
    const dynamicCache = await caches.open('news-dynamic');
    try {
      const networkResponse = await fetch(request);
      dynamicCache.put(request, networkResponse.clone());
      return networkResponse;
    } catch (err) {
      const cachedResponse = await dynamicCache.match(request);
      return cachedResponse || await caches.match('./fallback.json');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>This is the manifest.json file :</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "News",
    "short_name": "News",
    "theme_color": "#2196f3",
    "background_color": "#2196f3",
    "display": "standalone",
    "Scope": "/",
    "start_url": ".",
    "icons": [
      {
        "src": "images/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
      },
      {
        "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"
      }
    ],
    "splash_pages": null
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea on how to get it to work as expected on mobile?</p>