[Bug]: PWA Icon Doesn't Display When Using Reverse Proxy

[louisefindlay23]

Is there an existing issue for this?

• [X] I have searched the existing issues

OS/Web Information

• Web Browser: Safari
• Local OS: iPadOS 15.5
• Remote OS: Libreelec (Linux Server Docker)
• Remote Architecture: x86_64
• code-server --version: v4.4.0

Steps to Reproduce

1. Reverse Proxy code-server
2. Open code-server via the proxied subdomain on an iPad using Safari
3. Tap the Share Button
4. Press Add to Home Screen

Expected

The home screen icon should resemble the favicons in the favicon folder

Actual

See the home screen icon which is a screenshot of the VS Code workbench (current page view)

Logs

No response

Screenshot/Video

Does this issue happen in VS Code?

• [X] I cannot reproduce this in VS Code.

Are you accessing code-server over HTTPS?

• [X] I am using HTTPS.

Notes

Tried to add favicon routes using Nginx but that didn't work either.

[jsjoeio]

I don't know how we would fix this? 🤔 Do you?

[jsjoeio]

Does this happen with any site that is reverse proxied or just code-server?

[louisefindlay23]

Does this happen with any site that is reverse proxied or just code-server?

No, only some. Organizr, Pihole and Calibre-Web display the favicon correctly when adding to the homescreen. Home Assistant and code-server don't.

[jsjoeio]

Interesting...did you file an issue with Home Assistant too? Curious what they said

[louisefindlay23]

No, I haven't but have just done so. Will let you know what they say.

[jsjoeio]

Do you mind linking the issue here?

[louisefindlay23]

Sure: https://github.com/home-assistant/frontend/issues/12931

[icui]

Have you signed with services like Let's Encrypt? I think iOS will not load the icon if you manually trust the certificate (like the default certificate).

[louisefindlay23]

Have you signed with services like Let's Encrypt? I think iOS will not load the icon if you manually trust the certificate (like the default certificate).

I have my reverse proxy signed with Let's Encrypt but code-server is HTTP.

[bilogic]

This is likely an issue with Safari and PWA standards. My android 11 app and home screen shows the same icon as per favicon in Chrome browser.

Is there anyway to customize the name and favicon of the PWA? (or should I open a new feature issue?)

[jsjoeio]

@bilogic no there isn't at the moment!

[code-asher]

I am going through old issues, is this still a problem? I have no iPad to test, but maybe there is some PWA icon path we are missing in the manifest or something.

[bilogic]

Hmm, if manifest is the issue, then nothing to do with reverse proxy. Should modify the title to reflect that if confirmed.

[code-asher]

This is interesting, if I put code-server behind a reverse proxy and a base path and check the manifest in Chromium, it tells me the icons failed to load. And yet if I open the icons directly in my browser, the images load just fine. Very confusing.

If I access code-server directly on localhost, I get no errors.

[bilogic]

I'm on PWA using reverse proxy too and my favicons are all good, should be due to some missing configuration. This is my full config on Apache and I have forgotten how complicated it was:

Header always set Strict-Transport-Security "max-age=63072000; includeSubdomains;"
RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.*) ws://127.0.0.1:8001/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.*) http://127.0.0.1:8001/$1 [P,L]
ProxyPreserveHost on
ProxyRequests off
ProxyPass / http://127.0.0.1:8001/ nocanon
ProxyPassReverse / http//127.0.0.1:8001

[bilogic]

1. The cause might be the Start URL, github has a / instead of .
2. Should we be concerned about the Errors and warnings?

[code-asher]

Oh interesting. Maybe it only happens if you serve at some base path (like domain.tld/code-server/) and not at the root?

I thought a relative URL for the start URL was allowed, but maybe it is causing issues.

I am not sure about the other warnings...from what I have read, you can still install the PWA, but it just will not use the richer fancier-looking dialog.

[bilogic]

@code-asher are you or @louisefindlay23 serving on a path?

I think the warning is saying code-server has to add a screenshot or something, otherwise richer UI is unavailable.

[code-asher]

@code-asher are you or @louisefindlay23 serving on a path?

Yeah I am, not sure about @louisefindlay23 though.

I think the warning is saying code-server has to add a screenshot or something, otherwise richer UI is unavailable.

That sounds right to me. It would be nice to support the richer UI, but this is probably not causing any bugs at least.

[bilogic]

What is the URL of your manifest.json?

I think the browser is not translating ./_static/src/browser/media/pwa-icon-192.png to something else other than https://dev.coder.com/@code-asher/dev27.dev/apps/code-server/_static/src/browser/media/pwa-icon-192.png, that will explain why you can load the image, but not see it in code-server.

There are probably more details in either console or network tab

My manifest.json

