I followed Google's first PWA tutorial and created my own project . 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.

I followed Google's first PWA tutorial and created my own project https://my-pwa-77d8a.firebaseapp.. 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.

• javascript
• google-chrome
• firebase
• vue.js
• progressive-web-apps

Share Follow edited Jun 6, 2017 at 16:09 bodruk asked Jun 6, 2017 at 15:18 bodrukbodruk 3,26288 gold badges3535 silver badges5353 bronze badges 6

• 2 I don't know if it can be the problem, but my-pwa-77d8a.firebaseapp./offline.html is returning 404. – Thomas Orlita Commented Jun 6, 2017 at 15:29
• I've solved the offline.html issue, but it still not showing the banner. – bodruk Commented Jun 6, 2017 at 15:47
• 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 Commented Jun 6, 2017 at 15:59
• 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 Commented Mar 4, 2018 at 20:35
• @Antonio yes.... happened probably after some update...even my pwa doesn't give notification anymore... – Zeeshan Hyder Commented Apr 30, 2018 at 14:16

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

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