Service workers.

AppCache(Application Cache)를 적용할 때, 가끔씩 석연치 않은 동작이 발견될 때가 있다는 제보가 들어왔습니다.

하여, AppCache를 사용할 때의 유의점 또는 자체적인 문제가 있는 지를 알아보겠습니다.

AppCache?

AppCache는 웹어플리케이션을 오프라인에서 동작할 수 있도록 지원하기 위해서 개발된 메카니즘입니다.

이 기술을 적용함으로써 다음과 같은 이점을 가질 수 있습니다.

오프라인 브라우징: 사용자가 오프라인인 상태에서도 페이지를 전환할 수 있다.

속도: 캐시된 리소스는 로컬에 위치하며, 더욱 빠르게 로드된다.

서버 부하 감소: 서버에서 변경된 리소스만을 다운로드 한다.

자세한 내용은 아래의 링크를 참조하세요.

https://developer.mozilla.org/ko/docs/Web/HTML/Using_the_application_cache

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

여기에 중요한 메시지가 있는데, 영문 페이지에서만 보여집니다. -_-;;

그 내용은 아래와 같습니다.

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

AppCache는 웹표준에서 삭제되었으며, 아직까지는 많은 browser가 이를 지원하지만 점차 퇴출될 것이다.

영문 위키피디아에서 AppCache를 찾아보니, 대신 Service worker를 사용하라고 권고하고 있네요.

https://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

AppCache는 어떤 문제가 있을까요?

재미있게도 Service worker guide 문서에서 잘 정리된 내용을 찾을 수 있었습니다.

AppCache의 디자인이 단일페이지에서만 특히 잘 동작하고 복수의 페이지를 가진 환경에서 훌륭하게 동작하지 않으며, 실제로 많은 문제를 가지고 있다고 합니다. 문제에 대한 내용은 link를 참조하세요. (#)

Service worker?

오프라인을 통제할 수 있는 권한을 개발자에게 부여하여 오프라인 환경을 지원할 수 있도록 해주는 API 입니다.

chrome browser를 통해 google, youtube, facebook이 notification을 띄우는 녀석의 정체가 드러났습니다. :-)

Service worker는 DOM에 직접 접근할 수 없습니다.

Service worker를 사용하기 위해서는 Promise에 대한 이해가 필수입니다.

또한 개발 중에 localhost를 통해서 사용할 수는 있으나, 이를 사용하기 위해서는 서버에 https 설정이 필요합니다.

Service worker 등록

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js').then(function(registration) {

// Registration was successful

console.log('ServiceWorker registration successful with scope: ', registration.scope);

}).catch(function(err) {

// registration failed :(

console.log('ServiceWorker registration failed: ', err);

});

});

}

serviceWorker를 모든 browser가 지원하는 것이 아니기 때문에, 우선 지원여부를 판단해야 합니다.

mobile 쪽 browser별 지원 상황을 보면, 현재는 chrome, fireFox만 지원하고 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

지원하는 browser라면 별도의 파일(sw.js)에 선언한 내용을 service worker로 등록합니다.

그 뒤 등록 결과를 log로 출력합니다.

설치 (Offline cache 예제)

var CACHE_NAME = 'my-site-cache-v1';

var urlsToCache = [

'/static_pages/greeting.html',

'/assets/test.jpg'

];

self.addEventListener('install', function (event) {

// Perform install steps

event.waitUntil(

caches.open(CACHE_NAME)

.then(function (cache) {

console.log('설치완료');

return cache.addAll(urlsToCache);

}).catch(function () {

console.log('설치실패')

})

);

});

urlsToCache에 선언한 resource를 cache에 등록합니다.

특정 이름의 cache에 url array를 등록하는 절차를 거칩니다.

이름이 필요한 이유는 향후 업데이트 등에서 활용하기 위함입니다.

이를테면, 더 이상 cache할 필요가 없는 url에 대해서 삭제를 하는 등의 활용이 있겠죠.

Service worker의 문제

개발되고 있는 최신 기술이기 때문에 아직 문제가 있다고 합니다.

지원하지 않는 browser가 있다는 것이 가장 큰 문제일 것이며, 설치 실패 시 처리가 매끄럽지 않은 부분이 있을 수 있습니다.

또한 https 환경이 아닌 경우 적용할 수 없다는 점도 AppCache의 대용으로 사용하기에는 조금 문제가 있는 부분입니다.

처참한 mobile browser 지원 현황

Service worker 관리

위의 예제를 테스트하면 service worker가 browser에 등록됩니다.

등록된 service workers는 chrome의 개발자 도구에서 관리할 수 있습니다.

Application tab의 Service workers sub tab을 click하면 목록이 나타나며,

등록한 항목을 찾아 Unregister 버튼을 클릭하는 것으로 삭제할 수 있습니다.

더 자세한 내용은 공식 guide를 참조하시길 바랍니다.

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=ko

References

AppCache

https://developer.mozilla.org/ko/docs/Web/HTML/Using_the_application_cache

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

https://msdn.microsoft.com/ko-kr/library/hh673545(v=vs.85).aspx

http://b.mytears.org/2010/09/2272

https://mytory.net/archives/12616

http://blog.jamesdbloom.com/ProblemsWithApplicationCache.html

https://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

ServiceWorker

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=ko

https://vnthf.github.io/blog/serviceworker/