Interactive Views not working on iOS 12.5

[markusgritsch]

Hi,

thank you very much for your really greate Lona framework. I like it very much.

It works great across my devices, except on my iPhone 6 and iPad mini 2, where interactive Views get loaded, but only display a blank screen. I suppose there is a problem regarding the WebSocket connection.

Are these old browsers on those devices known to be not capable of this, or is there possibly a way to get them working too? I don't seem to have any compatibility issues browsing other websites. Is using WebSockets really that rare?

Kind regards,
Markus

[fscherf]

Hi @markusgritsch,

Thanks, i am glad to hear that :)

I am currently developing against very recent versions of chrome, webkit and firefox, and I dont have access to any apple devices, especially older ones. So I am not aware of problems like this, and wouldn't encounter them, at the moment.

Websockets could be the problem here. Also some dom-manipulation calls or es06 Javascript imports could be problematic.

The lona Javascript client has a mechanism that sends Javascript exceptions back to the server to log them as errors. (The websocket connection is used for that, so if you dont see that, chances are there are no connections)

You can check how many connections a view has: start a lona shell (when using a lona script, start with '--shell') and run '%lona_views'. The command has tab completion for running views. When called with an id, an list of running connections is listed.

[markusgritsch]

Yay! It worked! Here's a screenshot from my Phone:

[markusgritsch]

I don't know if this is related to your modification in CLIENT_VERSION 2, but the following simple Bootstrap 5 example does only work with the old client version:

from lona_bootstrap_5 import (
    Switch,
    BorderPrimarySpinner,
)
from lona import LonaApp, LonaView
from lona.html import H1, HTML, P, Div

from lona_bootstrap_5.nodes import BorderInfoSpinner, PrimaryBadge

app = LonaApp(__file__)

app.add_static_file('lona/style.css', """
#lona {
    font-family: sans-serif;
    color: #333333;
    max-width: 60em;
    margin: 0 auto;
}
""")

@app.route('/')
class MyView(LonaView):
    def handle_request(self, request):
        self.spinner = BorderPrimarySpinner('Test')

        html = HTML(
            H1('Bootstrap 5'),

            Switch(value=True, handle_change=self.handle_switch_change),

            self.spinner,
        )
        return html

    def handle_switch_change(self, event):
        self.spinner.style['visibility'] = 'visible' if event.data else 'hidden'

app.run(host='0.0.0.0', port=8080)

With CLIENT_VERION 2 it gives a 500 Internal error

[fscherf]

Yay! :) that was expected, because lona-bootstrap-5 has no support for client 2 yet. I will port this fix client 1, this evening, and notify you for another round of testing.

[markusgritsch]

lona.js seems to be identical in client and client2, so I copied the fixed one from client2 to client and now also the Bootstrap 5 example works on my iPhone 6 👍.

[fscherf]

@markusgritsch: yay! I created a PR, that patches both clients: #335. Could you verify that it resolves the issue?

Thanks a lot for your work and debugging! You helped me more than you know(!)
Feel free to add yourself to the contributors file, and send me an email if you want some stickers.