Setting app icon when installing CHT as a PWA (Windows)

Technical Support
1

I’m trying to set the icon for my CHT Application when installed as a PWA. The resulting icon displays as the Medic logo when I follow the steps to set Site Branding with an “icon” with value 196x196 png.

The docs site says this value “Must be at least 192x192 pixels, square” and “required for PWA installation only”.

This article indicates PWAs require a 192x192 and a 512x512. I suspect I might also need smaller icon sizes for the app’s installed icon?

This is particularly important for the app I’m working on since each user will install multiple CHT PWAs and it’s important they are visually distinct. As a result, this is blocking me from using the CHT’s PWA functionality.

2

Hi @kenn !

Have you also set the favicon to the desired image?

Can you share the URL or the contents of the /manifest.json?

Have you cleared your service worker cache since changing icons? This shouldn’t be needed but it’s worth a try…

It’s possible that there’s an issue with the images you’ve used. The easiest way to check this is using the Lighthouse tool in Chrome. To access this, load your app (login page is fine), open dev tools (F12), pick the Lighthouse tab, select Progressive Web App category, and click the Analyze button. This generates a report which will tell you if anything is misconfigured.

3

Thanks for the tips!.

I should have been explicit this is a Windows desktop problem. Here is the manifest:

{
  "start_url": "./",
  "name": "Kamuzu Central Hospital CARES",
  "display": "standalone",
  "background_color": "#323232",
  "theme_color": "#323232",
  "icons": [
    {
      "src": "/img/kamuzu-central-pwa.png",
      "sizes": "any",
      "purpose": "any"
    },
    {
      "src": "/favicon.ico",
      "sizes": "32x32",
      "type": "image"
    }
  ]
}

Things look fine on Android, but the icons are sometimes incorrect on Windows 11 desktop when on “medium icons” (shows Medic) and correct for “large icons” (shows my custom branding)
image
image

Testing desktop because senior nurses are potential to be using desktop within the facility. Since this is desktop only, I believe we can manually change the icon to work around the problem.

4

Sorry about the late reply! For some reason I didn’t get the notification…

Given that there’s only two icons listed my guess is that the favicon is wrong, and Windows is switching to the larger (correct) icon when it gets big enough. Favicons are tricky because they’re aggressively cached by browsers so it could be some issue like that.

To look into the problem I went to /favicon.ico without logging in but the request isn’t completing. On a hunch I checked the logs and haproxy is reporting a 404 for the icon file /medic/branding/kamuzu-central-favi.ico.

This indicates that your ico file isn’t available, which I suspect will be fixable in configuration. It could indicate an issue in cht-conf or in the way your config is structured. Right now I suspect you’ll be getting a lot of errors in the log because browsers will automatically try and fetch the favicon. Try and fix that so /favicon.ico actually responds with your file and that may fix your PWA issue too.

There’s also a bug in cht-core where haproxy returns a 404 but it isn’t caught by API so it falls back to “unhandled rejection” and doesn’t respond to the client. I’ve raised an issue to get it fixed separately.

1 Like