Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine...

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: [email protected]

mailto:[email protected]

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이 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


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)


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)을 포기한 프로젝트 사례들


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


"start_url": "/?utm_source=homescreen" "start_url": "/?utm_source=homescreen" "start_url": "/?utm_source=homescreen"

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”


Web App Manifest


(4) launch style 지정

1) display type

Web App Manifest



2) initial orientation

Web App Manifest



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: [email protected]

mailto:[email protected]

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”


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


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


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


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


ICE (STUN, TURN)

• What’s the problem?


Client A

Signaling

Server

Client B

1 NAT

Local

IP/PORT

Public

IP/PORT


ICE (STUN, TURN) STUN(RFC 5389)


Client A

STUN

Server

Client B

1

NAT Local

IP/PORT

Public

IP/PORT

Signaling

Server 2

3


ICE (STUN, TURN) TURN(RFC 5766)


Client A

STUN

Server

Client B

1

NAT Local

IP/PORT

Public

IP/PORT

Signaling

Server 2

TURN

Server 3


ICE (STUN, TURN)

What’s the ICE?

STUN TURN


Candidate

Client A

STUN

Server

Client B

1

NAT Local

IP/PORT

Public

IP/PORT

Signaling

Server 2

3


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

Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine...

Documents

Transcript of Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine...