0

I am developing a web app with react and want to include my own icon as icon I can click on my iPhone home screen (after clicking "Add to home screen in Safari"). You can find a Beta version here: https://konekto-5gtxy7fpu.now.sh/

I have googled and tried different options for hours but could not fix the problem. Thus, I am looking for your support.

The following is the relevant snippet from the index.html file:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Konekto" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/_icons/apple-icon.png" />
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/_icons/apple-icon-57x57.png"
  sizes="57x57"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-60x60.png"
  sizes="60x60"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-72x72.png"
  sizes="72x72"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-76x76.png"
  sizes="76x76"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-114x114.png"
  sizes="114x114"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-120x120.png"
  sizes="120x120"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-128x128.png"
  sizes="128x128"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-144x144.png"
  sizes="144x144"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-152x152.png"
  sizes="152x152"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-180x180.png"
  sizes="180x180"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-precomposed.png"
/>

<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="%PUBLIC_URL%/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="%PUBLIC_URL%/favicon-16x16.png"
/>
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
    <link
      rel="mask-icon"
      href="%PUBLIC_URL%/safari-pinned-tab.svg"
      color="#5bbad5"
/>

The Manifest.json file looks as follows:

{
  "short_name": "Konekto",
  "name": "Konekto Emergency App",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

I have set up the icons as follows: root directory frontend_mpd/public/icons/

Thus, I would expect the right icon to be shown on the home screen when newly adding it to the iPhone homescreen, but only a screenshot of the app is shown and in the Chrome developer mode -> Application->Installability following is shown: "Downloaded icon was empty or corrupted".

When running it locally, following is shown: App Manifest Local

Thank you very much for your help!

pythonlearner
  • 57
  • 2
  • 11
  • Your host is returning this file as HTML (your index.html). Do a view source. Most odd. Are you sure that you did not save your index.html as the .png? https://konekto-5gtxy7fpu.now.sh/android-chrome-192x192.png – Mathias Jun 17 '19 at 16:57
  • If you open just this file locally with a web browser, does it show the image? If not, if you open that file with a text editor, does it show html? – Mathias Jun 17 '19 at 16:59
  • 1
    What do you mean with "did I save my index.html as the .png"? The fact is that if I open it locally, I cannot test "add to home screen". However, in Chrome Inspect->Application, sometimes it shows the picture next to "icons", but I always get the warning: downloaded item was empty or corrupted – pythonlearner Jun 17 '19 at 18:38
  • If you open just this file locally with a web browser (not with the app), does it show the image? If not, if you open that file with a text editor, does it show html? (android-chrome-192x192.png) – Mathias Jun 17 '19 at 19:15
  • Go to this URL for your image in a web browser and right click>view source. When I do that I see HTML. What do you see? https://konekto-5gtxy7fpu.now.sh/android-chrome-192x192.png – Mathias Jun 17 '19 at 19:19
  • You are right, it opens as html. Do you have an idea why it might be the case that it does not open as png file? – pythonlearner Jun 17 '19 at 20:15
  • Most likely you did a save and used the wrong name. Sounds crazy but I still occasionally do that after decades of programming. – Mathias Jun 17 '19 at 21:36
  • Do you have a .htaccess file on your server? If so, have you changed anything in that? I just took another look this morning and no matter the URL, your website is returning that HTML. i.e. https://konekto-5gtxy7fpu.now.sh/garbage.html – Mathias Jun 18 '19 at 09:40
  • Hm ok I am not sure what you mean. What do I have do differently? Btw I adjusted the text to show what is output when I run it local: "No matching service worker detected. You may need to to reload the page, or check that the service worker for the current page also controls the start URL from the Manufest" – pythonlearner Jun 18 '19 at 09:40
  • I am not sure about the .htaccess file but I just asked my team – pythonlearner Jun 18 '19 at 09:41

0 Answers0