푸시 알림 FAQ

브라우저를 닫을 때 푸시가 작동하지 않는 이유는 무엇인가요?

이 질문은 꽤 많이 발생합니다. 주로 추론하고 이해하기 어렵게 만드는 몇 가지 시나리오가 있기 때문입니다.

Android부터 시작하겠습니다. Android OS는 푸시 메시지를 수신 대기하고 앱이 닫혀 있는지와 관계없이 푸시 메시지를 수신하면 적절한 Android 앱의 절전 모드를 해제하여 푸시 메시지를 처리하도록 설계되었습니다.

이는 Android의 모든 브라우저와 정확히 동일합니다. 푸시 메시지가 수신되면 브라우저의 절전 모드가 해제되고 브라우저가 서비스 워커의 절전 모드를 해제하고 푸시 이벤트를 전달합니다.

데스크톱 OS에서는 더 세밀하고 Mac OS X에서는 설명하기가 가장 쉽습니다. 다양한 시나리오를 설명하는 데 도움이 되는 시각적 표시기가 있기 때문입니다.

Mac OS X에서는 도크의 앱 아이콘 아래에 표시되어 프로그램이 실행 중인지 알 수 있습니다.

다음 도크에 있는 두 Chrome 아이콘을 비교하면 아이콘 아래에 표시되어 있는 것처럼 왼쪽은 실행 중인 반면 오른쪽의 Chrome은 실행되지 않아 아래에 표시가 없습니다.

OS X의 예

데스크톱에서 푸시 메시지를 수신하면 브라우저가 실행 중일 때(즉, 아이콘 아래에 표시가 있을 때) 메시지를 수신하게 됩니다.

즉, 브라우저에 창이 열려 있지 않아도 브라우저가 백그라운드에서 실행 중이므로 서비스 워커에서 푸시 메시지를 계속 수신하게 됩니다.

브라우저가 완전히 닫힌 경우, 즉 전혀 실행되지 않을 때만 (표시 없음) 푸시가 수신되지 않습니다. Windows도 마찬가지입니다. 단, Chrome이 백그라운드에서 실행되고 있는지 여부를 확인하는 것은 조금 더 까다롭습니다.

홈 화면 웹 앱을 푸시에서 전체 화면으로 열려면 어떻게 하나요?

Android용 Chrome에서는 웹 앱을 홈 화면에 추가할 수 있으며, 홈 화면에서 웹 앱을 열면 아래와 같이 URL 표시줄 없이 전체 화면 모드로 실행될 수 있습니다.

홈 화면 아이콘을 전체화면으로 표시

이 환경을 일관되게 유지하기 위해 개발자는 클릭한 알림이 전체 화면에서 웹 앱이 열리도록 하려고 합니다.

Chrome은 '일부'에서 이를 구현했지만 불안정하고 추론하기 어려울 수 있습니다. 관련 구현 세부정보는 다음과 같습니다.

즉, 사용자가 홈 화면 아이콘을 통해 정기적으로 사이트를 방문하지 않는 한 알림이 일반 브라우저 UI에서 열립니다.

이 문제는 더 자세히 살펴보겠습니다.

이것이 웹 소켓보다 나은 이유는 무엇입니까?

브라우저 창을 닫을 때 서비스 워커를 활성화할 수 있습니다. 웹 소켓은 브라우저와 웹페이지가 열려 있는 동안에만 지속됩니다.

GCM, FCM, 웹 푸시 및 Chrome은 어떻게 되나요?

이 질문에는 여러 가지 측면이 있으며, 가장 쉬운 방법은 웹 푸시 및 Chrome의 기록을 살펴보는 것입니다. 짧으므로 걱정하지 마세요.

2014년 12월

Chrome이 처음 웹 푸시를 구현했을 때 Chrome은 Google 클라우드 메시징 (GCM)을 사용하여 서버에서 브라우저로 푸시 메시지를 전송하는 기능을 지원했습니다.

