서비스 노동자

1. 서비스 노동자 정체성

서비스 수단 서비스, 노동자는 노동자, 서비스 노동자, 즉 직원을 의미합니다. 직원은 현재 재판에서 6 월 2014 년 HTML5의 새로운 전술 인턴입니다. 이에 앞서이 웹 노동자라고, 오래된 직원이 있었다. 문제는 누가 보스 '예'그래서? 보스는 브라우저입니다. 정확하게, 각 페이지의 메인 스레드를 실행하는 자바 스크립트는 상사이다.

여기에 큰 배경에 대해 이야기합니다. 보스 페이지에 나라를 안내하는 것은 매우 강력하다, 무엇이든 그들이 원하는. 그러나 그 제한이 있습니다 한 번에 한 가지를 (단일 스레드). 아주 시간이 많이 걸리는 집안일 보스 처리 과정에서 처리 할 수 있도록 때 그는 다른 중요한 일들에 참석한다. 사용자의 관점에서, 아무도 페이지, 보스 사무 총장하지 않습니다! 보스 정말이 시간에 우울합니다. 웹 작업자 : 더 중요한 일을 처리 할 수있는 보스를 보장하기 위해 이사회 (W3C)은 마지막으로 신입 사원을 모집하고있다. 이 시간은, 보스가 마지막으로 시간이 많이 소요 집안일에서 해방, 그는 단지 웹 노동자가 내게 전화했다가 필요합니다. "이 일이 나에게 오지 않는 완료되지 않았습니다, 어떻게 받아" 웹 노동자 조용히 작업에 자신의 역 (스레드)로 작업 한 후 수신 보스 (PostMessage를) 완료 후 메시지를 보냈다. 보스는 메시지 (의 onMessage) 기쁘게 고개를 끄덕받은 후.

새로운 직원에 대해 긴 시간을 빼서 아하지 보인다. . . 걱정하지 마세요, 우리는 여기에 대해 이야기하고 있습니다.

보스 퇴근 (페이지는 폐쇄), 웹 노동자도 싸서 집으로 이동합니다. 오랜 시간 동안 이러한 실행은 6 월 2014 년까지 이사회는 문제가 발견 : "아무도 실제로 직장에서 상사 후 초과 근무 작동하지를?" 서비스 노동자 : 그래서, 그들은 풀 타임 근무를 모집. 다음과 같이 성능 목표는이 주어진다 :

결코 일에 항목 (설치) 후 및 업데이트 할 수 있습니다.
우리는 자원 (HTTPS 요청) 보스 (캐시에서) BOSS 데이터 라인을 만들기 위해주의 할 필요를 처리 할 수 있습니다.
클라이언트에 푸시 메시지를 수 ( 푸시. 통지를를 )
물질 (DOM ACCESS)는 보스의 무단 관리를 허용하지 않습니다

페이지가 닫힌 후 일반적으로 서비스 노동자 런타임 환경 페이지의 독립, 말하기, 여전히 실행할 수 있습니다. 동시에, 그것은 네트워크에 대한 책임이있는 페이지를 요청 도청 및 반환 요청 (같은 피들러)이 될 수 있습니다.

이용 2. 조건

조건은 프로토콜 HTTPS를 요청합니다. 결국, 더 큰 서비스 노동자에 대한 권리, 당신은 직접 차단을 할 수 있고, 현재는 HTTPS 환경에서 서비스 노동자를 사용할 수 있도록 보안상의 이유로, 사용자의 요청을 반환합니다.
브라우저 지원
작은 현재 지원되는 브라우저 및 브라우저는 파일럿 단계에서 지원됩니다.
3. 밤
다음 예제 프로그램에서는 첫 번째 방문 후, 심지어 네트워크에 연결하지 않고-후속뿐만 아니라, 필요한 자원은 캐시에서 페이지를 얻을, 오프라인 서비스 노동자로 페이지를 구현합니다. GitHub의 유래의 하나의 예 데모 .
코드 페이지 파일 :

<! DOCTYPE HTML > 
< HTML > 
< 머리 > 
    < 메타 문자 집합 = "UTF-8" > 
    < 제목 > 서비스 노동자 오프라인 데모 </ 제목 > 
    < 스타일 > 
        의 몸 { 
            배경 이미지 : URL ( "./ 이미지 / background.jpeg을" ) ; / * 背景图片* / 
        } 
    </ 스타일 > 
</ 머리 > 
< 몸 > 

< DIV >SitePoint 자습서와 개발 
HTML5, CSS3, 자바 스크립트, PHP, 모바일 앱 개발, 응답 웹 디자인 - 교육 과정과 책 </ DIV > 
< 스크립트 > 
    경우 (navigator.serviceWorker) {
         // 注册서비스 노동자의 범위表示作用的页面的경로 
        // 函数등록返回약속 
        navigator.serviceWorker.register를 ( ' ./service-worker.js ' {범위 : ' ./ ' }) 
            그 때는 ( 함수 (등록) { 
                CONSOLE.LOG (등록) 
            }) 
            . 캐치 (함수 (E) { 
                console.error (E); 
            }) 
    } 다른 { 
        을 console.log ( ' 서비스 노동자가이 브라우저에서 지원되지 않습니다. ' ) 
    } 
