Chrome not showing "add to homescreen" in my PWA

6
votes

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 Service Worker

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.

1
javascriptgoogle-chromefirebasevue.jsprogressive-web-apps
I don't know if it can be the problem, but my-pwa-77d8a.firebaseapp.com/offline.html is returning 404. – Thomas Orlita
I've solved the offline.html issue, but it still not showing the banner. – bodruk
It worked! I've created the offline.html, cleared my phone's cache then the browser showed the banner. Post your answer and I'll accept it. – bodruk
I have this problem! I have the site served in https, I have a manifest.json and I have a service-worker being instantiated (it empty but that shouldn't be the problem) but it fails to prompt users to add to the homescreen. If I go to the browser settings in my phone and add it to homescreen it works but it doesn't prompt the users? Anyone has any clue? I have no errors at all...What could it be? – António Quadrado
@Antonio yes.... happened probably after some update...even my pwa doesn't give notification anymore... – Zeeshan Hyder

1 Answers

2
votes

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