Chrome not showing "add to homescreen" in my PWA

Question

I followed Google's first PWA tutorial and created my own project https://my-pwa-77d8a.firebaseapp.com. Everything looks fine:

• The project has a manifest.json file
• I'm using HTTPS on Firebase
• The code has the <meta name="mobile-web-app-capable" content="yes"> tag
• My manifest.json file contains: icons specs, name, short_name, start_url
• I'm using Vue.js as my main framework and all the rest was built with vanilla JS
• The service worker is set and running without errors
• The console shows no erros

manifest.json

  {
    "short_name": "PizzaApp",
    "name": "My delicious PWA",
    "icons": [
      {
        "src": "img/launcher-icon-2x.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      {
        "src": "img/launcher-icon-3x.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "img/launcher-icon-4x.png",
        "sizes": "192x192",
        "type": "image/png"
      }
    ],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait"
  }

I can manually add to homescreen both from mobile and desktop. But Chrome never shows the add to homescreen banner. What is wrong?

SOLVED

As pointed bellow, my service worker was trying to cache a missing offline.html file. I created the file, cleared the phone's cache and everything worked fine.

Answer 1

The problem is that your offline.html file (https://my-pwa-77d8a.firebaseapp.com/offline.html) is returning 404.