Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make area around top bar of mobile devices the same color as app bar (PWA) #935

Merged
merged 1 commit into from
Mar 6, 2024

Conversation

pinapelz
Copy link
Contributor

@pinapelz pinapelz commented Mar 2, 2024

Summary

This PR builds off of #834 .
The issue is that you need to explicitly tell iOS that your website is PWA capable and that you want the status bar to match the theme color in your meta tags.

Assuming you guys also want something similar on Android, you'll need to specify what color as a theme-color meta tag.

I've applied the previously proposed colors to the manifest files and made the necessary changes to the meta tags.

Deployment Note

The PWA currently does not work off of the dev server with port forwarding, so we need to figure that out or find another way to test it.

Before and After

Before After

Test Plan

Run locally and test visually

Issues

Closes #840

@github-actions github-actions bot requested a review from MinhxNguyen7 March 2, 2024 05:48
@MinhxNguyen7
Copy link
Member

MinhxNguyen7 commented Mar 3, 2024

How did you test this locally as a PWA?

The server seems to get completely borked when I try to access it as a PWA. I'm running Chrome on Android. @ap0nia any ideas why?

image

@pinapelz
Copy link
Contributor Author

pinapelz commented Mar 3, 2024

Are you running the dev server and forwarding the port? I tried that and ran into an issue for that where the PWA was just a white screen (even when I just cloned directly from the main repo)

I ended up just deploying it to Cloudflare pages via pnpm run build and that seemed to allow me to use the PWA. I have no idea why directly using the dev server doesn't work though.

Copy link
Member

@MinhxNguyen7 MinhxNguyen7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What can go wrong?

@MinhxNguyen7 MinhxNguyen7 merged commit 349dae1 into icssc:main Mar 6, 2024
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the area around the notch on the PWA the same color as app bar
2 participants