앱을 서비스 근로자로 오프라인으로 작업하십시오

Sep 11, 2025

어떻게

페이지 1 / 2 :

페이지 1 : 더 빠른로드

페이지 1 : 더 빠른로드
페이지 2 : 오프라인 액세스 추가

서비스 근로자는 귀하의 사이트 및 웹 앱에 대한 로딩 시간 및 오프라인 지원을 향상시키는 데 사용할 수 있습니다. 이 튜토리얼에서는 서비스 근로자와 웹 앱을 점진적으로 향상시키는 방법을 보여줄 것입니다. 먼저 서비스 작업자가 무엇이며 라이프 사이클 작동 방식을 다룰 것입니다. 그런 다음 사용 방법을 보여주고 사이트 (이 페이지)를 속도를 높이고 오프라인 콘텐츠를 제공합니다 (2 페이지).

그럼 우리는 당신을 보여줄 것입니다 응용 프로그램을 만드는 방법 서비스 근로자와 함께. 정적 자산을 캐시하고 봉사하는 맨손 작업자를 설정하는 방법을 배우고 동적 API 응답을 캐시하고 Demo App Full Offline 지원을 제공하는 방법을 제공합니다. 첫째, 정확히 서비스 근로자가 무엇인지, 어떻게 작동하는지 살펴 보겠습니다.

웹 사이트 빌드? 대단한 과정을 간소화하십시오 웹 사이트 빌더 , 그것을 괜찮은 것으로 유지하십시오 웹 호스팅 서비스. 스토리지를 이들과 정렬하십시오 클라우드 스토리지 옵션.

서비스 노동자 란 무엇입니까?

서비스 노동자는 무엇입니까? 브라우저가 백그라운드에서 실행되는 JavaScript로 작성된 스크립트입니다. 메인 스레드에 영향을 미치지 않습니다 (JavaScript는 일반적으로 웹 페이지에서 실행되는 경우)에서 응용 프로그램 코드와 충돌하거나 런타임 성능에 영향을 미치지 않습니다.

서비스 작업자는 웹 페이지 자체에서 일어나는 DOM 또는 이벤트 및 사용자 상호 작용에 직접 액세스 할 수 없습니다. 웹 페이지와 네트워크 사이에 위치하는 레이어로 생각하여 페이지가 만든 네트워크 요청 (예 : AJAX 요청)을 가로 채고 조작 할 수 있습니다. 따라서 캐시를 관리하고 오프라인 사용을 지원하는 데 이상적입니다.

서비스 근로자 수명주기

서비스 작업자의 삶은 단순한 흐름을 따른다. 그러나 즉시 일하는 JS 스크립트에 익숙해지면 조금 혼란 스러울 수있다.

설치 & gt; 대기 중 (설치) & gt; 활성화 & gt; 활성화 & gt; 불필요한

페이지가 처음로드되면 등록 코드가 추가되었습니다. index.html. 서비스 작업자의 설치를 시작합니다. 기존 작업자가 없으면 새 서비스 작업자가 설치 직후에 활성화됩니다. 웹 페이지는 한 번에 하나의 서비스 작업자가 활성화 할 수 있습니다.

작업자가 이미 설치되어 있으면 새 서비스 작업자가 설치되고 페이지가 완전히 닫혀 있고 다시로드 될 때까지 대기 단계에 앉아 있습니다. 다른 탭이 열리기 때문에 새로 고침은 충분하지 않습니다. 그렇지 않으면 모든 페이지의 모든 인스턴스가 닫혀 있어야합니다. 그렇지 않으면 새 작업자가 활성화되지 않습니다. 탭을 닫을 필요가 없으면 다른 사이트로 이동하여 돌아갈 수 있습니다.

양자 모두 설치 과 활성화 이벤트는 근로자 당 한 번만 발생합니다. 활성화되면 서비스 작업자는 페이지를 제어 할 수 있으며 요청을 조작하기 위해 가져 오기와 같은 이벤트 처리를 시작할 수 있습니다.

마지막으로 브라우저가 작업자 파일 자체가 업데이트되었거나 설치 또는 활성화가 실패한 경우 브라우저가 탐지되면 서비스 작업자가 중복됩니다. 브라우저는 작업자 스크립트가 업데이트되었는지 확인하기 위해 바이트 차이를 찾습니다.

서비스 근로자의 이름을 변경 (또는 회전)해서는 안됩니다. 브라우저가 현재 캐싱 헤더를 무시하기에 충분히 똑똑하기에 충분히 똑똑하지만 브라우저가 이제 쉽게 똑똑하지만 서버에 작업자 파일 자체를 캐시해야합니다.

01. 데모 앱을 복제합니다

알았어, 서비스 근로자의 도움으로 웹 앱을 구축하는 방법을 배우기 시작하자. 이 자습서에서는 최근 버전의 Node.js와 NPM이 컴퓨터에 설치되어야합니다.

