pusher create web notification service via javascript

NHN Technology Services FrontEnd Development Team Ji-Tae, Kim([email protected])

PUSHERCreate web notification service via javascript

NHN Technology Services FrontEnd Development Team Ji-Tae, Kim([email protected])

14년 4월 24일 목요일

mailto:[email protected]

mailto:[email protected]

Because Web Messenger



새로운 방에 초대된 것을 알 수 없을까?




메시지가 온 것을 알 수 없을까?




메시지가 온 것을 알 수 없을까?

브라우저가 꺼져 있으면 어떻게하지?


What?


What?Searching for Web Notifications


Alert


Alert

• 가장 일반적인 웹 경고창


Alert


• 확인 누르기 전까지 아무것도 못함


Alert


• 확인 누르기 전까지 아무것도 못함

• Alert 은 말그대로 경고창..


Popup


Popup

• 새로운 브라우저를 열고 특정 페이지를 출력


Popup


• 부모창이 필수이므로 Alert과 마찬가지로 브라우저 의존


Popup



• 알림이 올때마다 새로운 창을 여는 것은


Popup



• 알림이 올때마다 새로운 창을 여는 것은 미.친.짓14년 4월 24일 목요일

HTML5 Notifications


HTML5 Notifications

• 원하는 기능에 가장 가까운 HTML5 API


HTML5 Notifications


• 지원하는 브라우저가 얼마 없음


HTML5 Notifications



• 사용하기 위해서는 사용자 확인 필수


HTML5 Notifications




한번�� 써볼까?


HTML5 Notifications




한번�� 써볼까?

��

�� 했는데...


But


Butclose browser


Butclose browser

.


Butclose browser

.

.


Butclose browser

.

.

Nothing


So..?


So..?Benchmark to Mobile


Mobile Notifications


APNS

• 애플사에서 모바일 서비스를 위해 만든 Push 서비스 플랫폼

• APNS 에 앱&단말정보 등록 후 메시지 수신


C2DM

• Android는 Push 서비스를 지원하지 않.았.다

• 개발자들의 불만때문에 프로요부터 C2DM을 적용

• APN과 같이 개방형이 아닌 구글 계정이 설정된 단말만 사용제한

http://www.mobizen.pe.kr/1074




MPNS

• Microsoft Push Notification Service

• windows phone 8 / windows phone os 7.1 에 적용

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402558(v=vs.105).aspx




N-Push

1. NHN 통합 모바일 Push 서비스

2. 여러 Push 서비스들을 연결하는 일종의 Push Proxy Server

3. 플랫폼에 상관없는 Push 서비스 제공 가능

http://helloworld.naver.com/helloworld/1119




Push Notifications


Push Notifications클라이언트를 Push 서버에 등록


Push Notifications클라이언트를 Push 서버에 등록

Push 서버는 각 클라이언트에 메시지 전달


Server Feature✓Client Registration API

✓Client Connect API

✓Send Message API


Client Feature✓Regist to Push Server(Login)

✓Connect Push Server

✓Receive Push Message

✓Popup notification message


Architecture


ArchitectureDesktop & Mac


Architecture

Node-webkit

Notification client

Desktop & Mac


Architecture

Node.js

Push server

Node-webkit

Notification client

Desktop & Mac


Architecture

Node.js

Push server

Node-webkit

Notification client

Desktop & Mac

regist & connect


Architecture

Node.js

Push server

Node-webkit

Notification client

3rd party service

web server mobile ...

Desktop & Mac

regist & connect


Architecture

Node.js

Push server

Node-webkit

Notification client

3rd party service


Desktop & Mac

regist & connect

key regist


Architecture

Node.js

Push server

Node-webkit

Notification client

3rd party service


Desktop & Mac

send message

regist & connect

key regist


Architecture

Node.js

Push server

Node-webkit

Notification client

3rd party service


Desktop & Mac

push message

send message

regist & connect

key regist


Make


MakePush Server


MakePush Server

Notification Client


MakePush Server

Notification Client

.


MakePush Server

Notification Client

.

.


MakePush Server

Notification Client

.

.

Just Prototype


Server


Technique✓ Javascript

✓Node.js

✓express

✓ socket.io


Regist Client API


Message Push API


Start Server


Client


Technique✓HTML & CSS & Javascript

✓node-webkit

✓ socket.io

✓nw-desktop-notifications.js


Technique✓HTML & CSS & Javascript

✓node-webkit

✓ socket.io

✓nw-desktop-notifications.js내부 구현이 템플릿 형태랑 안맞아서 별도로 구현


Login View


Tray & Tray Menu


Message Template


How to Use?


Anywhere


Anytime


Anybody


Just Call PUSH API14년 4월 24일 목요일

Use Where


Notification


Notification

Anything


Everywhere


Everywhere“중요한건 어디에 사용할 수 있을까?”


Everywhere“중요한건 어디에 사용할 수 있을까?”

IDEA!


NEXT ?


TODO List (1)✓Authentication

✓Security

✓make notification template

✓multi platform

✓browser sync


TODO List (2)✓auto login

✓ settings

✓history

✓management

✓notification animation


Wait...


Wait...웹 메신저에 적용 가능할까요?



Openfire Plugin 제작을 통해 가능




.




.

.




.

.

사실 Openfire 자체가 Push Server


Learned✓API 구성, 소켓통신 활용

✓node server, node-webkit

✓Push Service 이해

✓ Javascript 잠재력 확인

✓서비스 개발의 어려움


Interesting! Funny!


Question?


Thanks!
