Use Richer UI install for PWA on Chrome

[ananyakaligal]

Closes #8929

DRAFT PR - will edit this once all the tasks are achieved.

Stakeholders

@RayBB

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.57%. Comparing base (3025f5d) to head (9f0b479).
Report is 275 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10393      +/-   ##
==========================================
+ Coverage   17.44%   17.57%   +0.12%     
==========================================
  Files          89       87       -2     
  Lines        4792     4775      -17     
  Branches      848      847       -1     
==========================================
+ Hits          836      839       +3     
+ Misses       3436     3417      -19     
+ Partials      520      519       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ananyakaligal]

@RayBB, I've added the desktop screenshots to the .mockup file and referenced the same images in the manifest.json. However, I'm not sure how to test this locally. Could you please help me with that?

[RayBB]

Can you please provide a link to the guides you've tried following already and what part you're getting suck at?
Even better if you could upload a short video of the install process and where it's going wrong.

[ananyakaligal]

@RayBB I am sorry , it was a confusion.

I've added the screenshots to .mockup as of now.
We need to either extract the screenshot URLs dynamically from the .mockup file using a Python script and include them in manifest.json, or store the screenshots directly in static/images/ and update the manifest.json accordingly. I can implement the script for extraction if that’s the preferred approach. Which one would you prefer?

[RayBB]

I think storing them wow in the static folder is good!