우리는이 튜토리얼의 기초로 사용할 데모 앱을 두드렸습니다 ( 데모 앱을 복제하십시오 짐마자 이 응용 프로그램은 사용자의 위치를 기반으로 5 일 일기 예보를 가져 오는 재미있는 작은 프로젝트입니다. 그런 다음 비가 내리기 전에 비가 올지 않고 그에 따라 UI를 업데이트 할 것인지 확인합니다.

jQuery 및 부트 스트랩과 같은 크고 불필요한 라이브러리를 사용하여 비효율적으로 (의도적으로) 봉사 작업자를 사용할 때 성능의 차이를 입증 할 수있는 큰 비정상적인 라이브러리를 사용합니다. 그것은 현재 무게가 4.1MB의 무게가 있습니다.

02. API 키 가져 오기

API에서 날씨 데이터를 가져 오려면 무료 API 키를 사용해야합니다. OpenWeatherMap. :

일단 당신이 당신의 열쇠를 가지고 있으면 열립니다 index.html. 그를 찾아보세요 window.api_key. 의 변수 & lt; head & gt; ...에 키를 값에 붙여 넣습니다.

    window.API_KEY = 'paste-your-key-here';

03. 개발 서버를 시작합니다

이제 우리는 프로젝트 작업을 시작할 준비가되었습니다. 우선 다음을 실행하여 종속성을 설치하겠습니다.

    npm install

빌드 도구에는 두 가지 작업이 있습니다. 운영 npm 시작 포트 3000에서 개발 서버를 시작합니다. 실행 npm 실행 빌드 '프로덕션'버전을 준비합니다. 이것이 데모 일뿐이므로 실제로 생산 버전이 아니라는 것을 명심하십시오. 나누기 또는 아무 것도 없음 - 파일은 단지 'revvow'를 얻습니다.

알고리즘은 파일의 내용에서 9C616053E5와 같은 해시를 생성하는 데 사용됩니다. 알고리즘은 동일한 내용에 대해 항상 동일한 해시를 출력합니다. 즉, 파일을 수정하지 않는 한 해시는 변경되지 않습니다. 그런 다음 해시가 파일 이름에 추가되므로 예 : 스타일이 스타일 -9C616053E5.css가 될 수 있습니다. 해시는 파일의 개정판을 나타냅니다 - 따라서 'revved'.

캐시를 무효화하거나 비용이 많이 들지 않고도 서버에서 파일의 각 개정을 안전하게 캐시하거나 잘못된 버전을 제공하는 다른 타사 캐시에 대해 걱정할 필요가 없습니다.

04. 귀하의 서비스 근로자를 소개합니다

이제 우리의 서비스 근로자를 시작합시다. 루트에 sw.js라는 파일을 만듭니다. src. 예배 규칙서. 그런 다음이 두 이벤트 리스너를 추가하여 로그를 기록합니다 설치 과 활성화 이벤트 :

 self.addeventListener ( '설치', (이벤트) = & gt; {
      console.log (이벤트);
    });

    self.addeventListener ( '활성화', (이벤트) = & gt;
      console.log (이벤트);
    });

그만큼 본인 변수는 서비스 작업자의 전역 읽기 전용 범위를 나타냅니다. 그것은 조금 같습니다 창문 웹 페이지의 개체.

다음으로 index.html 파일을 업데이트하고 명령 작업자를 설치하는 명령을 추가해야합니다. 닫는 직전 에이 스크립트를 추가하십시오 & lt; / body & gt; 꼬리표. 작업자를 등록하고 현재 상태를 기록합니다.

