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 시연