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

louisefindlay23 commented 2 years ago

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

Reverse Proxy code-server
Open code-server via the proxied subdomain on an iPad using Safari
Tap the Share Button
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 commented 2 years ago

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

jsjoeio commented 2 years ago

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

louisefindlay23 commented 2 years ago

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 commented 2 years ago

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

louisefindlay23 commented 2 years ago

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

jsjoeio commented 2 years ago

Do you mind linking the issue here?

louisefindlay23 commented 2 years ago

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

icui commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

@bilogic no there isn't at the moment!

code-asher commented 7 months ago

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 commented 7 months ago

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

code-asher commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

code-asher commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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

Yeah I am, not sure about @louisefindlay23 though.

screenshot

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 6 months ago

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 commented 6 months ago

@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 commented 6 months ago

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.

coder / code-server