CODEWITHSUNDEEP
reactjsmanifestprogressive-web-apps
Stan Hurks
Stan Hurks

Reputation: 1952

PWA display standalone not working

I am new to PWA (progressive web applications) and I've stumbled upon the following: I can not seem to use the display property of the manifest.json file.

When adding the app to my home screen on my iPhone the application is displayed in the safari browser with the URL showing rather than being a standalone application.

When (for example) I go to pokedex.org and add that to my homescreen, the application is displayed as a standalone application (no URL-bar).

I have tried using ngrok.io to host my application using https:// outside of my localhost and it isn't working on that either.

I have tried the developers tools on safari to reset the cache on my iPhone, so it is definitely not caused by cache issues.

The application tab in google chrome is saying that this should be a stand-alone application and is displaying the correct logos / favicons.

The application I am testing for this is built using create-react-app.

Manifest.json

{
    "short_name": "[hidden]",
    "name": "[hidden]",
    "description": "[hidden]",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "favicon/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "favicon/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "favicon/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "favicon/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "favicon/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "favicon/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ],
    "start_url": "./index.html",
    "display": "standalone",
    "orientation": "portrait",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="mobile-wep-app-capable" content="yes">
    <meta name="apple-mobile-wep-app-capable" content="yes">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#000000">
    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="%PUBLIC_URL%/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>[Hidden]</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Upvotes: 3

Views: 7549

Answers (3)

Ognian Apostolov
Ognian Apostolov

Reputation: 1

I am guessing you are using ionic with angular for your PWA - here's how to fix your issue.

Inside your app routing module set useHash to true:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })
  ],
  exports: [RouterModule]
})

Then, just make sure you use # in your start_url inside the manifest

https://your-domain/#/your/path

Let me explain why this works, and why you might be experiencing this issue.

Your start URL is the point of reference for the browser, and by changing it, the browser thinks you are opening in-app links. By using hash, you are basically making sure the URL seems the same to the browser. However, in order to run it in standalone or fullscreen display, you need to change the point of reference to the one with the hash "/#" inside your manifest.json.

Upvotes: 0

Julian Dormon
Julian Dormon

Reputation: 1779

I hand the same problem. I found that I needed to add the apple metatags and then the manifest.json file after those.

Upvotes: 0

Stan Hurks
Stan Hurks

Reputation: 1952

The problem seemed to be the usage of:

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

There was a typo in web-app: wep-app.

Upvotes: 4

Related Questions