View
3
Download
0
Category
Preview:
Citation preview
Web 최신 기술 동향 및 Tizen 플랫폼의 Web 최신 기술 지원 방향
삼성전자 SWC | Web Platform Lab | 박중헌
삼성전자 SWC | Web Platform Lab | 김현준
Tizen Web Engine - Blink
Progressive Web App
WebRTC
WebVR
01
02
03
04
Contents
Presenter
JOONGHUN PARK
Samsung Electronics
Tizen Web Engine Developer
WebKit Committer
E-mail: jh718.park@samsung.com
Tizen 3.0 플랫폼의 Web Engine - Blink
Tizen Web Layout Engine의 변경
• 2013년 4월 3일 Google Blink forking 발표
• Tizen 2.4 WebKit -> Tizen 3.0 Blink
Blink
https://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html
Tizen 3.0 플랫폼의 Web Engine - Blink
Tizen이 Blink로의 Web Engine 변경을 통해 얻고자 하는 것
• Rich HTML5 Features Support
• Fast Support for the latest HTML5 Features – W3C 최신 표준의 빠른 지원
Progressive Web App, WebRTC, WebVR, etc
2016년 11월 기준
Chrome Canary 56와 Safari Technology Preview 17의
html5test.com score 비교
Chrome Canary 56 Safari Technology Preview 17
Tizen 2.4 플랫폼의 Web Engine – WebKit
https://webkit.org/status/#specification-service-workers
In WebKit Project,
Progressive Web App의
Core Component -
Service Worker
Not supported yet
Tizen 3.0 플랫폼의 Web Engine - Blink
https://www.chromestatus.com/features/6461631328419840
In Blink Project,
Progressive Web App의
Core Component -
Service Worker
Enabled by default
from chrome 40
Progressive Web App
App과 같은 사용자 경험을 제공하는 Web Model
Web의 장점 + App의 장점
websites (O), packaged web app (X)
Progressive Web App
Tizen 3.0 - Blink Engine Adoption을 통해 Progressive Web App 지원
Progressive Web App
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Progressive Web App Example - Flipboard
Progressive Web App
1. Platform App Installer를 이용하는 명시적 Install 과정이 필요없다(Service Worker)
2. 불안정한 network 혹은 offline 환경에서도 loading이 빠르다(App Shell – Service Worker)
3. push notification을 제공한다(Push API + Notification API)
4. home screen에 아이콘을 둘 수 있다(App manifest)
5. top-level로서 full screen으로 동작할 수 있다
https://en.wikipedia.org/wiki/Progressive_web_app
Progressive Web App의 장점 5가지
Progressive Web App
App Shell – user interface를 구성하는 HTML, CSS 그리고 Javascript
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
Progressive Web App
Progressive Web App의 등장배경
웹을 앱으로 만들려는 이전의 시도 – Hybrid Apps
Progressive Web App
https://s3.amazonaws.com/dfc-wiki/en/images/c/c2/Native_html5_hybrid.png
• Full System API 접근가능
• 패키징되어 단일 플랫폼에서만 실행가능
• Full System API 접근가능
• 모든 플랫폼에서 실행가능
• 부분적 System API 접근가능
• 모든 플랫폼에서 실행가능한 리소스(HTML, CSS, Javascript)
Progressive Web App
Hybrid Web App
using
Apache Cordova
Apache Cordova
http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/
public class CordovaViewTestActivity extends Activity implements CordovaInterface { CordovaWebView cwv; /* Called when the activity is first created. */ public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); cwv = findViewById(R.id.tutorialView); Config.init(this); cwv.loadUrl(“file:///index.html”); }
http://docs.phonegap.com/en/3.0.0/guide_platforms_android_webview.md.html#Android%20WebViews
Hybrid App Framework
Progressive Web App
offline에서 동작
home screen에 위치
system API들에 접근
user들을 다시 불러옴(push notification)
App Packaging 수행
App Store를 통한 배포 및 앱검색
앱스러움(Appyness)
URLs and Links
검색엔진을 통한 컨텐츠 직접접근
App Packaging 불필요
멀티플랫폼에서 동일한 사용성 보장
웹스러움(Webyness)
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Hybrid App의 단점 – 앱이 되기 위해(Appyness) 웹의 일부(Webyness)를 포기
Progressive Web App
• Adobe AIR Applications
• Windows Store Apps
• Chrome Packaged Applications
• Firefox OS Packaged Applications
• Cordova/PhoneGap and Crosswalk Apps
• BlackBerry WebWorks Apps
• W3C Widgets (these enjoyed several implementations)
• WebOS Apps
• Chromium Embedded Framework
• Electron
앱스러움(Appyness)을 위해 웹스러움(Webyness)을 포기한 프로젝트 사례들
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Progressive Web App
Web App Manifest
Service Worker
Push API
…
Progressive Web App의 구성
Specifications
Progressive Web App
Web App Manifest
https://www.w3.org/TR/appmanifest/
Web App Manifest
Web App Manifest
- Web App metadata를 모아놓는 json 파일
- Web App이 갖는 여러 속성을 지정한다(앱 이름, display type, icon link 등)
Web App Manifest
Web App Manifest의 기술과 참조
(1) 기술
• manifest.json
(2) 참조
• manifest 파일경로 지정
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
Web App Manifest
Web App Manifest 속성 기능
(1) 시작 url 지정
(2) icon customizing
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
"start_url": "/?utm_source=homescreen" "start_url": "/?utm_source=homescreen" "start_url": "/?utm_source=homescreen"
Web App Manifest
Web App Manifest 속성 기능
(3) splash screen 추가
1) Image, Title 지정
Image : icons array
Title : short_name (home screen에서 사용)
, name (install banner에서 사용)
2) background color 지정
3) theme color 지정
“theme_color” : “aliceblue”
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
Web App Manifest
Web App Manifest 속성 기능
(4) launch style 지정
1) display type
Web App Manifest
Web App Manifest 속성 기능
(4) launch style 지정
2) initial orientation
Web App Manifest
Web App Manifest 속성 기능
(4) launch style 지정
3) site-wide theme color
Progressive Web App
Service Worker
https://www.w3.org/TR/service-workers/
Progressive Web App
Service Worker – Event-driven background processing
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
sw
Navigation / Resource Request
sw sw
Page Page Page
scope 1 scope 2 scope 3
1. fetch event
2. onfetch event handler
Cache
3. Cache.matchAll
4. Matched Resource
7. Response To Client
5. Request Resource
6. Request Response
Web App Resource Caching을 통한
Offline 실행 지원
Service Worker
Service Worker를 기반으로 하는 아래의 specification들이 가능해짐
Push notifications
Background Sync
Periodic Background Sync
…
https://www.w3.org/TR/service-workers/
Service Worker
1. Offline 우선으로 동작
2. background event 처리
3. 웹 서버 업데이트가 곧 앱 업데이트를 의미
Service Worker의 특징 3가지
Service Worker
1. Same Origin에서 동작
2. HTTPS 기반으로 동작
3. Registration 기반으로 동작 – sw가 위치한 scope 아래의 페이지만 제어 가능.
4. 버전 관리를 위해 waiting worker, active worker 존재
5. 필요없을 때는 종료되고, 필요할때 재시작
6. ES6 Promise 기반으로 동작
Service Worker의 기본동작
Service Worker
Service Worker Life Cycle Install var sw = navigator.serviceWorker;
sw.register(scriptURL, {scope: scopeURL});
Resource Pre-caching oninstall = e=> { /* cache here */ }
Managing Cached Resource onactivate = e => { /* delete old cached resourses */ }
Handling Fetch Event Proxying network.
onfetch = e=> { /* processing for e.request */}
Update According To 24 Hours-Rule Invoke registration.update() every navigation.
Bypass any browser caches if the previous fetch occurred over
24 hours.
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
또는 이전버전의 SW
현재 버전의 SW
install
다음 페이지 방문시 현재 버전의
SW activation
install 실패.
이전 버전의
SW및 resource
계속 사용
SW 버전관리 목적
Progressive Web App
Push Notification
=
Push API
https://www.w3.org/TR/push-api/
+
Notification API
https://notifications.spec.whatwg.org/
Push Notification
Facebook made push
notification available
on their site
http://www.androidauthority.com/facebook-push-notifications-now-available-via-chrome-no-official-app-needed-641986/
Push Notification
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/permissions-subscriptions
Progressive Web App
Presenter
HYUNJUNE KIM
Samsung Electronics
Tizen Web Engine Developer
Chromium Committer
E-mail: hyunjune.kim@samsung.com
WebRTC
WebRTC
https://www.w3.org/TR/mediacapture-streams/ https://www.w3.org/TR/webrtc/
WebRTC
• Support Audio/Video Chat
• Support P2P data transportation
• Support Javascript API for developers
• No need to install Plug-In
WebRTC
WebRTC RTCPeer
Connection
Media
Stream
RTCData
Channel
WebRTC - MediaStream
MediaStream
MediaElement
<video, audio>
RTCPeerConnection
MediaRecoder
ImageCapture
Web Audio
Network
Streaming
Data (RTCPeerConnection)
Video
Tracks
Audio
Tracks
“All tracks in a MediaStream are intended to be synchronized when rendered”
WebRTC - MediaStream
WebRTC - MediaStream
EXAMPLE
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
navigator.getUserMedia({video: true, audio: true},
successCallback, errorCallback);
function successCallback(stream) {
// Sink MediaStream to MediaElement, RTCPeerConnection or etc.
videoElement.src = window.URL.createObjectURL(stream);
}
WebRTC - RTCPeerConnection
Hand
shake
SDP
ICE Candidate
Signaling
server
WebRTC - RTCPeerConnection
Caller Callee Signaling Server STUN Server
Offer with SDP
Offer with SDP
Answer with SDP
Answer with SDP
Get (host:port) from STUN server
Send candidate(host:port) to Callee
Get (host:port) from STUN server
Send candidate(host:port) from STUN
Send candidate(host:port) to Caller
Send candidate(host:port) to Caller
WebRTC - RTCPeerConnection
SDP : Session Description Protocol (RFC 4566)
• Metadata to understand Resolution and Codec for peers
v=0
o=- 1832107925485887680 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
... (Omit) …
m=video 9 RTP/SAVPF 100 116 117 96
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
… (Omit) …
a=rtcp-mux
a=rtpmap:100 VP8/90000
a=ssrc:2305936986 imageattr:* [x=720,y=576]
a=ssrc:2305936986 framerate:30
... (Omit) …
a=ssrc:2305936986 mslabel:I3PeRUhDIUPcnWJPvLVD2BwTmotHwfgxu9DO
a=ssrc:2305936986 label:34d44b3d-e3cb-4220-bc7c-5b3e72b7b7ee
https://tools.ietf.org/id/draft-nandakumar-rtcweb-sdp-01.html
WebRTC - RTCPeerConnection
ICE (STUN, TURN)
• What’s the problem?
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
Signaling
Server
Client B
1
2
WebRTC - RTCPeerConnection
ICE (STUN, TURN)
• What’s the problem?
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
Signaling
Server
Client B
1 NAT
Local
IP/PORT
Public
IP/PORT
WebRTC - RTCPeerConnection
ICE (STUN, TURN) STUN(RFC 5389)
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
STUN
Server
Client B
1
NAT Local
IP/PORT
Public
IP/PORT
Signaling
Server 2
3
WebRTC - RTCPeerConnection
ICE (STUN, TURN) TURN(RFC 5766)
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
STUN
Server
Client B
1
NAT Local
IP/PORT
Public
IP/PORT
Signaling
Server 2
TURN
Server 3
WebRTC - RTCPeerConnection
ICE (STUN, TURN)
What’s the ICE?
STUN TURN
WebRTC - RTCPeerConnection
Candidate
Client A
STUN
Server
Client B
1
NAT Local
IP/PORT
Public
IP/PORT
Signaling
Server 2
3
WebRTC - RTCPeerConnection
Signaling server
• Exchange SDP and candidate information(Basically)
• How to Websocket, REST API, …
WebRTC - RTCDataChannel
EXAMPLE
var pc = new RTCPeerConnection();
var dataChannel = pc.createDataChannel(“Test”, options);
dataChannel.onopen = function () { dataChannel.send(‘Hello World!!”); }
dataChannel.onmessage = function (e) { console.log(e.data); }
dataChannel.onerror = function (e) {}
dataChannel.onclose = function () {}
• Send string data, binary data
• Familiar API
WebRTC - Debug
• chrome://webrtc-internals
• Event Logs
• SDP, Candidate Logs
• Multimedia Information
WebRTC - DEMO
WebVR
WebVR
https://w3c.github.io/webvr/
WebVR
Web VR API
(position, orientation, projection matrix, … )
WebVR API
WebGL API
WebVR
EXAMPLE
var vrDisplay;
navigator.getVRDisplays().then(function (displays) {
if (displays.length > 0)
vrDisplay = displays[0];
});
WebVR
EXAMPLE var frameData = new VRFrameData();
function onVRFrame() {
vrDisplay.requestAnimationFrame(onVRFrame);
vrDisplay.getFrameData(frameData);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
vrDisplay.submitFrame();
}
vrDisplay.requestPresent([{ source: canvas }]).then(function() {
vrDisplay.requestAnimationFrame(onVRFrame);
} );
Left Right
Copyright ⓒ 2016 SAMSUNG ELECTRONICS. ALL RIGHTS RESERVED
THANK YOU
Recommended