Liveview navigation (refresh, back/forward and scroll position)

Phoenix Forum Questions / Help
1

I have some questions about Liveview and browser navigation. I’ll use the Elixirconf website https://2022.elixirconf.com/ as an example as it is probably the biggest publicly available Liveview site out there. (If you know more public facing websites using Liveview navigation let me know!)

  • If I press Refresh (ctrl+r) my scroll position is reset. Is this behavior innate to Liveview or is there a way to make browser refresh work normally?

  • Generally back/forward navigation appears to work great. But the anchor links on Schedule page only work when clicking. Navigating back/forward does nothing. Is this fixable?

Thanks for any help :sparkling_heart:

1 Like
2

Friend pointed out some more Liveview examples: :slightly_smiling_face:

https://livebeats.fly.dev/
https://www.stitched.co.uk/ (this one doesn’t use live navigation but Ctrl+r still resets scroll position)

Browser refresh scroll position reset does seem to be a current problem of Liveview as it happens on each of those sites. :thinking: It is difficult to say why as the network tab appears to send all the contents of the page on first GET.

Elixirconf website’s anchor links apparently use live_patch for no reason and that probably messes up back/forward. Using regular anchor links should therefore solve the second problem. :slightly_smiling_face:

3

There was some discussion on this sort of thing in this thread Do you still have DeadViews accompanying LiveViews? and an issue is tracking it here
Restore scroll position on reconnects · Issue #2326 · phoenixframework/phoenix_live_view · GitHub and the hard refresh in a linked issue.

A couple of other websites are https://ash-hq.org/ and https://mave.io.

2 Likes
4

Check out LiveBeats — meant to be THE instructional LiveView example site codebase; maybe it handles these things? It’s a much more sophisticated app than the ones mentioned here, to be sure.

2 Likes
5

Thank you, the link holds all the answers! And I didn’t even think of the other situations like disconnect/reconnect (very common on tabbed out websites on mobile) invoking the same behavior.

Very curious stuff. Regular “dead views” might be the best option for me with the occasional live route or live_render. Especially with niceties like Paint Holding - reducing the flash of white on same-origin navigations - Chrome Developers already accomplishing most things live navigation was made to solve. And all without SPA navigation woes. :slightly_smiling_face:

Colocated controllers and templates, and components on Phoenix 1.7 are looking hella nice. :sparkling_heart:

6

Thank you, that is indeed quite the display of what you can do with a complete Liveview app.

To add to my previous post if I do need a persistent media player across all pages it is time to go all Live. :slightly_smiling_face:

7

I should add that you can have a perfectly fine back/forward experience if you use the right functions/components/options.