</ 스크립트 > 
</ 몸 > 
</ HTML >

서비스 노동자 文件 : 서비스 worker.js

importScripts ( 'JS / 캐시 polyfill.js'); // 캐시 연장 

VAR의 한 cache_version = 'APP-V1'; // 캐시 파일 버전 
VAR의 CACHE_FILES = // 요구 페이지 파일 캐시 될 
    '/' ,
     '이미지 / background.jpeg ' ,
     '는 JS / 'app.js ,
     'CSS /를 styles.css가 ' 
] 


self.addEventListener ( ', '설치 함수 () {이벤트 // 이벤트 설치 작업자 듣는 
    event.waitUntil을 ( // 지연 설치 캐시 초기화 될 때까지 이벤트가 완료 
        caches.open (cache_version를) 
            그 때는 ( 기능 (캐시) { 
                콘솔.로그('열린 캐시' );
                 반환 cache.addAll (CACHE_FILES); 
            }) 
    ); 
}); 

self.addEventListener ( '활성화', 기능 (이벤트) { // 활성화 이벤트를 수신 노동자 
    event.waitUntil ( // 활성화 이벤트를 지연 까지 
        caches.keys (). 당시 ( 기능 (키) {
             반환 Promise.all (keys.map ( 함수 () {키, 난을 // 캐시 이전 버전을 삭제 
                IF (키! == cache_version를) {
                     반환 캐시. 삭제를 ( 키 [I]);  
                }
            })) 
        }) 
    ) 
}); 

Self.addEventListener는 ( 'FETCH' 기능 ) (이벤트 { // 하는 리소스가 요청 된 페이지의 
    event.respondWith ( // 페이지 리소스 요청 반환 
        caches.match을 (event.request) 그 때는 ( 기능 (RES) { //이 캐시가 명중 여부를 결정 
            만약에 () {RES를   // 반환에게 자원 캐시 
                반환 RES; 
            } 
            requestBackend (이벤트); // 요청 된 백업을 수행 
        }) 
    ) 
}); 

함수 requestBackend (이벤트) {   //는 백업 요청 
    var에 = URL을event.request.clone ();
     반환 FETCH (URL) 그 때는 ( 기능 (RES) { //이 온라인 리소스를 요청 
        // IF A가되지 않음 오류 보내기 응답 유효 
        IF (RES || res.status (200)는 ==! ! || res.type == '기본' ) {
             반환 RES; 
        } 

        var에 응답 = res.clone (); 

        caches.open (cache_version를) 그 때는 ( 기능 (캐시) { // 로부터 검색 자원의 캐시 라인 
            캐시 .put (event.request 응답) 
        }) 

        리턴 RES; 
    }) 
}

라이프 사이클 서비스 노동자

Service Worder在安装（install）和激活(activate)后，会进入正常工作状态。当它负责的页面在浏览器中被打开，它就会对页面的请求进行处理。在其它情况下（除了特殊情况:service worker会定时更新），Service worker处理暂停状态，不会占用内存和CPU资源。
例子运行效果

上图为在第一次打开页面后，关闭网络，再次打开的页面请求。页面在离线情况下仍然能打开，并且能获取到相应的样式和脚本资源。从图中可以看出，资源的获取途径是“from ServiceWorker”，说明确实是serviceWorker在起作用了。

4. 开启chrome隐藏技能

chrome上有三个与service Worker相关的调试和查看工具

1 看正在运行的 serivce worker：chrome://inspect/#service-workers
2 ervice Worker调试（查看console.log输出,也可注销worker）
3 藏的Resources查看选项,开启步骤如下：

1 进入 chrome://flags 开启 ‘Enable DevTools Experiments’.
2 打开DevTools，进入 Setting > Experiments , 连续按shift键6下
3 在DevTools的Resources页面里就能看到刚被开启的隐藏功能：

5. 总结

Service Worker是继web Worker后又一个新的线程，这个线程比web worker独立得更彻底，可以在页面没有打开的时候就运行。作为一个页面与服务器之间中间层，Service Worker可以捕获它所负责的页面的请求，并返回相应资源，这使离线web应用成为了可能。这也是Service Worker被提出的一个重要目的。虽然现在支持的浏览器和平台还不多，而且还在试验阶段，但已被W3C制定规范。在将来，当Service Worker更成熟和普及时，将会为web app打开新的大门。

转自：https://www.imweb.io/topic/56592b8a823633e31839fc01

1. 서비스 노동자 정체성

이용 2. 조건

3. 밤

4. 开启chrome隐藏技能

5. 总结

추천