1. eBrain Lab
정 병 태
Service Worker 를 이용한
Offline Web Application 구현
2. Speaker
정 병 태 eBrain Lab
- Web Developer
- OKKY.KR Contributor
- https://github.com/1angerhans
- http://okky.kr/user/info/26138
- btjung@ebrain.kr
3. 내용
• Service Worker
• Service Worker 란?
• Service Worker 로 할 수 있는(있을) 것들
• 지원 현황
• 기본 사용 방법
• Offline Web Application 구현하기
• Cache 를 이용한 서비스 구현
• ‘Offline 우선’ 서비스 구현
5. Service Worker 란?
• Offline 상태에서, 웹 어플리케이션의 준비 단계를 가로채는 방법
을 제공하고, 지속적인 background 처리를 지원.
• 문서 및 관련 자원에 대한 설치, 버전, 업그레이드를 관리 할 수
있는 event-driven Web Worker.
• 웹 플랫폼을 확장 하는 다른 사양들의 background 처리에 대한
시작점 역할.
출처 : https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
6. Service Worker 란?
• Network Proxy : 응답을 가로채고, 조작이 가능
• Dom Thread 와는 별개의 Thread 로 동작하므로,
Dom 및 Global Scope (window) 접근은 불가능함.
• postMessage 를 이용한 양방향 데이터 교환 가능.
• Page 단위로 동작되는 것이 아니기 때문에, register 이후에는
Background 에서 동작 함. (새 탭을 열어도 동일한 Worker 이용)
• Service Worker Thread 는 사용되지 않을 때는 종료되고, 필요할
때 재시작 되기 때문에 전역상태를 유지할 수 없음.
11. Chrome (40+)
Opera (28+)
Firefox (Nightly Build)
Internet Explorer (지원 고려중)
Sapari (지원 안함)
지원 현황
출처 : https://jakearchibald.github.io/isserviceworkerready/
19. A: 명세를 다 꽤차고 계시다면,
계속 AppCache를 쓰셔도 좋습니다.
아니면 읽고 또 읽으세요.
피눈물 날 때까지.
출처 : https://www.youtube.com/watch?t=119&v=4uQMl7mFB6g
20. •Manifest - 동작을 완벽히 이해하기 위해서는 복잡한 명세를 숙달
•온라인 상태에서도 항상 캐시에서 호출
• 캐시 되지 않은 리소스는 캐시된 페이지에서 로드 되지 않음
: http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/
•캐시는 Manifest 를 변경할 때만 업데이트 됨
•Manifest 에 대한 캐시 문제
AppCache 의 한계
참고 : Application Cache is a Douchebag - by Jake Archibald
33. 참고 자료
• Service Worker Specification
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
• ServiceWorker.org
http://www.serviceworker.org
• Introduction to Service Worker (HTML5ROCKS)
http://www.html5rocks.com/ko/tutorials/service-worker/introduction/
• Application Cache is a Douchebag
http://alistapart.com/article/application-cache-is-a-douchebag