Thank you for supporting the Cloud Customer Connect Community in 2024. It's a gift to work with you!

Look back
You're almost there! Please answer a few more questions for access to the Applications content. Complete registration
Interested in joining? Complete your registration by providing Areas of Interest here. Register

Implementing Two Different PWA Icons Based on Device Width

in Visual Builder

We would like to use two different PWA icons for our application.

We intend to use different icons based on the device width. Specifically, we want to display "mobile.png" when the device width is below 768 pixels, and we want to display "desktop.png" when the device width is above 769 pixels. (See attachment 1)

 

We manipulated the manifest.webmanifest file to achieve this:

 

{
  "sizes": "128x128",
  "src": "resources/icons/mobile.png",
  "type": "image/png",
  "purpose": "any maskable",
  "media": "(max-width: 768px)"
},
{
  "sizes": "128x128",
  "src": "resources/icons/desktop.png",
  "type": "image/png",
  "purpose": "any maskable",
  "media": "(min-width: 769px)"
},

 

But we always see mobile.png when we try to install our VBSC app as a PWA app on whichever device we have. Our condition does not work. (See attachment 2)

Tagged:

Howdy, Stranger!

Log In

To view full details, sign in.

Register

Don't have an account? Click here to get started!