이는 웹 푸시가 아니었습니다. 이러한 Chrome 및 GCM의 초기 설정이 '실제' 웹 푸시가 아니었던 데에는 몇 가지 이유가 있습니다.

  • GCM을 사용하려면 개발자가 Google 개발자 콘솔에서 계정을 설정해야 합니다.
  • Chrome 및 GCM에서는 메시지를 올바르게 설정하기 위해 웹 앱에서 공유할 특별한 발신자 ID가 필요했습니다.
  • GCM 서버가 웹 표준이 아닌 맞춤 API 요청을 수락했습니다.

2016년 7월

7월에 웹 푸시의 새로운 기능인 애플리케이션 서버 키 (또는 사양으로 알려진 VAPID)가 출시되었습니다. Chrome은 이 새로운 API에 대한 지원을 추가할 때 GCM 대신 Firebase 클라우드 메시징 (FCM)을 메시징 서비스로 사용했습니다. 이것이 중요한 이유는 다음과 같습니다.

  • Google 또는 Firebase에서 Chrome 및 애플리케이션 서버 키를 설정하는 데는 어떠한 종류의 프로젝트도 필요하지 않습니다. 잘 될 거예요.
  • FCM은 모든 웹 푸시 서비스에서 지원하는 API인 웹 푸시 프로토콜을 지원합니다. 즉, 브라우저에서 어떤 푸시 서비스를 사용하는지와 관계없이 동일한 유형의 요청을 하기만 하면 메시지가 전송됩니다.

오늘 헷갈리는 이유는 무엇인가요?

웹 푸시를 주제로 한 콘텐츠가 작성되었기 때문에 많은 혼란이 있습니다. 웹 푸시의 주제는 대부분 GCM 또는 FCM입니다. 콘텐츠가 GCM을 참조한다면 오래된 콘텐츠이거나 Chrome에 너무 중점을 두고 있다는 신호로 간주해야 합니다. (이전 여러 게시물에서 이런 실수를 한 적이 있습니다.)

대신 웹 푸시는 푸시 서비스를 사용하여 메시지 발신 및 수신을 관리하고, 여기에서 푸시 서비스가 '웹 푸시 프로토콜' 요청을 수락하는 브라우저로 구성된다고 생각하세요. 이러한 관점에서 생각한다면 사용 중인 브라우저와 푸시 서비스를 무시하고 작업을 시작할 수 있습니다.

이 가이드는 웹 푸시의 표준 접근 방식에 중점을 두고 그 외의 모든 내용은 무시합니다.

Firebase에는 자바스크립트 SDK가 있습니다. 정의 및 이유

Firebase 웹 SDK를 발견했고 이 SDK에 JavaScript용 메시징 API가 포함된 것을 알게 된 경우 웹 푸시와 어떻게 다른지 궁금하실 것입니다.

메시징 SDK (Firebase 클라우드 메시징 JS SDK)는 웹 푸시를 보다 쉽게 구현할 수 있도록 보이지 않는 곳에서 몇 가지 트릭을 실행합니다.

  • PushSubscription 및 다양한 필드에 신경 쓰지 않고 FCM 토큰 (문자열)만 신경 쓰면 됩니다.
  • 각 사용자의 토큰을 사용하면 독점 FCM API를 사용하여 푸시 메시지를 트리거할 수 있습니다. 이 API는 페이로드 암호화가 필요하지 않습니다. POST 요청 본문에서 일반 텍스트 페이로드를 보낼 수 있습니다.
  • FCM의 독점 API는 FCM 주제와 같은 커스텀 기능을 지원합니다. 이 기능은 문서화가 잘 되어 있지 않지만 웹에서도 작동합니다.
  • 마지막으로 FCM은 Android, iOS, 웹을 지원하므로 기존 프로젝트에서 함께 작업하는 것이 더 쉬운 팀과도 있습니다.

이는 내부적으로 웹 푸시를 사용하지만 목표는 추상화하는 것입니다.

이전 질문에서 말씀드렸듯이 웹 푸시를 단순히 브라우저 및 푸시 서비스로 간주하면 Firebase의 메시지 SDK를 라이브러리로 간주하여 웹 푸시 구현을 간소화할 수 있습니다.

다음에 수행할 작업

Codelab