Is there some way to show a 'lost connection'-esque screen when/if the user loses internet connection or, at least, connection to the website using SvelteKit, similar to how YouTube's 'There is no connection right now' screen?

I imagine it would require some kind of socket to poll connection, and I was also wondering if this could be used to constantly check for user login state, as currently the user will only return to the login screen if they refresh the page or try to navigate, however this is less important.

CodePudding user response：

There is the navigator.onLine property that can be checked and the window events online and offline that fire on connectivity changes.

I would listen to the events to show/hide an element on the page.

For events from the application such as changes to the login status, web sockets would be ideal but as of now they are not natively supported (see this issue).

You could potentially use an older technology, server-sent events, by returning a ReadableStream from an endpoint. Of course polling is also an option but less ideal.