1

I'm developing a PWA using ReactJs and been trying to solve this issue for two days now but nothing! I have properly added chunks of instructions in package.json. The ionic issue here is that the logo of my app literally shows up on android while adding to the home screen. But, when I'm trying to add the app to the home screen on iOS using safari the logo does not appear! this is becoming frustrating. please help! I have already secured the domain with an SSL certificate (as suggested everywhere) from where the app should be installed, but it did not work. This is my package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://app.mydomain.com"
}

and this is my index.html head:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#f8f9fa"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="myappname">
    <link href="https://cdn.rawgit.com/rastikerdar/vazir-font/v20.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />

    <link rel="shortcut icon" href="{{ url('/images/icons/icon-120×120.png') }}">

<link rel="apple-touch-icon" sizes="72×72" href="{{ url('/images/icons/icon-72×72.png') }}">
<link rel="apple-touch-icon" sizes="96×96" href="{{ url('/images/icons/icon-96×96.png') }}">
<link rel="apple-touch-icon" sizes="120×120" href="{{ url('/images/icons/icon-120×120.png') }}">
<link rel="apple-touch-icon" sizes="128×128" href="{{ url('/images/icons/icon-128×128.png') }}">
<link rel="apple-touch-icon" sizes="144×144" href="{{ url('/images/icons/icon-144×144.png') }}">
<link rel="apple-touch-icon" sizes="152×152" href="{{ url('/images/icons/icon-152×152.png') }}">
<link rel="apple-touch-icon" sizes="167×167" href="{{ url('/images/icons/icon-167×167.png') }}">
<link rel="apple-touch-icon" sizes="180×180" href="{{ url('/images/icons/icon-180×180.png') }}">
<link rel="apple-touch-icon" sizes="192×192" href="{{ url('/images/icons/icon-192×192.png') }}">
<link rel="apple-touch-icon" sizes="384×384" href="{{ url('/images/icons/icon-384×384.png') }}">
<link rel="apple-touch-icon" sizes="512×512" href="{{ url('/images/icons/icon-512×512.png') }}">


<link rel="icon" sizes="72×72" href="{{ url('/images/icons/icon-72×72.png') }}">
<link rel="icon" sizes="96×96" href="{{ url('/images/icons/icon-96×96.png') }}">
<link rel="icon" sizes="128×128" href="{{ url('/images/icons/icon-128×128.png') }}">
<link rel="icon" sizes="144×144" href="{{ url('/images/icons/icon-144×144.png') }}">
<link rel="icon" sizes="152×152" href="{{ url('/images/icons/icon-152×152.png') }}">
<link rel="icon" sizes="192×192" href="{{ url('/images/icons/icon-192×192.png') }}">
<link rel="icon" sizes="384×384" href="{{ url('/images/icons/icon-384×384.png') }}">
<link rel="icon" sizes="512×512" href="{{ url('/images/icons/icon-512×512.png') }}">



    <link rel="manifest" href="./manifest.json"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <title>React App</title>
  </head>
Amir
  • 61
  • 1
  • 5
  • Not a 100% sure, but I would first try removing the angular {{-brakets from your paths. Header/Meta-Tags are usually not within angular context and are therefore not evaluated by the template engine. – Florian Dec 07 '19 at 09:29
  • Also - I don’t think you need the url() syntax - that’s usually an css syntax. – Florian Dec 07 '19 at 09:31
  • Also - for understanding your pwa - not the package.json but the manifest.json would be useful... There is where the important configuration stuff for pwa goes... most likely icons are configured there too. – Florian Dec 07 '19 at 09:40
  • thank you for your response @Florian, I test that didn't work either. It works on Android which is weird. There must be some nasty fix about Safari I believe ... – Amir Dec 07 '19 at 13:11
  • Oop, thanks for the Q. Helped me solve my issue for the icon not showing in my PWA, with a little bit of help from favicon.io – netrules Apr 27 '23 at 02:56

1 Answers1

0

hmm... only thing i can additionally think of maybe your leading '/' if it's a relative path it should be './'. Or that the you don't have the correct size for your device available... this is my pwa head-config tested on iphone 7 and 10 and some IPad. You can try it on https://forgetech.github.io/fg-vlv-pwa/#/anmeldung

<head>
  <meta charset="utf-8">
  <title>MeinVLV</title>
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=5.0">

  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">

  <link rel="apple-touch-icon" sizes="57x57" href="assets/images/application/apple-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="60x60" href="assets/images/application/apple-icon-60x60.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="assets/images/application/apple-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="76x76" href="assets/images/application/apple-icon-76x76.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="assets/images/application/apple-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="assets/images/application/apple-icon-120x120.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="assets/images/application/apple-icon-144x144.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="assets/images/application/apple-icon-152x152.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/application/apple-icon-180x180.png" />

  <!-- https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native -->
  <!-- https://appsco.pe/developer/splash-screens -->
  <!-- https://stackoverflow.com/questions/12643817/ios-iphone-web-app-splash-screen-not-showing-up -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <link href="assets/images/application/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  <link href="assets/images/application/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/application/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/application/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/application/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="assets/images/application/android-icon-192x192.png" />

  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">

  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
</head>

Here's is alos my manifest file: 

{
  "name": "MeinVLV - Github Dev Deployment",
  "short_name": "MeinVlv",
  "theme_color": "#0093c4",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "https://forgetech.github.io/fg-vlv-pwa/",
  "icons": [
    {
      "src": "assets/images/application/pwa-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/images/application/pwa-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Florian
  • 451
  • 3
  • 13
  • Still no fix. I've carefully added all you suggested. I wonder why it works on Android and not iOS though ... – Amir Dec 08 '19 at 22:40
  • 2
    Oh my God! What a silly bug. You ain't gonna believe it! The file to be loaded as the iOS logo should be named properly, [referring to this](https://stackoverflow.com/questions/5110776/apple-touch-icon-for-websites). – Amir Dec 08 '19 at 23:22