More Related Content
Similar to Service Worker 201 (한국어) (20)
More from Chang W. Doh (20)
Service Worker 201 (한국어)
- 9. 전용및공용워커: 런타임 , 생성 , 브라우징 콘텍스트
런타임에생성가능한스레드와유사
런타임에워커를생성하고 조작가능
페이지로딩되고 생성된뒤에만사용가능
페이지가 새로로딩될떄마다새로생성하여사용해야함
9
- 10. 서비스워커: 지속성 , 설치 , 브라우저
시스템‑즉, 브라우저‑에설치되는데몬(Daemon)과 유사
웹페이지및브라우저의생명주기와는무관
시스템에서버전관리를위한업데이트기능제공
원격 푸시알림, 백그라운드동기화등에대한진입점으로적합
10
- 12. Service Worker ❤ HTTPS
중간자 공격(man‐in‐the‐middle‐attack) 의방지가 목적이지만,
127.0.0.1 즉, localhost 에서는SSL 인증이없이서비스워커의개
발및모듈테스팅이가능합니다.
12
- 30. 해결: 필요한동작이끝나기 전까지현재상태를연장!! :)
self.addEventListener('install', function(event) {
// waitUntil()을 사용하여 `install` 상태를 연장
event.waitUntil(
predownloadAssets().then(function() {
console.log('finished downloading awesome resoures.');
})
);
});
30
- 39. 사용방법
1. short_name , name , icons 등의정보가 담긴 매니페스트파일작성
{
"short_name": "My superapp",
...
}
2. 작성된파일을 <link> 를통해지정
<link rel="manifest" href="YOUR_MANIFEST_URL">
39
- 50. 예제: manifest.json
{
"name": "My super powered Web App",
"short_name": "HelloWorld",
"start_url": ".",
"display": "standalone",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
},
// ...awesome data to define your web app
],
"related_applications": [{
"platform": "web"
}, {
"platform": "play",
"url": "https://play.goo../details?id=com.android.chrome"
}]
}
50
- 51. 원격 푸시알림
A long time ago in a galaxy far, far away...there are spams
51
- 53. 동작흐름
1. 등록: 푸시서비스를통해푸시메세지의구독
2. 전달: 구독시할당받은엔드포인트정보를서비스서버에전달
3. 발송: 서비스에서등록된엔드포인트로푸시메세지발송
4. 조회: 브라우저는주기적으로구독하고 있는엔드포인트조회
5. 수신: 푸시메세지데이터를다운로드
6. 이벤트발생: 수신된푸시데이터를서비스워커에이벤트로전달
53