Pusher create web notification service via javascript

  • 334 views
Uploaded on

Push Service 에 대한 이해와 프론트엔드 기술을 이용한 Push Service 구축 방법

Push Service 에 대한 이해와 프론트엔드 기술을 이용한 Push Service 구축 방법

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
334
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
13
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. NHN Technology Services FrontEnd Development Team Ji-Tae, Kim(jitae.kim@nhn.com) PUSHER Create web notification service via javascript NHN Technology Services FrontEnd Development Team Ji-Tae, Kim(jitae.kim@nhn.com) 14년 4월 24일 목요일
  • 2. 14년 4월 24일 목요일
  • 3. Because Web Messenger 14년 4월 24일 목요일
  • 4. Because Web Messenger 새로운 방에 초대된 것을 알 수 없을까? 14년 4월 24일 목요일
  • 5. Because Web Messenger 새로운 방에 초대된 것을 알 수 없을까? 메시지가 온 것을 알 수 없을까? 14년 4월 24일 목요일
  • 6. Because Web Messenger 새로운 방에 초대된 것을 알 수 없을까? 메시지가 온 것을 알 수 없을까? 브라우저가 꺼져 있으면 어떻게하지? 14년 4월 24일 목요일
  • 7. What? 14년 4월 24일 목요일
  • 8. What? Searching for Web Notifications 14년 4월 24일 목요일
  • 9. Alert 14년 4월 24일 목요일
  • 10. Alert 14년 4월 24일 목요일
  • 11. Alert • 가장 일반적인 웹 경고창 14년 4월 24일 목요일
  • 12. Alert • 가장 일반적인 웹 경고창 • 확인 누르기 전까지 아무것도 못함 14년 4월 24일 목요일
  • 13. Alert • 가장 일반적인 웹 경고창 • 확인 누르기 전까지 아무것도 못함 • Alert 은 말그대로 경고창.. 14년 4월 24일 목요일
  • 14. Popup 14년 4월 24일 목요일
  • 15. Popup 14년 4월 24일 목요일
  • 16. Popup • 새로운 브라우저를 열고 특정 페이지를 출력 14년 4월 24일 목요일
  • 17. Popup • 새로운 브라우저를 열고 특정 페이지를 출력 • 부모창이 필수이므로 Alert과 마찬가지로 브라우저 의존 14년 4월 24일 목요일
  • 18. Popup • 새로운 브라우저를 열고 특정 페이지를 출력 • 부모창이 필수이므로 Alert과 마찬가지로 브라우저 의존 • 알림이 올때마다 새로운 창을 여는 것은 14년 4월 24일 목요일
  • 19. Popup • 새로운 브라우저를 열고 특정 페이지를 출력 • 부모창이 필수이므로 Alert과 마찬가지로 브라우저 의존 • 알림이 올때마다 새로운 창을 여는 것은 미.친.짓 14년 4월 24일 목요일
  • 20. HTML5 Notifications 14년 4월 24일 목요일
  • 21. HTML5 Notifications 14년 4월 24일 목요일
  • 22. HTML5 Notifications • 원하는 기능에 가장 가까운 HTML5 API 14년 4월 24일 목요일
  • 23. HTML5 Notifications • 원하는 기능에 가장 가까운 HTML5 API • 지원하는 브라우저가 얼마 없음 14년 4월 24일 목요일
  • 24. HTML5 Notifications • 원하는 기능에 가장 가까운 HTML5 API • 지원하는 브라우저가 얼마 없음 • 사용하기 위해서는 사용자 확인 필수 14년 4월 24일 목요일
  • 25. HTML5 Notifications • 원하는 기능에 가장 가까운 HTML5 API • 지원하는 브라우저가 얼마 없음 • 사용하기 위해서는 사용자 확인 필수 한번
  • 26.   써볼까? 14년 4월 24일 목요일
  • 27. HTML5 Notifications • 원하는 기능에 가장 가까운 HTML5 API • 지원하는 브라우저가 얼마 없음 • 사용하기 위해서는 사용자 확인 필수 한번
  • 28.   써볼까? 
  • 29.   
  • 30.   
  • 31.   
  • 32.   
  • 33.   
  • 34.   
  • 35.   
  • 36.   
  • 37.   
  • 38.   
  • 39.   
  • 40.   
  • 41.   했는데... 14년 4월 24일 목요일
  • 42. But 14년 4월 24일 목요일
  • 43. But close browser 14년 4월 24일 목요일
  • 44. But close browser . 14년 4월 24일 목요일
  • 45. But close browser . . 14년 4월 24일 목요일
  • 46. But close browser . . Nothing 14년 4월 24일 목요일
  • 47. So..? 14년 4월 24일 목요일
  • 48. So..? Benchmark to Mobile 14년 4월 24일 목요일
  • 49. Mobile Notifications 14년 4월 24일 목요일
  • 50. APNS • 애플사에서 모바일 서비스를 위해 만든 Push 서비스 플랫폼 • APNS 에 앱&단말정보 등록 후 메시지 수신 14년 4월 24일 목요일
  • 51. C2DM • Android는 Push 서비스를 지원하지 않.았.다 • 개발자들의 불만때문에 프로요부터 C2DM을 적용 • APN과 같이 개방형이 아닌 구글 계정이 설정된 단말만 사용제한 http://www.mobizen.pe.kr/1074 14년 4월 24일 목요일
  • 52. 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 14년 4월 24일 목요일
  • 53. N-Push 1. NHN 통합 모바일 Push 서비스 2. 여러 Push 서비스들을 연결하는 일종의 Push Proxy Server 3. 플랫폼에 상관없는 Push 서비스 제공 가능 http://helloworld.naver.com/helloworld/1119 14년 4월 24일 목요일
  • 54. Push Notifications 14년 4월 24일 목요일
  • 55. Push Notifications 클라이언트를 Push 서버에 등록 14년 4월 24일 목요일
  • 56. Push Notifications 클라이언트를 Push 서버에 등록 Push 서버는 각 클라이언트에 메시지 전달 14년 4월 24일 목요일
  • 57. Server Feature ✓Client Registration API ✓Client Connect API ✓Send Message API 14년 4월 24일 목요일
  • 58. Client Feature ✓Regist to Push Server(Login) ✓Connect Push Server ✓Receive Push Message ✓Popup notification message 14년 4월 24일 목요일
  • 59. Architecture 14년 4월 24일 목요일
  • 60. Architecture Desktop & Mac 14년 4월 24일 목요일
  • 61. Architecture Node-webkit Notification client Desktop & Mac 14년 4월 24일 목요일
  • 62. Architecture Node.js Push server Node-webkit Notification client Desktop & Mac 14년 4월 24일 목요일
  • 63. Architecture Node.js Push server Node-webkit Notification client Desktop & Mac regist & connect 14년 4월 24일 목요일
  • 64. Architecture Node.js Push server Node-webkit Notification client 3rd party service web server mobile ... Desktop & Mac regist & connect 14년 4월 24일 목요일
  • 65. Architecture Node.js Push server Node-webkit Notification client 3rd party service web server mobile ... Desktop & Mac regist & connect key regist 14년 4월 24일 목요일
  • 66. Architecture Node.js Push server Node-webkit Notification client 3rd party service web server mobile ... Desktop & Mac send message regist & connect key regist 14년 4월 24일 목요일
  • 67. Architecture Node.js Push server Node-webkit Notification client 3rd party service web server mobile ... Desktop & Mac push message send message regist & connect key regist 14년 4월 24일 목요일
  • 68. Make 14년 4월 24일 목요일
  • 69. Make Push Server 14년 4월 24일 목요일
  • 70. Make Push Server Notification Client 14년 4월 24일 목요일
  • 71. Make Push Server Notification Client . 14년 4월 24일 목요일
  • 72. Make Push Server Notification Client . . 14년 4월 24일 목요일
  • 73. Make Push Server Notification Client . . Just Prototype 14년 4월 24일 목요일
  • 74. Server 14년 4월 24일 목요일
  • 75. Technique ✓Javascript ✓Node.js ✓express ✓socket.io 14년 4월 24일 목요일
  • 76. Regist Client API 14년 4월 24일 목요일
  • 77. Message Push API 14년 4월 24일 목요일
  • 78. Start Server 14년 4월 24일 목요일
  • 79. Client 14년 4월 24일 목요일
  • 80. Technique ✓HTML & CSS & Javascript ✓node-webkit ✓socket.io ✓nw-desktop-notifications.js 14년 4월 24일 목요일
  • 81. Technique ✓HTML & CSS & Javascript ✓node-webkit ✓socket.io ✓nw-desktop-notifications.js 14년 4월 24일 목요일
  • 82. Technique ✓HTML & CSS & Javascript ✓node-webkit ✓socket.io ✓nw-desktop-notifications.js 내부 구현이 템플릿 형태랑 안맞아서 별도로 구현 14년 4월 24일 목요일
  • 83. Login View 14년 4월 24일 목요일
  • 84. Tray & Tray Menu 14년 4월 24일 목요일
  • 85. Message Template 14년 4월 24일 목요일
  • 86. How to Use? 14년 4월 24일 목요일
  • 87. Anywhere 14년 4월 24일 목요일
  • 88. Anytime 14년 4월 24일 목요일
  • 89. Anybody 14년 4월 24일 목요일
  • 90. Just Call PUSH API 14년 4월 24일 목요일
  • 91. Use Where 14년 4월 24일 목요일
  • 92. Notification 14년 4월 24일 목요일
  • 93. Notification 14년 4월 24일 목요일
  • 94. Notification 14년 4월 24일 목요일
  • 95. Notification 14년 4월 24일 목요일
  • 96. Notification 14년 4월 24일 목요일
  • 97. Notification 14년 4월 24일 목요일
  • 98. Notification Anything 14년 4월 24일 목요일
  • 99. Everywhere 14년 4월 24일 목요일
  • 100. Everywhere “중요한건 어디에 사용할 수 있을까?” 14년 4월 24일 목요일
  • 101. Everywhere “중요한건 어디에 사용할 수 있을까?” IDEA! 14년 4월 24일 목요일
  • 102. NEXT ? 14년 4월 24일 목요일
  • 103. TODO List (1) ✓Authentication ✓Security ✓make notification template ✓multi platform ✓browser sync 14년 4월 24일 목요일
  • 104. TODO List (2) ✓auto login ✓settings ✓history ✓management ✓notification animation 14년 4월 24일 목요일
  • 105. Wait... 14년 4월 24일 목요일
  • 106. Wait... 웹 메신저에 적용 가능할까요? 14년 4월 24일 목요일
  • 107. Wait... 웹 메신저에 적용 가능할까요? Openfire Plugin 제작을 통해 가능 14년 4월 24일 목요일
  • 108. Wait... 웹 메신저에 적용 가능할까요? Openfire Plugin 제작을 통해 가능 . 14년 4월 24일 목요일
  • 109. Wait... 웹 메신저에 적용 가능할까요? Openfire Plugin 제작을 통해 가능 . . 14년 4월 24일 목요일
  • 110. Wait... 웹 메신저에 적용 가능할까요? Openfire Plugin 제작을 통해 가능 . . 사실 Openfire 자체가 Push Server 14년 4월 24일 목요일
  • 111. Wait... 웹 메신저에 적용 가능할까요? Openfire Plugin 제작을 통해 가능 . . 사실 Openfire 자체가 Push Server 14년 4월 24일 목요일
  • 112. Learned ✓API 구성, 소켓통신 활용 ✓node server, node-webkit ✓Push Service 이해 ✓Javascript 잠재력 확인 ✓서비스 개발의 어려움 14년 4월 24일 목요일
  • 113. Interesting! Funny! 14년 4월 24일 목요일
  • 114. Question? 14년 4월 24일 목요일
  • 115. Thanks! 14년 4월 24일 목요일