PWA manifest not recognized - help with debugging issue

Ionic Framework ionic-v3
1

I have an app that I’m serving from http://reapbenefit-fbdb.appspot.com/ - served using appengine. As you would be able to see, the app is getting served. I am also able to access individual files like:
http://reapbenefit-fbdb.appspot.com/manifest.json and
the icon image at reapbenefit-fbdb.appspot.com/img/icon.png

It seems to be setup correctly but on my mobile phone it doesn’t seem to have an of the supposed effects of PWA like:

  • theme is not changing
  • on clicking “Add to Home Screen” from my mobile phone, the icon is just a default icon and not the one I set (img/icon.png)
  • … also the name given is a default like Home instead of what I’ve specified in the manifest.json

Could you give me any direction on what I might be doing wrong?

p.s. For easy reference, my manifest file is so:

{
    lang: "en",
    theme_color: "#87bf40",
    background_color: "#dddddd",
    name: "ReapBenefit",
    short_name: "ReapBenefit",
    display: "standalone",
    start_url: "/index.html",
    orientation: "portrait",
    icons: [
        {
            src: "img/icon.png",
            sizes: "90x90",
            type: "image/png"
        }
    ]
}
2

For PWAs to function they have to be served over HTTPS, so change to https://reapbenefit-fbdb.appspot.com/
Also you manifest.json is not valid JSON, add quotes like so:

{ "lang": "en", "theme_color": "#87bf40", "background_color": "#dddddd", "name": "ReapBenefit", "short_name": "ReapBenefit", "display": "standalone", "start_url": "/index.html", "orientation": "portrait", "icons": [{ "src": "img/icon.png", "sizes": "90x90", "type": "image/png" }] }

There is a tool called Lighthouse ( https://github.com/GoogleChrome/lighthouse ) to diagnose PWAs. See the corresponding talk from PWA Dev Summit 2016: https://www.youtube.com/watch?v=LZjQ25NRV-E&feature=youtu.be&list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb

1 Like
3

Thank you for the chrome extension. I didn’t know about that.

Thanks to the tool I figured out a few issues:

  • manifest wasn’t found. I hadn’t added a link to the index.html.
  • images weren’t required sizes ( I didn’t have a 192px icon)

Resolving them made it work. Thank you @tomkuipers.

p.s. meanwhile, the json is in the format you mentioned but I copied it from a chrome extension instead of my code editor which removed the quotes around the member variables.
The app is automatically available over https also. (Lighthouse also shows it as green)