search

sveltejs / learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte
https://learn.svelte.dev
MIT License
530 stars 245 forks source link

WebContainers are in beta now for Safari #306

Closed denlukia closed 1 year ago

denlukia commented 1 year ago

Recent macOS update (13.3) bumped Safari to 16.4 which on WebContainers Browser Support page isn't described as lacking some features anymore but now as "in beta".

WebContainer's landing page demo now successfully runs on Safari with webcontainer_any_ua in LocalStorage being set to any non-empty value

image

I haven't though tested "learn"s code with removed user-agent matching codepath. Maybe there are some parts of WebContainers functionality which "learn" uses and which still don't work. If there are, maybe it would be smart to change check from user-agent to these specific function(s). At least we're getting close

Rich-Harris commented 1 year ago

Feature-detection rather than UA sniffing would be ideal, yeah, though the docs aren't quite clear on how to do the feature detection (the 'such as' makes me nervous):

image

I've opened a request for a) boot() to throw in unsupported environments and/or b) the ability to know ahead of time if the environment is supported: https://github.com/stackblitz/webcontainer-core/issues/1021

denlukia commented 1 year ago

Great, thank you for opening that request! Should I close then this one and watch there or leave this as is for now?

Rich-Harris commented 1 year ago

Let's leave this open, as we'll still need to do some work on our end if/when they make any changes on theirs

denlukia commented 1 year ago

For those who really wants to learn.svelte.dev in Safari even before this resolves:

image
denlukia commented 1 year ago

WebContainers team choose now to enable demo on their landing page for Safari by default. Here's the check they used in code. Maybe it's good enough for learn too?

tomoam commented 1 year ago

According to this document, older Safari does not support Atomics.waitAsync and therefore cannot run Webcontainer. https://webcontainers.io/guides/browser-support#safari

According to caniuse.com, I see that Safari has supported Atomics.waitAsync since 16.4, so this could be used to check for Webcontainer support, as a temporary workaround. https://caniuse.com/mdn-javascript_builtins_atomics_waitasync.

EDIT:

@thedenoff Thanks for the information! That code is actually used on top-page of the webcontainers.io, which means production-ready. It looks like we should borrow it.

tomoam commented 1 year ago

I have tried learn.svelte.dev on iPhone XS MAX and iPhone 13 Pro and it crashes. (On iPad Air (4th gen), it crashes rarely, but shows 'OUT OF MEMORY').

So again, I read the code in the docs of webcontainers.io and found that for mobile Safari, it is hidden by CSS.

https://github.com/stackblitz/webcontainer-docs/blob/369dd58b2749b085ed7642f22108a9bcbcd68fc4/docs/.vitepress/theme/components/Examples/WCEmbed/WCEmbed.vue#L133-L140

Stackblitz shows the following for mobile Safari:

image

...then if you click the Run this project button on the iPhone XS MAX and iPhone 13 Pro, it crashes.

So I will improve the check logic to make it unavailable for Safari on iOS.

EDIT:

I have tried learn.svelte.dev on several actual ipad devices (9th gen, 10th gen) and the behavior is flaky. For example, it works fine the first time but goes Out of memory the second time or crashes and reloads.

Therefore, I feel it would be better to let the user know about it and give them the option to run it or not, similar to Stackblitz.