{
  "name": "VSC",
  "short_name": "VSC",
  "start_url": ".",
  "display": "fullscreen",
  "display_override": [
    "window-controls-overlay"
  ],
  "description": "Run Code on a remote server.",
  "icons": [
    {
      "src": "./_static/src/browser/media/pwa-icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "./_static/src/browser/media/pwa-icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

[code-asher]

Mine is the same other than the name. Makes sense though since it is all relative URLs:

{
  "name": "code-server",
  "short_name": "code-server",
  "start_url": ".",
  "display": "fullscreen",
  "display_override": [
    "window-controls-overlay"
  ],
  "description": "Run Code on a remote server.",
  "icons": [
    {
      "src": "./_static/src/browser/media/pwa-icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "./_static/src/browser/media/pwa-icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Nothing in the console stands out to me unfortunately:

Navigated to https://dev.coder.com/@code-asher/dev27.dev/apps/code-server/?folder=%2Fhome%2Fcoder%2Fcoder
INFO Resolving connection token (dev.coder.com)...
INFO Resolved connection token (dev.coder.com) after 4 ms
INFO Creating a socket (renderer-Management-143bf21f-26c0-4551-9a05-d5d04c691522)...
INFO Creating a socket (renderer-Management-143bf21f-26c0-4551-9a05-d5d04c691522) was successful after 509 ms.
GET https://dev.coder.com/@code-asher/dev27.dev/apps/code-server/stable-9a28bc29dbddb6886dfe03dc1c31320249a901ce/static/out/vsda_bg.wasm 404 (Not Found)
GET https://dev.coder.com/@code-asher/dev27.dev/apps/code-server/stable-9a28bc29dbddb6886dfe03dc1c31320249a901ce/static/out/vsda.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'https://dev.coder.com/@code-asher/dev27.dev/apps/code-server/stable-9a28bc29dbddb6886dfe03dc1c31320249a901ce/static/out/vsda.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
The web worker extension host is started in a same-origin iframe!
INFO Creating a socket (renderer-ExtensionHost-0d2f58fc-1fe5-4bf1-9a7b-78f5eaaf0aef)...
INFO [Service Worker] registered
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
INFO Creating a socket (renderer-ExtensionHost-0d2f58fc-1fe5-4bf1-9a7b-78f5eaaf0aef) was successful after 501 ms.
INFO Updating additional builtin extensions cache

The weird thing to me is, Chromium must be resolving the icon URL correctly, because the URL printed in the error is the right one. Yet it still cannot load it for some reason. Unless the URL it prints and the URL it actually tries to load are different... :thinking:

Firefox loads the icon without any issues, so maybe this is a Webkit bug.

[code-asher]

Oh yeah I checked the network tab too, there are no failed requests for those icons. :confused: There is a successful request for pwa-icon-192.png though.

[bilogic]

Oh yeah I checked the network tab too, there are no failed requests for those icons. 😕 There is a successful request for pwa-icon-192.png though.

In dev console, go to application and unregister the service worker, and load your code-server again. I think the icons are loaded only once, and that is during registration of the service worker.

[louisefindlay23]

@code-asher are you or @louisefindlay23 serving on a path?

Yeah I am, not sure about @louisefindlay23 though.

I think the warning is saying code-server has to add a screenshot or something, otherwise richer UI is unavailable.

That sounds right to me. It would be nice to support the richer UI, but this is probably not causing any bugs at least.

Yes, I'm serving on a path.

[code-asher]

In dev console, go to application and unregister the service worker, and load your code-server again. I think the icons are loaded only once, and that is during registration of the service worker.

I was hopeful but I tried a few times and nothing changed. :cry: I also tried the "bypasss for network" option. I also have the "disable cache" option checked in the network tab.

https://github.com/coder/code-server/assets/45609798/83b1252c-ad82-4fa8-bbcd-2052797569ab

[bilogic]

How about we try serving on root first? To possibly narrow down the culprit: Browser? code-server Manifest? Or VSCode?

Also side track, @jsjoeio would you so kind as to help review this https://github.com/microsoft/vscode/pull/207721? It needs some community reviews from existing contributors.. thank you!

[bilogic]

@code-asher

The problem description here seems to match https://stackoverflow.com/questions/59520750/manifest-json-failing-to-load-icon-files

But I don't see code-server sending the Cross-Origin-Resource-Policy header causing it

[code-asher]

How about we try serving on root first

Yeah, no errors if I serve from root.

Since it only happens on Chromium it does seem like a Webkit bug but who knows. :shrug:

But I don't see code-server sending the Cross-Origin-Resource-Policy header causing it

Hmm yeah I am not seeing that either.

[bilogic]

@code-asher don't mind are you currently a vscode contributor? I need a review here https://github.com/microsoft/vscode/pull/207721 and could use some votes here https://github.com/microsoft/vscode/issues/201452.. thanks in advance!

I think an easier way out that everyone can chip in is to find another PWA that works on a path and can show icons correctly. Then we can have an apple vs orange comparison to quickly narrow things down. Unfortunately, all I host all my PWAs on root

[code-asher]

I am not a VS Code contributor, unfortunately. :cry: I added my vote though.

find another PWA that works on a path

Yeah that would be awesome. I will keep my eye out.