# web push

웹 푸시(Web Push Notification)를 사용해봅시다.
들어가며 회사에서 만들고 있는 서비스는 paid 마케팅을 하고 있지 않다. 따라서 앱 서비스에서 사용하는 푸시는 주요한 마케팅 수단이다. 유저에게 직접적으로 메시지를 전달할 수 있고, 무엇보다도 푸시 알림 sass 이용료 등을 제외하면 무료이기 때문이다. 그렇지만 현재 만들고 있는 서비스의 MAU에서 앱 사용자들이 차지하는 비율은 크지 않다. 상당수의 유저는 웹을 통해 우리 서비스를 사용하고 있다. 앞서 말했듯 앱 푸시를 주요 마케팅 수단으로 활용하고 있지만 훨씬 많은 유저를 대상으로 마케팅을 할 수 있다면 좋겠다는 생각이 들었다가 이전에 어떤 영상에서 잠깐 소개했던 웹 푸시가 떠올랐다. 앱 푸시 알림에 사용하는 원시그널이라는 서비스에서도 웹 푸시 기능을 지원하고 있는 만큼 실제 마케팅 수단으로 활용될 수 있는 기술이라는 생각이 있었고, WWDC 2022에서 발표된 바와 같이 mac os / ios도 지원하는 기술이라 잘만 파악해두면 우리 서비스에도 적용할 수도 있겠다는

[WEB] web push, 이렇게 쉬운거였어?
사용자들에게 푸쉬 알림을 보내고 싶은데.. > 난 앱 개발자가 아닌데.. > 언제 또 앱 개발 공부를 하지.. 앱 개발 안해도 푸쉬 알림을 보낼 수 있습니다! 웹 푸쉬를 활용하면 브라우저의 푸쉬 기능을 입맛대로 사용할 수 있습니다! 🔑웹 푸쉬 구현에 앞서.. 웹 푸쉬 구현에 앞서 실습 환경은 아래와 같습니다. 다른 프레임워크라고 하더라도 기본적인 구조는 같으니 이해하시기에 어렵지 않으실 겁니다! Vue (v3.3.4) Node Firebase firestore ( 모바일 기준 ) 웹 푸쉬는 카카오 브라우저 및 네이버 브라우저에서는 동작하지 않습니다. 적절한 조치를 취해 기본 브라우저(삼성, 크롬, 사파리)로 유도해야합니다. IOS의 경우, 16.4버전
[카카오 프로젝트] 알림 도입 배경
프로젝트 요구 사항 ! 알림을 도입하면 가장 중요하게 생각했던 건 사용자가 접속해있지 않아도 처리되는 것 ! 알림 발송 기능이 가능한 기술 웹소켓(WebSocket) 사용하기 WebRTC를 공부하면서 조금 공부했던 웹소켓은 애초에 양방향 통신이 가능한 프로토콜이다. (그래서 웬만하면 이걸 쓰고 싶었다...) 그렇다보니, 웹소켓을 사용하면 서버에서 클라이언트로 실시간 데이터를 보낼 수 있는 장점이 있고, Spring Boot의 Spring WebSocket을 사용하여 간단하게 웹소켓을 구현할 수 있다. 하지만, 사용자가 접속을 종료해 통신이 불가능한 상황이라면 어떻게 해야 하는 문제에 부딪혔다. Server-Sent Events 사용하기 Server-Sent Events는 서버에서 클라이언트로 단방향 데이터를 보내는 기술로 Spring Boot에서는 Spring Web Flux를 사용하여 충분한 구현이 가능하다고 하다. 클라이언트에서도EventSour

Web Push | React + FCM 구현하기 (feat. pwa, service worker)
📩 Web Push 웹에서도 네이티브 앱처럼 푸시 알람을 받을 수 있습니다. 웹의 사용성을 네이티브 앱처럼 개선하기 위해서 나온 기술인 PWA(Progressive Web Application)을 활용하면 가능합니다. 🚀 PWA PWA는 Progressive Web Application으로, 웹이 웹의 장점과 네이티브 앱의 장점을 모두 가질수 있도록 다양한 기술들과 표준 패턴을 사용해 개발된 웹 앱을 말합니다. PWA 는 여러 가지의 기술의 집합체이며, 대표적인 기술에는 오프라인에서 동작, 설치, 동기화, 푸시 알림 등이 있습니다. PWA을 개발하기 위해서는 Service Worker 와 Webp App Manifest 를 알아야 합니다. ⏱ 서비스워커 - Service Worker 웹 푸시 알림 - Web Push Notification 서비스워커는 자바스크립트 파일로 **브라우저가 백그라운드에