ivanminutillo
Mobile Tab Switching Triggers Full Page Reload in LiveView - Is This Expected Behavior?
Hi everyone,
I’m working on a Phoenix LiveView application and noticed an annoying behavior on mobile devices: whenever users switch tabs and return to the app, the entire page reloads even if it was fully loaded before. This happens consistently on both iOS and Android browsers.
The Issue
- User loads a LiveView page on mobile
- User switches to another browser tab or app
- User returns to the original tab
- The socket reconnects and triggers a full page reload, losing scroll position and any client-side state
This creates a poor user experience, especially on slower connections where users have to wait for the entire page to reload.
Our implementation uses standard LiveSocket configuration:
let liveSocket = new LiveSocket("/live", Socket, {
timeout: 60000,
params: { _csrf_token: csrfToken },
// ... standard configuration
});
We don’t have any visibilitychange or pageshow/pagehide event handlers
Is this the default Phoenix LiveView behavior? Does LiveView intentionally trigger a full remount when reconnecting after tab switches?
Here a potential solution I’m considering
// Detect tab visibility changes
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// Gracefully disconnect?
liveSocket.disconnect();
} else {
// Reconnect without full reload?
liveSocket.connect();
}
});
But I’m unsure if this is the right approach or if it might cause other issues…
Most Liked
sabiwara
arcanemachine
I haven’t noticed this behaviour in my LiveView projects…
Can you try out my toy LiveView project and see if it still happens?
Also, here’s my liveSocket config:
https://github.com/arcanemachine/phoenix-quiz-game/blob/master/assets/js/app.js#L42
steffend
I think this is solved by Stop reconnecting when page is hidden by SteffenDE · Pull Request #6534 · phoenixframework/phoenix · GitHub - please try it using the branch from GitHub linked in the PR and hopefully we’ll have this properly fixed in the next release! During testing, I did NOT see the device doing a full page reload though, it only reconnected the socket, so there might be something else in play as well. I think the full reload might happen if there was a deploy in between, then it would be expected iirc.
I’ve been testing this with an Android device + USB debugging to attach to the devtools and inspect what’s happening when the device goes to sleep. Previously, we’d immediately try to connect again. In the WebSocket case the socket would stay in connecting state indefinitely and when unlocking the device the actual connection would take a very long time (for no apparent reason). For LongPoll, the device would backoff the HTTP requests and then also when unlocking the actual connection could take a very long time to actually send data (I ran tcpdump on the server side).
The fix prevents trying to reconnect when the page indicates that it is hidden and only does a new connection attempt as soon as it’s visible again. For both WebSocket and LongPoll, I can’t reproduce the stalling in that case. The page reconnects instantly as it should.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"