web push - uracle · 2018-08-23 · 3 web push 지원브라우저 web browser windows mac android...
TRANSCRIPT
Web Push
2
What is Web Push?
Web Push는W3C Push API (현Working Draft 15 December 2017)로작성되고있는표준기술으로아래와같은특징을가지고있습니다.
웹사이트를매개로웹브라우저에 Push 메시지를발송할수있으며,
Android 기기에서도별도의앱설치없이사용이가능합니다.
웹사이트에접속하고있지않은경우에도웹브라우저를통해
메시지수신이가능합니다.
웹사이트방문자에게 Push 메시지발송을통해
새로운마케팅채널로활용할수있습니다.
Push 메시지수신을위하여사이트 UI를침해하지않으므로,
UI 수정을하지않아도됩니다.
3
Web Push 지원브라우저
Web Browser Windows Mac Android
최소 지원 버전
(메시지 데이터 미지원)
Google Chrome 42 42 42
Mozilla Firefox 44 44 48
Samsung Internet X X 4.0+
전체 지원 버전
(메시지 데이터 지원)
Google Chrome 50 50 50
Mozilla Firefox 44 44 48
Samsung Internet X X 5.0+
웹 브라우저의 개인정보 보호 모드(시크릿 모드)에서는 Web Push가 지원되지 않음.
Android 기기의 경우 모바일 앱과 동일한 형태로 메시지 수신이 가능합니다.
4
웹브라우저점유율통계–국내기준 (2017.4 – 2018.4)
Chrome IE Safari Samsung Internet Edge Firefox
55.24% 17.22% 12.83% 9.69% 1.64% 0.76%
5
CORS (Cross Origin Resource Sharing) 란?
Service Worker 란?
UPMC
웹사이트
Web Push 사용을위한준비
Web Push를 이용하기 위해서는 아래와 같은 사전 준비가 필요 합니다.
• HTTPS (SSL) 적용• Service Worker 적용• Web Push API 적용
• HTTPS (SSL) 적용• CORS 설정
Morpheus PUSH
• 웹 브라우저에 설치되어 백그라운드에서실행되는 스크립트
• Web Push 수신및알림팝업 / 수신확인/ 읽음확인과같은 Push 수신에대한처리를담당
• 브라우저를통한 UPMC API 호출시동일한도메인외의도메인(웹사이트)에서호출할수있도록하는 W3C 표준기술
6
서비스등록정책
<1 User, Multi device>
com.uracle.push.demo
<1 User, One device>
com.uracle.push.demo
kr.morpheus
한 개의 앱 ID로모바일, 웹 푸시를동시에 사용 가능
모바일 용 앱 ID와웹 푸시 용 앱 ID가
각각 필요
7
Public ProviderUPNS
Admin UMPC
Morpheus Push System Architecture
Push 5.1 은MQTT 기반의 Private Push 기능과 GCM, APNs 을활용한 Public Push 기능을고객의정책에맞게사용할수있으며타겟팅성능향상을위한캐싱기능을통해발송성능극대화를효과적으로수행합니다.
iOSClient
• User Device• Message Send• Statistics• Monitoring
• Client Interface• Sender Service• Receiver Service• Legacy Interface• Cache Handler• Distributor
• MQTT Handler• Session Store• Queue Handler• Topic Store
• Message Queue• GCM Manager• APNS Manager• WPNS Manager• Monitoring Agent
Morpheus PUSH
Legacy System
System관리자
APNS
GCM
UPNS
Service운영자
GCMClient
Android Push Agent
Web Service Worker
WPNS
8
Morpheus Push 서비스개념도
Push 서비스는크게발송채널과 Push 발송기, 그리고 Push 발송메시지입력등을수행하는 UI로구성됩니다.
UPMC
PUSH Agent
(Library)
수신,읽음확인/ Rich Contents 조회단말/사용자등록
PublicProvider
FCM
APNshttp2
UPNS
발송채널 Push 발송기
SMS G/W
O&M
SMSSender
Legacy 시스템
…
캠페인관리
CRM
MPS
ServiceWorker
9
Web Push 서비스절차
Web Push 서비스흐름은아래와같습니다.
MorpheusPush Server
LegacyLegacy
Web Push
Google FCM / Mozilla MPS
서비스 등록 /Service Worker 설치 WPNS 발송
각 사용자의 Endpoint URL에 따라 메시지 발송https://updates.push.services.mozilla.com/wpush/v2/gAAAAABawuAKOsci3lRO...https://fcm.googleapis.com/fcm/send/eYzxe24KtaY:APA91bHKhLx1guRHNbgh18L...
ServiceWorker
수신 / 읽음 확인
사용자 브라우저에서 알림 권한 요청
ServiceWorker에서메시지 수신 / 복호화 후 알림 팝업
10
Web Push 알림예제
Web Push를통해전달받는메시지는아래와같이표시됩니다.
<Chrome>
<Firefox>
<Android>
항목 설명
아이콘해당 웹 사이트를 나타낼 수 있는 Icon
https URL로 전달
제목 메시지의 제목 또는 사이트 명
메시지 메시지 내용
링크 URL 알림 클릭 시 이동 할 URL
11
국내 Web Push 서비스업체
헤리나 http://www.hearina.com
서비스 유형 ASP
지원 기기 Android 웹 브라우저
사용 업체http://www.pippin.co.krhttp://www.i-arden.com
12
국내 Web Push 지원서비스
SBS 스브스 뉴스 Kakao 플러스 친구 관리자1:1 채팅 알림
13
시 연
Web Push 시연