graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ios): improve WebSocket stability on iPhone Safari

Browse source 
Increase long-poll fallback timeout to 5s for mobile networks, add
visibility change listener for proper reconnection on app foreground,
and remove backdrop blur that stalls network operations on iOS Safari.
This commit is contained in:
Graham McIntire 2026-03-11 10:58:07 -05:00
parent 2ee749da9b
commit 018a9075ab
No known key found for this signature in database
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/js/app.ts
View file

@ -187,7 +187,7 @@ window
});
const liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500,
longPollFallbackMs: 5000,
params: { _csrf_token: csrfToken, viewport_width: window.innerWidth },
hooks: Hooks,
timeout: 60000,
@ -215,6 +215,17 @@ window.addEventListener("phx:reconnect", ((e: CustomEvent<{ delay?: number }>) =
// connect if there are any LiveViews on the page
liveSocket.connect();
// Handle visibility change to ensure reconnection when page becomes visible
// This helps with iOS Safari background/foreground transitions
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
const socket = (liveSocket as any).socket;
if (socket && socket.connectionState() !== "open") {
socket.disconnect(() => socket.connect());
}
}
});
// Workaround for Phoenix LiveView bug where fallback timer isn't cleared
// after successful WebSocket connection
window.addEventListener("phx:live_socket:connect", (_info) => {

3
lib/aprsme_web/live/map_live/index.ex
View file

@ -1433,8 +1433,7 @@ defmodule AprsmeWeb.MapLive.Index do
<!-- Mobile Backdrop -->
<%= if @slideover_open do %>
<div class="fixed inset-0 bg-black bg-opacity-50 z-[999] lg:hidden backdrop-blur-sm" phx-click={toggle_slideover_js()}>
</div>
<div class="fixed inset-0 bg-black bg-opacity-50 z-[999] lg:hidden" phx-click={toggle_slideover_js()}></div>
<% end %>
<!-- Control Panel Overlay -->