smarti,스마트아이

html5 api 2

application Cache API

application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해준다.
따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있다.

application cache를 사용해서 생기는 장점은 다음과 같다.

 - 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있다.
 - 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있다.
 - 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 된다.
application cache를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API	ie	chrome	firefox	safari	opera
application cache	10.0	4.0	3.5	4.0	11.5

cache manifest 파일

application cache를 사용하기 위해서는 먼저 cache manifest 파일을 작성해야 한다.
cache manifest 파일은 웹 브라우저에 캐시(cache) 해야 할 파일과 캐시하지 말아야 할 파일을 알려준다.
이러한 mainfest 파일은 다음과 같이 세 개의 세션(session)으로 이루어진다.
 - CACHE MANIFEST : 처음 다운로드한 이후에 계속 캐시할 파일들을 기록한다.
 - NETWORK : 서버와의 접속이 필요한 파일들을 기록하며, 이 파일들은 절대로 캐시되지 않는다.
 - FALLBACK : 파일에 접속할 수 없을 때에 대체할 파일들을 기록한다.

캐시(cache)의 갱신

웹 브라우저는 다음과 같은 경우가 발생하면 캐시(cache)의 정보를 갱신하게 된다.
 - 사용자가 웹 브라우저의 캐시를 강제로 지웠을 경우
 - application cache가 프로그램 때문에 갱신됐을 경우
 - cache manifest 파일이 수정됐을 경우

문법

CACHE MANIFEST
# 2016-03-22 v1.0.1
test.html
test.css
test.js
 
NETWORK:
test.jpg
 
FALLBACK:
/ offline.html

한 번 캐시 되면 서버상의 파일을 수정해도, 웹 브라우저는 사용자 측에 캐시 되어 있는 버전의 파일만을 보여준다.
따라서 서버상의 파일을 수정한 후에는 반드시 웹 브라우저가 캐시를 갱신하도록 만들어야 한다.

이때 가장 많이 사용되는 방법이 cache manifest 파일 내의 주석 부분을 수정하는 것이다.
일반적으로 갱신 날짜 및 버전 정보를 주석으로 표시하고, 이 부분을 수정하여 웹 브라우저가 캐시를 갱신하도록 유도한다.

 

Web Worker API

웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 된다. web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트이다.

즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원한다. 따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해준다..

web worker를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

API	ie	chrome	firefox	safari	opera
web worker	10.0	4.0	3.5	4.0	11.5

web worker 지원 여부 확인

web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.

문법

if (typeof(Worker) !== "undefined") {
    // web worker를 위한 코드 부분 }
else {
    // web worker를 지원하지 않는 브라우저를 위한 안내 부분
}

web worker 파일 생성

web worker의 동작을 확인하기 위해 소수를 찾는 외부 자바스크립트 파일을 만든다.

예제

var n = 1;
search: while (true) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
        if (n % i == 0)
            continue search;
        postMessage(n);
}

위의 예제에서 postMessage() 메소드는 HTML 문서에 결과를 전달하기 위해 사용한다.

web worker 객체 생성

위에서 만든 web worker 파일을 불러올 HTML 파일을 만든다.

예제

if(typeof(webworker) == "undefined") {
    webworker = new Worker("/examples/web_worker.js");
}

위의 예제는 web worker 파일이 존재하지 않으면, 새로운 web worker 객체를 만들어 준다.

worker 객체와의 연결

onmessage 이벤트 리스너(event listener)를 통해 web worker 파일과 메시지를 주고받을 수 있다.

예제

webworker.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
};

위의 예제에서 web worker 파일이 메시지를 보내면 해당 이벤트 리스너(event listener)가 실행된다.
이 때 web worker 파일이 보낸 정보는 event.data에 저장된다.

web worker 객체의 실행 종료

web worker 객체는 생성되고 나서 종료될 때까지 계속해서 메시지를 받을 준비를 한다.
따라서 웹 브라우저나 컴퓨터의 자원을 돌려주기 위해서는 terminate() 메소드를 사용하여 web worker를 반드시 종료해줘야 한다.

예제

webworker.terminate();

web worker 객체의 재사용

web worker 객체가 종료된 후에는 web worker의 값을 undefined로 설정해야만 web worker 객체를 재사용할 수 있다.

예제

webworker = undefined;

web worker 예제

다음 예제는 앞에서 살펴본 web worker의 동작을 하나의 예제로 보여주는 예제이다.

예제

var webworker;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js"); }
        webworker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; 
    }
}
function stopWorker() { 
    webworker.terminate();
    webworker = undefined;
}

 

SSE (Server Sent Events) API

server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정한다.

server sent events를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API	ie	chrome	firefox	safari	opera
server sent events	지원안함	6.0	6.0	5.0	11.5

server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.

문법

if (typeof(EventSource) !== "undefined") {
    // server sent events를 위한 코드 부분
} else {
    // server sent events를 지원하지 않는 브라우저를 위한 안내 부분
}

다음 예제는 server sent events를 이용해 5초마다 웹 페이지를 갱신하는 예제이다.

예제

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("/examples/media/sse.php");
    source.onmessage = function(event) { 
        document.getElementById("result").innerHTML += event.data + "<br>"; 
    };
}

위의 예제에서 사용한 서버 측 PHP 파일인 sse.php 파일은 다음과 같다.

sse.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

EventSource 객체 메소드

위의 예제에서 onmessage 이벤트를 사용하여 메시지를 가져 왔다. 다른 이벤트도 존재하는데 이벤트 메소드의 종류는 아래와 같다.

이벤트	설명
onopen	서버에 대한 연결이 열릴 때
onmessage	메시지가 수신되었을 때
onerror	오류가 발생했을 때

 

[세상살이] - 엣지 브라우저 확장 기능으로 마우스 우클릭 해제

엣지 브라우저 확장 기능으로 마우스 우클릭 해제

[세상살이] - 색으로 대표되는 컬러푸드 - White (화이트푸드)

색으로 대표되는 컬러푸드 - White (화이트푸드)

[세상살이] - 네이버 스마트렌즈로 사진 찍어서 번역하기

네이버 스마트렌즈로 사진 찍어서 번역하기

[코딩공부] - HTML 기본요소 1, meta tag(메타태그), color(색), background(배경)

HTML 기본요소 1, meta tag(메타태그), color(색), background(배경)

[디자인공부] - 포토샵으로 금박, 은박 문자 만들기

포토샵으로 금박, 은박 문자 만들기