guregu / trealla-js

Trealla Prolog for the web
MIT License
38 stars 0 forks source link

Sandbox does not work on mobile phone #11

Open triska opened 1 year ago

triska commented 1 year ago

When I use Safari on iPhone to visit the link shown in https://github.com/guregu/trealla-js/issues/4#issuecomment-1263938831, I see (as expected) the intended query.

However, when I post the query, the browser is unexpectedly redirected to https://php.energy/trealla.html? instead of showing the answer. What could be the reason for this?

guregu commented 1 year ago

Safari issue it seems, I can also reproduce. Probably just missing one of the APIs I use. I’ll hook up a debugger and figure it out

guregu commented 1 year ago

Pushed an update. Works on my phone now. It'll also pop up an alert window when it runs into an error now which should hopefully help debug. As a bonus, it now looks nicer (although still terrible) on mobile too ;) image

Let me know if it doesn't work for you.

triska commented 1 year ago

On an iPhone, I now only get "Loading..." as description for the query button. No error is indicated.

guregu commented 1 year ago

Hmm, that's not good. What version of iOS are you using? I'm on a slightly older one.

triska commented 1 year ago

I cannot open the image you posted, I get: "Did Not Connect: Potential Security Issue".

I tried it with iOS 14.4.1 on an iPhone SE.

guregu commented 1 year ago

That's odd, the image is nothing particularly special, just uploaded using GitHub's drag and drop 🤔 I wonder if there's some kind of certificate issue with the hosts I'm using. Can you access these URLs?

If those look OK (should be source code and a binary download) then it must be an issue with the JS APIs I'm using.

triska commented 1 year ago

I meant this image: https://user-images.githubusercontent.com/131059/193401473-1bcce844-3211-4aec-8a89-775b8bf7f184.png

guregu commented 1 year ago

Ah yeah, those URLs I posted are the ones the playground uses internally. I don't think they are related to the Github image issue, but the Github images not working points to a potential greater problem I think. Like maybe your root certificates are different than mine.

Are you using Firefox on iOS, btw? Maybe it's a Firefox thing. I'll give it a shot.

triska commented 1 year ago

I can view the png file with iOS, on an iPhone. However, on iOS (using Safari), I only get "Loading..." where the Query button should be, and I cannot post any query.

On OSX (I am using 10.11.3, so the TLS certificates may be outdated), I cannot view the png file you linked to. And with the latest changes, I now only get "Loading..." on OSX too (using Firefox). In summary, I currently have no device in reach where the playground works. Note that until a few hours ago, I could post queries using this OSX version.

guregu commented 1 year ago

I have an a Mac with an old version of OS X, let me see if I can reproduce. Sorry about the breakage. I'm going to experiment with embedding the WebAssembly binary inside of the JS package, loading the WASM binary could potentially be the issue. Will update you after I try some things.

guregu commented 1 year ago

I think I fixed the thing I probably broke a few hours ago. It was an issue with the URL parameters breaking the server-side part of it.

I tried running it on OS X 10.14.6, Firefox 105 and it seems OK. Unfortunately that's all I have to test with.

I also tried reducing the usage of new JS stuff like toplevel await so maybe that will help. Please try again 🙏

triska commented 1 year ago

With Firefox on OSX, I now get the following error in a message box:

ReferenceError: FinalizationRegistry is not defined

The web console states:

Uncaught (in promise) ReferenceError: FinalizationRegistry is not defined
    trealla 0.9.1/es2021/trealla.js:2
    init https://php.energy/trealla.html:64
triska commented 1 year ago

On iOS, I only see "Loading..." for the query button, and no error message.

guregu commented 1 year ago

Aha, progress! I added a check for FinalizationRegistry support in the library and a workaround. It looks like you are one version behind its support. I have pushed the updates.

For mobile, are you on a slow connection (like 3G)? It could take a minute or so to load. I believe it's around ~750KB transferred at the moment. It is possible to slim it down further with some effort. For comparison, SWI sits around 8MB and Ciao 15MB on their sites. Tau is something like 100KB.

triska commented 1 year ago

On OSX, I still get the error message: ReferenceError: FinalizationRegistry is not defined

guregu commented 1 year ago

Whoops, I made a mistake on the check. Published a fix. Please try again.

triska commented 1 year ago

Thank you, on OSX it works now. But the issue on iOS persists: I only get "Loading...", also after many seconds, certainly enough to download 1 MB (over LTE).

guregu commented 1 year ago

Glad to hear at least one part was fixed. Thanks for bearing with me. I will try some other techniques. Will report back later.

guregu commented 1 year ago

I put up a new test build on the demo site. It uses esbuild with the target ['firefox76', 'safari14'] so hopefully it should work for you. This version also has the binary bundled inside of it so maybe that will help too.

triska commented 1 year ago

Thank you for these changes. On iOS, I tried it with Firefox 37 (this is from last year) and Safari using (still) iOS 14.4.1, and I only get "Loading..." on both browsers. I think it would be nice to at least display what is going wrong or what is needed, for example to detect when a browser cannot run the page.

guregu commented 1 year ago

I got a hold of Safari 14 and figured it out (I think). It seems to be missing support for BigUint64Array, which our single dependency (wasmer-js) relies on. https://caniuse.com/?search=BigUint64Array%20 Support was added in Safari 15.

Looks like wasmer-js uses it for the virtual filesystem. I would like to probably switch away from wasmer-js to something more lightweight but it might involve reimplementing all the WASI syscalls.