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.31%. Comparing base (9c5cd67) to head (74ace62).
Report is 433 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10393      +/-   ##
==========================================
- Coverage   17.43%   17.31%   -0.13%     
==========================================
  Files          88       87       -1     
  Lines        4811     4835      +24     
  Branches      853      856       +3     
==========================================
- Hits          839      837       -2     
- Misses       3447     3471      +24     
- Partials      525      527       +2     

☔ 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!

[ananyakaligal]

@RayBB works on desktop, couldnt test on mobile.

Should I also update .mockup with the new screenshots as @cdrini mentioned here #8929 (comment)

[RayBB]

Yes please

…

On Sun, Feb 2, 2025, 1:43 AM Ananya Sriramareddy Kaligal < ***@***.***> wrote: @RayBB <https://github.com/RayBB> works on desktop, couldnt test on mobile. Should I also update .mockup with the new screenshots as @cdrini <https://github.com/cdrini> mentioned here #8929 (comment) <#8929 (comment)> — Reply to this email directly, view it on GitHub <#10393 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHA5ANMCHYRE3D6QEG4WQT2NW5BTAVCNFSM6AAAAABWAC5LDOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMRZGI3DQMRTGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ananyakaligal]

@RayBB Done! updated both desktop and mobile screenshots.

[RayBB]

Good work on this one!

I think we prefer not to have the top bar that's part of the OS showing time and battery for mobile screenshots.
Can you take the screenshots using the devtools on your computer with "Responsive Design Mode"? Ideally I think they should be png as well so they're HD.

[ananyakaligal]

@RayBB Yes, I can do that

[ananyakaligal]

@RayBB Changes made as requested. Is thsi good?

[RayBB]

Looks nice to me but I'll double check with staff this week!