CODEWITHSUNDEEP
htmlangularprogressive-web-appsmanifest.json
Rik
Rik

Reputation: 342

Why is my Angular PWA standalone display not working in Chrome on Android?

I am currently working on an Angular PWA, but for some reason the display="standalone" setting doesn't seem to be working for Chrome on Android. My settings are the following:

index.html

<!-- Manifest /PWA -->
<link rel="manifest" href="manifest.json">
<meta name="msapplication-config" content="/assets/browserconfig.xml">
<link rel="shortcut icon" href="favicon.ico">

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#003865">

<meta name="apple-mobile-web-app-title" content="">
<meta name="application-name" content="">
<meta name="msapplication-TileColor" content="#003865">
<meta name="theme-color" content="#003865">

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

manifest.json

{
"name": "",
"short_name": "",
"description": "",
"icons": [{
  "src": "assets/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "assets/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "assets/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "assets/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  },
  {
    "src": "/assets/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/assets/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#003865",
  "theme_color": "#003865"
}

I just can't seem to find out why this is since everything does work as expected in Safari and Samsung Internet. Is there somebody who can help me figure out what the problem is?

Cheers!

Edit: I forgot to mention I already used the LightHouse tool in Chrome and it returned a 100% score for the PWA, so I imagine that can't be the problem.

Upvotes: 1

Views: 3572

Answers (2)

Rik
Rik

Reputation: 342

So I have been able to solve this by using this answer: https://stackoverflow.com/a/51706405/5798882

It seems that the default port of :443 needs to be used when deploying, otherwise the PWA won't open as a standalone display.

Upvotes: 3

Rajat Badjatya
Rajat Badjatya

Reputation: 818

The manifest and tags which you have used seem right to me. I would suggest your can further give a try by doing the following things:

  1. Adding one more 144*144 icons in your manifest.

  2. Try to diagnose your issue by using "Audits" (lighthouse) available from the Chrome Dev Tools Audits tab.

    Try to run the "Progressive Web App" mobile audit, the results should give you a clue for what you needs to fix.

  3. If your are in proxy try to run the app outside the proxy env.

Upvotes: 0

Related Questions