PWA not opening in full screen mode on iphone/ipad

问题

I went through several articles related to PWA on ios but still not able to figure out why I am seeing address bar after adding an app to the home screen. I would be glad if someone could help me with this.

meta tags in my index file

  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="manifest" href="./assets/manifest.json">
  <meta name="theme-color" content="#ffffff">

Manifest File

{
    "short_name": "Dashboard",
    "name": "Dashboard",
    "icons": [
      {
        "src": "logo.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "start_url": "/home",
    "display": "standalone",
    "theme_color": "#000",
    "background_color": "#000"
  }

回答1:

In case anyone stumble on this article. As of 04-2020 iOS does not read the manifest file to set the PWA screen mode. Instead one needs to add their meta tags:

<meta name="apple-mobile-web-app-capable" content="yes">

For viewing the app in full screen mode. And:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

For setting the status bar the same color as page <body>. There are other options available: black and white.

来源：https://stackoverflow.com/questions/53061258/pwa-not-opening-in-full-screen-mode-on-iphone-ipad

标签

javascript

ios

iphone

mobile-safari

progressive-web-apps