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

Add manifest.json for basic PWA support #6420

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

WesSouza
Copy link

@WesSouza WesSouza commented Nov 16, 2024

This introduces a manifest.json to bskyweb, allowing the website to be installed as a "WebClip"/PWA application on iOS and iPadOS.

This also replaces the apple-touch-icon.png with the application icon, which then renders much better when added as a PWA.

Screen capture of the XCode Simulator showing Bluesky full screen on an iPad mini Screen capture of the XCode Simulator showing Bluesky full screen on an iPhone

Caveats

When running as a standalone PWA on iPhone, the safe area must be supported via the env(safe-area-inset-*) CSS variables. Unfortunately I wasn't able to quickly make that work together with useSafeAreaInsets from react-native-safe-area-context.

I was also very confused on how yarn start plays with the bskyweb app. I guess the team is overriding Expo's standard for public assets.

To test this, I built the website and started the Go server in bskyweb.


I will add that I am absolutely flabbergasted to have been able to have this working as a logged in user on my local machine. Amazing job on DX!

@v42
Copy link

v42 commented Nov 16, 2024

:shipit:

}
],
"start_url": "/",
"display": "standalone",
Copy link

@rektide rektide Nov 16, 2024

Choose a reason for hiding this comment

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

Suggested change
"display": "standalone",
"display": "standalone",
"display_override": ["tabbed"],

Since this is a social network app and numerous links are likely to be clicked, my opinion is that we should open with tabs too.

https://developer.chrome.com/docs/capabilities/tabbed-application-mode#using_tabbed_application_mode

Copy link
Author

Choose a reason for hiding this comment

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

I'm not sure this is a good idea given this property is experimental:

https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override

@jswhisperer
Copy link

I installed Bluesky as a PWA no tabbed property, and really enjoy it 110% more
image
image

I used overrides rather than this PR but think it's important a PWA does exist.

@jswhisperer
Copy link

MacOS m1

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.

4 participants