6

So my setup is the following:

  • A static website (mkdocs) deployed at https://sub.domain.com/folder/ in Azure Blob storage, running on Kestrel.
  • testing locally at localhost:port without a subdomain and folder.
  • <link rel="manifest" type="application/manifest+json" href="manifest.json" crossorigin="use-credentials"> and file is in /folder/ in deployed state, in root in local test.
  • <script type="text/javascript" src="sw.js"></script> and file is in /folder/ in deployed state, in root in local test.
  • start_url in manifest is /folder/.
  • icon path in manifest is assets/icons/icon.png, assets is in /folder/ in deployed state, in root in local test.

locally the icons work but on the deployed site I get:

Icon https://sub.domain.com/folder/assets/icons/icon.png failed to load

When I go to that URL directly, the file loads just fine.

The site is behind auth but I use crossorigin="use-credentials" when loading the manifest.

Full manifest.json:

{
    "short_name": "Site Hub",
    "name": "Site Hub",
    "start_url": "/docs/?utm_source=web_app_manifest",
    "icons": [
        {
            "src": "assets/icons/manifest-icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "assets/icons/manifest-icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "display": "standalone",
    "orientation": "portrait",
    "theme_color": "#20232A",
    "background_color": "#20232A"
}

I have tried paths like ./assets/icons/manifest-icon-512.png" before and it did not work either.

Stan
  • 121
  • 2
  • 8
  • `Icon https://sub.domain.com/folder/assets/icons/icon.png failed to load` As that is the correct URL, that suggests that you have the relative path correct and the error is something else. My guess is that the issue is not related to MkDocs directly but I don't know what it would be. Have you tried using a third party server locally to simulate your production server? – Waylan Dec 31 '19 at 21:36
  • It is definitely not mkdocs related, I think it fails because the site is behind auth. If I use direct links to something like imgur, it works. I don't know how to make the manifest itself fetch icons behind auth correctly but having the manifest load with crossorigin does not seem to be enough. – Stan Dec 31 '19 at 23:28
  • Did this every get solved? – Michael Paccione Aug 01 '20 at 02:23
  • nope, sadly not. The site is no longer behind a login gate, so now it works but the original issue is still a thing. – Stan Aug 02 '20 at 06:56
  • Is there any solution? – McLotos Mar 07 '23 at 13:00

2 Answers2

1

I had a similar problem and was investigating the cause. As a result, removing the following headers solved the problem.

add_header Cross-Origin-Resource-Policy "same-origin";

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)

Damian Hayden
  • 11
  • 1
0

You should probably use the homepage option in your package.json for you app to know that it's deployed at https://sub.domain.com/folder.

Like this:

...
"homepage": "https://sub.domain.com/folder",
...
  • It's not a node app, it's mkdocs and the `site_url` is set to `https://sub.domain.com/folder/` there. – Stan Dec 29 '19 at 15:53