mylog FCM과 서비스 워커

Vue로 PWA 개발 - 그랜파 개발자

Vue 프로젝트 Beta Test : mylog, 일상의 기록

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.

mylog FCM과 서비스 워커

마이로그는 Firebase v9(모듈형 SDK) 에서 FCM(Firebase Cloud Messaging) 서비스를 구현하려고 합니다.

웹 애플리케이션에 푸시 알림을 통합하기 위하여 다음의 프로세스가 필요합니다.

1. 알림을 보내려면 사용자의 권한을 요청하고, 사용자가 권한을 허용하면 토큰을 받아 클라우드에 저장합니다.
2. 알림을 보내려면 사용자의 FCM 토큰을 사용하여 FCM 서버에 요청하고 Firebase Cloud Functions를 사용하여 알림을 보낼 수 있습니다.
3. 사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를 수신할 수 있습니다.
4. 앱이 알림 권한을 받거나 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다.

FCM과 서비스 워크에 대해 ChatGPT에게 물었습니다.

서비스 워커

서비스 워커(Service Worker)는 웹 애플리케이션과 브라우저 사이에 위치하는 프록시 스크립트로, 네트워크 요청을 가로채고 캐시를 관리하며, 백그라운드 작업을 실행하는 중요한 역할을 합니다. 서비스 워커는 PWA (Progressive Web App)에서 웹 앱의 성능과 오프라인 기능을 크게 개선하는 핵심 요소로, 사용자가 인터넷 연결이 불안정하거나 없는 경우에도 앱을 사용할 수 있도록 합니다.

서비스 워커의 주요 기능

1. 네트워크 요청 제어: 서비스 워커는 네트워크 요청을 가로채어, 요청을 캐시에서 처리할지, 네트워크에서 가져올지를 결정할 수 있습니다. 이를 통해 웹 앱은 오프라인 환경에서도 동작하게 하고, 느린 네트워크 상황에서도 빠르게 콘텐츠를 제공합니다.
2. 캐싱 관리: 서비스 워커는 캐시를 효율적으로 관리하여 앱의 성능을 높이고, 반복되는 요청에서 로딩 시간을 단축합니다. 처음 방문 시 캐시에 저장한 리소스를 이후 재방문 시 캐시에서 로드하여 빠른 로딩을 구현할 수 있습니다.
3. 푸시 알림: 서비스 워커는 브라우저에서 푸시 알림을 수신하고 이를 사용자에게 보여줄 수 있습니다. 이는 사용자가 웹 앱을 사용하지 않더라도 알림을 통해 앱에 재접속할 수 있도록 유도하는 데 유용합니다.
4. 백그라운드 작업: 서비스 워커는 사용자와 상호작용이 없어도 백그라운드에서 작업을 수행할 수 있습니다. 예를 들어, 데이터 동기화와 같은 작업을 백그라운드에서 수행하여 앱이 열리지 않은 경우에도 최신 데이터를 유지할 수 있습니다.

FCM과 서비스 워커

Firebase Cloud Messaging (FCM)과 서비스 워커는 웹 애플리케이션에서 푸시 알림 기능을 구현하기 위해 함께 작동하는 중요한 요소입니다. FCM은 서버에서 클라이언트로 푸시 알림을 전송하는 서비스이고, 서비스 워커는 브라우저가 이 알림을 백그라운드에서 처리할 수 있도록 돕습니다. 이 두 요소의 상호작용으로 사용자는 웹 애플리케이션이 실행 중이지 않아도 푸시 알림을 받을 수 있게 됩니다.

1. FCM과 서비스 워커의 역할과 상호작용

1. FCM의 역할:

• FCM은 Firebase에서 제공하는 클라우드 메시징 서비스로, 모바일 및 웹 애플리케이션에 푸시 알림을 전송할 수 있도록 설계되어 있습니다.
• 서버에서 전송한 메시지를 사용자 장치로 푸시하여, 중요한 정보를 제공하거나 사용자를 앱으로 다시 유도하는 등의 목적으로 사용됩니다.

2. 서비스 워커의 역할:

• 서비스 워커는 브라우저에서 백그라운드 스크립트로 실행되며, FCM으로부터 받은 푸시 메시지를 처리하여 사용자에게 알림을 표시하는 역할을 합니다.
• 서비스 워커는 브라우저와 웹 서버 사이에서 프록시 역할을 하여, 앱이 실행 중이지 않거나 백그라운드에 있어도 메시지를 수신하고 표시할 수 있습니다.
• 보통 FCM 알림 처리를 위해 firebase-messaging-sw.js 파일을 서비스 워커로 등록합니다.

2. FCM과 서비스 워커의 상호작용

1. 클라이언트에서 FCM 등록 토큰 획득:

• 웹 앱은 getToken 메서드를 통해 FCM 등록 토큰을 획득합니다. 이 토큰은 특정 사용자 브라우저를 식별하며, 서버는 이 토큰을 사용해 해당 사용자에게 푸시 알림을 보냅니다.

2. 푸시 알림을 위한 서비스 워커 등록:

• 웹 애플리케이션에서 FCM 메시지를 수신하려면, firebase-messaging-sw.js 파일을 서비스 워커로 등록해야 합니다. 이 서비스 워커가 백그라운드에서 푸시 알림을 처리하게 됩니다.

3. FCM 메시지 전송 및 수신:

• 서버에서 사용자에게 메시지를 전송할 때, 등록된 FCM 토큰을 사용하여 FCM API를 통해 메시지를 보냅니다.
• FCM은 이 메시지를 사용자 브라우저의 서비스 워커로 전달하고, 서비스 워커는 이를 통해 푸시 알림을 생성합니다.

4. 서비스 워커에서 알림 표시:

• firebase-messaging-sw.js 파일에서 서비스 워커는 onBackgroundMessage 이벤트를 사용하여 FCM 메시지를 수신하고, showNotification 메서드로 실제 알림을 표시합니다.