Progressive web application - not honouring screen orientation

Question

My web app is not honouring the orientation set in my manifest.json:

{
  "manifest_version": 2,
  "version": "1",
  "name": "My App",
  "short_name": "My App",
  "icons": [
    {
      "src": "img/myapp/launcher-icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "theme_color": "#43c1b1",
  "background_color": "#43c1b1",
  "start_url": "/myapp",
  "scope": "/myapp",
  "orientation": "landscape",
  "display": "standalone"

}

Everything else works - the icons and the background colour so why would there be a problem forcing landscape?

Chrome (on mobile) v 57.0.2987

Thanks

Answer 1

Your original manifest.json is correct but it only works on Chrome Canary (version 59) but not on Chrome Stable (version 57).

I was unable to find any mention of it in the release logs though.

Answer 2

I think you are doing it right. Based on this page, you can enforce a specific orientation, which is advantageous for apps that work in only one orientation by using this "orientation": "landscape".

Try to place first the display before the orientation like in this example.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}