3

This is what I have in my head section of index.html:

<head>
  <meta charset="utf-8">
  <title>MeasurementProtocols</title>
  <base href="/index.html">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/icons/apple/touch-icon-ipad.png">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest"  crossOrigin="use-credentials" href="manifest.json">
  <link rel="apple-touch-icon" href="./assets/icons/apple/touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="120x120" href="./assets/icons/apple/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="152x152" href="./assets/icons/apple/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple/touch-icon-ipad-retina.png">
  <meta name="theme-color" content="#1976d2">
</head>

If I want to add the webpage to homescreen via an Apple device, the iPhone would take a screenshot as icon, although I added the icons to the index.html as apple describes it on: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

So what am I missing, or does it not work with having href directed to assets and not the mainfolder?

8
  • Are you using HTTPS for your test? It is nessesary for iOS.
    – Hannes
    Dec 11, 2018 at 9:33
  • @Hannes no, iOS does not use icons from manifest, as I have read it before. Tell me if I am wrong Dec 11, 2018 at 9:35
  • I know but for your links in your header to work your page have to be transferred via https not via http. Are you using https?
    – Hannes
    Dec 11, 2018 at 9:37
  • @Hannes I am using https, yes Dec 11, 2018 at 9:37
  • And you are using safari and no other browser on your iOS-Device?
    – Hannes
    Dec 11, 2018 at 9:41

3 Answers 3

3

PWA with Icons don't work with authentication on a Webserver on iOS. Solution is to remove the Authentication.

2
  • what does that mean???? If my application is using a login screen that authenticates with a server then no icons will show???? Feb 27, 2020 at 12:48
  • I think when you will create your own authentication for your website it should work. With BASIC or Digest Authentication you will have the described problem.
    – Hannes
    Feb 27, 2020 at 13:52
2

While iOS 11.3 does support web app manifests, it does not yet support specifying icons this way. You'll want to include it in your manifest for other devices, but at least for now you'll have to use the following for iOS:

<link rel="apple-touch-icon" sizes="180x180" href="icon.png">

Specify the icon size, and include a URL.

Learn more at Apple's documentation here

There is also a website to automate the process linked here

0
0

Expanding on Hannes answer

PWA with Icons don't work with authentication on a Webserver on iOS

One possible fix is to allow anonymous access to JUST the icons.

Example with Azure Easy Auth:

  1. Create rule file in your public/wwwroot:

Note: This feature, URL Authorization Rules, was a preview feature that may be unsupported/deprecated moving forward (>=2021-04). Unclear what the replacement is, if any.

authorization.json

{
  "routes": [
    {
      "path_prefix": "/",
      "policies": {
        "unauthenticated_action": "RedirectToLoginPage"
      }
    },
    {
      "path_prefix": "/img/icons",
      "policies": {
        "unauthenticated_action": "AllowAnonymous"
      }
    }
  ]
}
  1. Switch your Azure Authentication setting to: "Allow Anonymous Requests (no action)" Allow Anonymous Requests (no action)

This should now allow your icons to show up when saving the page to homescreen on iOS device, but not allowing the rest of the app to be accessible prior to login.

Minor Note: Since all requests now default to "Allow Anonymous Requests (no action)", its important you have the catch all rule of "path_prefix": "/" - without it your whole app would be public. Since this feature (at least in Azure Web Auth) uses longest-prefix matching, order shouldn't matter and you should be able to craft the rules with either whitelist or blacklist approach.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.