Turbo Stream을 활용한 파비콘 뱃지 업데이트

도입

이전 글에서 커스텀 Turbo Stream 액션을 사용하여 페이지 타이틀에 카운터를 업데이트하는 방법을 소개했습니다. 이는 탭이 활성화되어 보일 때 유용하지만, 여러 탭 중 하나이거나 고정되어 파비콘만 보이는 경우에는 한계가 있습니다. 본 글은 이러한 한계를 극복하기 위해 파비콘 자체에 시각적 뱃지를 추가하는 솔루션을 제시합니다. 동일한 접근 방식과 깔끔한 API를 사용하여, 단지 다른 대상을 목표로 하는 확장된 해결책을 제공합니다.

본문에서는 파비콘에 시각적 뱃지를 추가하는 update_favicon 커스텀 Turbo Stream 액션의 구현 과정을 단계별로 설명합니다.

뷰 및 레이아웃 설정: 뷰에서는 content_for :favicon을 사용하여 메시지 수에 따라 읽지 않은 상태(icon-unread.svg) 또는 기본(icon.svg) 파비콘 경로를 조건부로 지정합니다. 레이아웃은 yield(:favicon)을 통해 이 동적 경로를 <link rel="icon"> 태그의 href 속성에 바인딩하여, 브라우저가 현재 상태에 맞는 파비콘을 표시하도록 합니다.
Turbo Stream 응답 및 Ruby 헬퍼: 서버에서 메시지가 생성되거나 삭제될 때, turbo_stream.update_favicon @count를 호출합니다. 이 호출은 TurboStreamActionsHelper 모듈에 정의된 update_favicon 헬퍼 메서드를 통해 action="update_favicon" count="[숫자]" 속성을 가진 <turbo-stream> HTML 태그를 생성하여 클라이언트에 전송합니다.
JavaScript 액션 구현 및 등록: 클라이언트 측에서는 app/javascript/turbo_stream_actions/update_favicon.js 파일에 update_favicon JavaScript 함수를 정의합니다. 이 함수는 수신된 <turbo-stream> 태그의 count 속성 값을 읽어와, 문서 내 파비콘 link 엘리먼트의 href 속성을 조건부로 업데이트합니다. 마지막으로, 이 커스텀 함수를 Turbo.StreamActions.update_favicon = update_favicon 코드를 통해 Turbo 프레임워크에 등록하여, 해당 액션 태그 수신 시 자동으로 실행되도록 합니다.

결론

이 글에서 제시된 파비콘 업데이트 솔루션은 이전 글의 타이틀 카운터와 완벽하게 상호 보완됩니다. 이는 Turbo Stream의 유연성과 확장성을 잘 보여주며, 동일한 패턴을 사용하여 사운드 알림, 데스크톱 알림 등 다양한 브라우저 API를 통합할 수 있음을 시사합니다. 깔끔하고 일관된 API를 통해 개발자는 복잡한 실시간 업데이트 기능을 효율적으로 구현할 수 있습니다. 이 접근 방식은 사용자 경험을 향상시키면서도 코드의 유지보수성을 높이는 데 기여합니다.

Turbo Stream을 활용한 파비콘 뱃지 업데이트

Update favicon with badge using custom turbo streams in Rails | Rails Designer

핵심 요약

도입

결론

관련 글들

Rails Turbo Stream을 활용한 실시간 페이지 제목 카운터 업데이트

Hotwire의 Turbo Drive, Frame, Stream, Morph: 상황별 최적의 도구 선택 가이드

Turbo Stream 'refresh' 액션과 DOM 상태 관리: 서버사이드 렌더링을 통한 개선

Rails와 JavaScript 조정을 위한 커스텀 Turbo Stream 액션 활용

댓글 0

로그인이 필요합니다

아직 댓글이 없습니다