& lt; script & gt; if ( '탐색기의'serviceworker ') { Navigator.ServiceWorker.Register ( '/ sw.js') .then (기능 (Reg) { if (reg.installing) { console.log ( 'sw 설치'); } else (reg.waiting) { console.log ( 'SW 대기'); } elsef (reg.active) { console.log ( 'SW 활성화'); } }). catch (함수 (오류) { // 등록 실패 console.log ( '등록 실패'+ 오류); }); } & lt; / script & gt;

실행을 통해 개발 서버를 시작하십시오 npm 시작 현대 브라우저에서 페이지를 엽니 다. DevTools에서 좋은 서비스 작업자 지원이 있으므로 Google 크롬을 사용 하여이 튜토리얼 전반에 걸쳐 언급 할 것입니다. 콘솔에 세 가지가 기록 된 세 가지가 표시되어야합니다. 서비스 노동자에서 2 명 설치 과 활성화 이벤트, 다른 하나는 등록의 메시지가 될 것입니다.

05. 노동자를 활성화합니다

우리 작업자가 대기 단계를 건너 뛰고 지금 활성화하도록 노동자에게 알려 드리겠습니다. sw.js 파일을 열고이 줄을 어디에서나 추가하십시오. 설치 이벤트 리스너 :

 self.skipwaiting ();

이제 작업자 스크립트를 업데이트 할 때 설치 직후에 페이지를 제어합니다. 새로운 작업자가 이전 버전의 작업자가로드 한 페이지를 제어 할 수 있습니다. 문제를 일으킬 수있는 경우이 옵션을 사용하지 마십시오.

페이지에서 탐색 한 다음 반환 하여이 문제를 확인할 수 있습니다. 당신은 그걸보아야합니다 설치 과 활성화 새로운 작업자가 설치되면 이벤트가 다시 불을 켭니다.

Chrome DevTools에는 도움이되는 옵션이 있습니다. 즉, 작업자가 다시로드하여 작업자를 업데이트 할 수 있습니다. DevTools를 열고 응용 프로그램 탭으로 이동 한 다음 왼쪽 열에서 서비스 작업자를 선택하십시오. 패널의 맨 위에 다시로드에 업데이트 된 업데이트가 표시된 틱 상자입니다. 업데이트 된 작업자가 이제 새로 고침에 설치되고 활성화됩니다.

06. 변경 사항 확인

이를 추가로 확인합시다 console.log ( 'foo') 이벤트 리스너 중 하나를 호출하고 페이지를 새로 고치십시오. 우리가 새로 고쳐질 때 우리는 콘솔에서 로그를 볼 것으로 기대하기 때문에 우리는 우리를 잡았습니다. 그러나 우리가 보는 것은 'SW 활성화'메시지였습니다. 다시로드 옵션에 대한 업데이트가 똑딱 일 때 크롬이 페이지를 두 번 새로 고칩니다.

콘솔 설정 패널에서 보존 로그 눈금을 틱하고 다시 새로 고치면이 문제를 확인할 수 있습니다. 'foo'와 함께 로그가 기록 된 이벤트를 설치하고 활성화 한 다음 'http : // localhost : 3000 /'탐색 된 다음 페이지가 다시로드되었음을 나타내고 최종 'SW 활성화 된 메시지가 표시됩니다.

07. 가져 오기 이벤트를 추적합니다

다른 리스너를 추가하는 시간. 이번에는 우리가 추적 할 것입니다 술책 페이지가 CSS 파일, 이미지 또는 API 응답과 같은 리소스를로드 할 때마다 해고되는 이벤트입니다. 캐시를 열고 페이지에 요청 응답을 반환 한 다음 백그라운드에서 응답을 캐시합니다. 먼저 리스너를 추가하고 새로 고침을 추가하겠습니다. 콘솔에서 당신은 많은 것을보아야합니다 송료자 로그.

 self.addeventListener ( 'fetch', (이벤트) = & gt; {
 console.log (이벤트);
});

우리의 서브 모드는 브라우저를 사용하며, 이는 페이지에 자체 스크립트를 추가하고 WebSocket 요청을합니다. 이들을위한 fetchevents도 볼 수 있지만, 우리는 이것들을 무시하고 싶습니다. 또한 우리 자신의 도메인에서 GET 요청을 캐시하고 싶습니다. 그러므로 명시 적으로 무시하는 것을 포함하여 원하지 않는 요청을 무시하기 위해 몇 가지 사항을 추가합시다. ...에 / 색인 경로 :

 self.addeventListener ( 'fetch', (이벤트) = & gt; {
 // 크로스 도메인 요청을 무시합니다
 if (! event.request.url.startswith (self.location.origin)) {
   반환;
 }
 // get가 아닌 요청을 무시합니다
 if (event.request.method! == 'get') {
   반환;
 }
 // 브라우저 동기화를 무시합니다
 if (event.request.url.indexof ( '브라우저 - 동기화') & gt; -1) {
   반환;
 }
 // 색인 경로가 캐시되는 것을 방지합니다
 if (event.request.url === (self.location.origin + '/')) {
   반환;
 }
 // index.html을 캐시하지 않습니다
 if (event.request.url.endswith ( 'index.html')) {
   반환;
 }
 console.log (이벤트);
});

이제 로그는 훨씬 깨끗하고 캐싱을 시작하는 것이 안전합니다.

08. 자산을 캐시합니다

이제 이러한 응답을 캐싱 할 수 있습니다. 먼저 캐시를 이름을 지정해야합니다. 우리에게 전화 해 봅시다 v1-Assets. ...에 sw.js 파일의 맨 위에이 행을 추가하십시오.

 const assetscachename = 'v1-assets';

그런 다음 PetchEvents를 납치해야하므로 페이지에 반환 된 것을 제어 할 수 있습니다. 우리는 이벤트를 사용하여 할 수 있습니다 응답 방법. 이 방법은 약속을 받아 들여서이 코드를 추가 할 수 있으므로 console.log. :

 //이 약속 사슬로 인출력을 알리십시오.
 event.responspandithith (
   // 캐시를 엽니 다
   Caches.Open (AssetScachename)
     .then ((cache) = & gt; {
       // 네트워크에 요청하십시오
       Return fetch (event.request)
         .then ((응답) = & gt; {
           // 응답을 캐시합니다
           cache.put (event.request, response.clone ());
           // Page에 원래 응답을 반환합니다
           반환 응답;
         });
     })
 );

그러면 원래 응답을 다시 페이지로 보내기 전에 네트워크에 요청을 네트워크에 전달하여 캐시에 응답을 저장합니다.

이 접근 방식은 사용자가 페이지를로드 할 때까지 실제로 응답을 실제로 캐시하지 않습니다. 처음에는 작업자가 설치되고 활성화됩니다. 술책 청취자가 준비가되어 있으며 모든 것이 이미 요청되었습니다.

두 번 새로 고침하고 DevTools & GT에서 캐시를 확인하십시오. 응용 프로그램 탭. 왼쪽 열에서 캐시 저장 트리를 확장하면 모든 저장된 응답이있는 캐시가 표시됩니다.

09. 캐시에서 봉사하십시오

모든 것은 캐시되지만 실제로 캐시를 사용하여 아직 파일을 제공하지 않습니다. 그걸 엮어 봅시다. 먼저 캐시의 요청과 일치하는 것처럼 보일 것입니다. 존재하지 않으면 네트워크를 사용한 다음 응답을 캐시합니다.

// 가져 오기 에이 체인으로 응답하도록 알리십시오
 event.responspandithith (
   // 캐시를 엽니 다
   Caches.Open (AssetScachename)
     .then ((cache) = & gt; {
       // 캐시에서 일치하는 요청을 찾습니다
       Cache.match (event.request)
         .then ((일치 함) = {
           // 일치 항목이 발견되면 캐시 된 버전을 먼저 반환합니다.
           if (matched) {
             반환 일치;
           }
           // 그렇지 않으면 네트워크를 계속하십시오
           Return fetch (event.request)
             .then ((응답) = & gt; {
               // 응답을 캐시합니다
               cache.put (event.request, response.clone ());
               // Page에 원래 응답을 반환합니다
               반환 응답;
             });
         });
     })
);

파일을 저장하고 새로 고치십시오. DevTools & Gt를 확인하십시오. 네트워크 탭과 (ServiceWorker에서) 각 정적 자산의 크기 열에 나열되어 있어야합니다.

우리는 끝났습니다. 그러한 소량의 코드를 위해 이해하는 것이 많습니다. 모든 자산이 캐시되면 모든 자산이 캐시되는 경우 페이지를 새로 고치는 것이지만 스로틀 연결 (DevTools & Gt; 네트워크 탭)에서로드 시간을 신속하게 수행하겠습니다.

서비스 작업자가 없으면 시뮬레이션 된 빠른 3G 네트워크를로드하면 모든 것이로드되는 데 거의 30 초가 걸립니다. 서비스 작업자와 동일한 스로틀 연결이 있지만 캐시에서로드하는 경우에는 초 단위가 걸리지 않습니다.

오프라인 상자를 선택하고 새로 고침을 확인하면 연결없이 페이지로드가 표시되지만 API에서 예측 데이터를 얻을 수는 없습니다. 2 페이지에서는이를 위해 돌아가서 API 응답을 캐시하는 방법을 배웁니다.

다음 페이지 : 서비스 작업자를 사용하여 온라인 액세스를 제공합니다.

현재 페이지: 페이지 1 : 더 빠른로드

다음 페이지 페이지 2 : 오프라인 액세스 추가

앱을 서비스 근로자로 오프라인으로 작업하십시오

서비스 노동자 란 무엇입니까?

서비스 근로자 수명주기

01. 데모 앱을 복제합니다

02. API 키 가져 오기

03. 개발 서버를 시작합니다

04. 귀하의 서비스 근로자를 소개합니다

05. 노동자를 활성화합니다

06. 변경 사항 확인

07. 가져 오기 이벤트를 추적합니다

08. 자산을 캐시합니다

09. 캐시에서 봉사하십시오

어떻게 - 가장 인기있는 기사

더 나은 3D 세계 환경을 구축하는 10 가지 방법

5 개의 핫 새 CSS 기능과 사용 방법

단단한 표면 모델링을위한 10 가지 팁

귀하의 콘텐츠와 함께 Google 랭킹에 영향을 미치는 방법

HTML로 할 수있는 5 가지 모르는 5 가지

HTML 캔버스로 시작하기

CINEMA 4D에서 Redshift 프록시를 만드는 방법

교차 장치 최적화 15 가지 팁

카테고리