LiveTitle doesn't update background tab

Phoenix Forum Questions / Help
,
1

I use Phoenix.Component.live_title/1 to auto-update the browser tab, periodically changing assigns[:page_title] with a background process.

It works just fine when the browser page is active. But when the browser page is not active, the tab does not update.

Is there a way to force title updates when the browser page is not active?

2

Think the inactive browser tab goes into power saving mode, and disconnects the websocket connection/disables timers etc. etc…

so think the only answer is using webpush GitHub - danhper/elixir-web-push-encryption: Elixir implementation of Web Push Payload encryption. to have the backgrounded tab “wake up”…

2 Likes
3

I solved this using LiveView’s push_event.

In the liveview:


  def handle_info({"newfav", newklas}, socket) do
    {:noreply, push_event(socket, "newfav", %{color: newklas})}
  end

  def handle_info({"newtitle", newtitle}, socket) do
    {:noreply, push_event(socket, "newtitle", %{title: newtitle})}
  end

in app.js

window.addEventListener("phx:newtitle", (e) => {
  var txt = e.detail.title
  var tag = document.getElementById('title')
  tag.innerHTML = txt
})
window.addEventListener("phx:newfav", (e) => {
  var color = e.detail.color
  var tag = document.getElementById('favicon')
  tag.href = `/assets/img/favicon-${color}.ico`
})

I used this technique to update both the site title and favicon. In my 2 minutes of testing on Chrome/Linux, it dynamically updates the background tab. :smiley:

4

you can enable chrome://flags/#quick-intensive-throttling-after-loading that way it “only” takes a minute for the timer throttling to commence… think default is 5 minutes…

1 Like