This post has initially been posted on my personal blog

우리 또 왔어!
보화영도의 두 번째 단락으로 돌아온 것을 환영합니다.
만약 네가 새로 온 사람이라면, 너는 나의 첫 번째 게시물을 찾을 수 있다.
우선 PWA의 주요 특징을 다시 한 번 요약합니다.

설치 가능: 메인 화면의 웹 응용 프로그램 사용

더 빠른 로딩: 캐시로 인한 로딩 개선

오프라인 기능: 연결이 없어도 내 응용 프로그램은 어느 정도 작동할 수 있을 것이다

점진성: 위에서 언급한 기능은 선택할 수 있으며, 응용 프로그램은 지원하지 않는 브라우저에서 정상적으로 작동할 수 있어야 한다

이 목록의 모든 요소는 어느 정도 service workers에 의존한다는 공통점이 있다.
그래서 당신이 이미 짐작한 바와 같이 우리는 서비스 종사자에 대한 지식을 많이 배울 것입니다.

일반적으로 서비스 노동자가 무엇입니까

그들의 능력

수명 주기

등록 방법

나는 이것이 듣기에 매우 재미있다고 생각한다. 우리 시작하자!

보화영도로 통하는 탐방 봉사자

이 주제를 깊이 있게 연구하려면 서비스 종사자가 일반적인 JavaScript일 뿐이다.
그러나 우리의 웹 응용 프로그램의 나머지 부분과 달리 서비스 종사자는 단독 라인에서 운행하는데 영향을 미쳤다.

서비스 직원에게 DOM 액세스 권한이 없음

서비스 담당자와 페이지 간 커뮤니케이션 postMessage()

서비스 담당자는 다음과 같은 경우에도 계속 작동합니다.

사용자가 페이지를 떠났거나 닫았습니다

사용자가 브라우저를 닫았습니다

서비스 직원 내부에서 우리는 어떤 사건에 대해 경청하고 반응할 수 있다.생명주기 이벤트와 웹 응용 프로그램과 관련된 이벤트가 있습니다.잠시 후, 우리는 이 사건들을 한층 더 이해할 것이다.
따라서 우리가 토론할 일 목록의 앞의 두 요소를 삭제하기 위해서 나는 서비스 직원들이 통상적으로 차단기와 같은 것을 보고 싶다.
이것은 JavaScript의 한 단락으로 하나의 단독 라인에서 실행되며, 바로 우리의 응용 프로그램과 인터넷 사이에 있다.
우리는 서비스 종사자의 생명주기 사건에 반응할 수 있다. 이것은 자산 캐시와 같은 조작을 실행하기에 매우 적합하지만, 서비스 종사자를 통해 우리의 웹 응용 프로그램에서 실행되는 모든 네트워크 요청을 차단할 수 있다.이것은 서비스 종사자가 요청 중의 거의 모든 내용 (요청 URL, 헤더, 부하, 응답 등) 을 차단하지만 동적 데이터를 캐시할 수 있도록 한다.
가장 좋은 점은 자세히 조작한 후에 기존 응용 프로그램에 대해 변경할 필요가 없다는 것이다. 비록 register() 호출을 추가하여 서비스 종사자를 사용하여 그것을 강화할 수 있지만.

서비스 종사자 수명주기

이제 우리는 서비스 종사자의 능력을 알게 되었고, 그들의 생명 주기를 더욱 자세히 이해하게 되었다.

사용자가 PWA에 액세스할 때마다 브라우저에서 우리index.html 페이지를 확인합니다.이 페이지의 어딘가에는 등록 서비스 종사자의 코드를 포함하는 <script> 라벨이 있어야 한다.

<script src="./src/js/registerserviceworker.js"></script>

registerserviceworker.js 내에서 서비스 담당자가 호출을 통해 등록

navigator.serviceWorker
    .register($pathToServiceWorkerFile);

HTTPS만 해당

개발 과정에서 localhost로부터 서비스 인원을 설치할 수 있다.PWA를 게시할 때마다 올바른 HTTPS 설정이 필요합니다.
앞에서 말한 바와 같이 서비스 직원은 요청 조작에 있어서 매우 강하다.너는 안전하지 않은 곳에 이런 물건을 설치하고 싶지 않을 것이다.

라이프 사이클 단계

register() 메서드를 호출하면 서비스 종사자는 다음 세 단계를 거칩니다.

설치

대기

활성화

단계별로 자세히 봅시다!

1단계: 설치 서비스

새로운 서비스 종사자를 등록하거나 이미 등록된 서비스 종사자에 대한 변경 사항을 적용할 때마다 install 이벤트가 발생합니다.
이 이벤트는 우리가 추가할 수 있는 서비스 워커 생명주기 이벤트 중 하나로 응용 프로그램에 캐시를 실행하기에 매우 적합합니다.event.waitUntil() 초기 설정이 완료될 때까지 수동으로 install 단계를 연장할 수 있습니다.
우리는 다음 글에서 예비 캐시와 캐시를 토론할 것이다.

단계 2: 활성화 대기

즉시 서비스 인원을 갱신하는 것은 좋은 생각이 아닐 수도 있다.만약 우리가 그것의 행동을 업데이트했다면, 예를 들어 이전과 다른 응답을 되돌려준다면, 우리는 새 버전을 활성화하기 전에 단도직입적으로 하기를 희망한다.
이를 위해서는 현재 서비스 담당자가 제어하는 모든 클라이언트를 다시 불러와야 합니다*.일단 완성되면, 우리의 서비스 직원은 다음 단계로 들어갈 것이다.

만약 우리가 정말로 원한다면, 우리는 서비스 인원 내부에서 self.skipWaiting() 호출을 통해 이 행위를 덮어쓰고 다음 단계로 바로 들어갈 수 있다.

3단계: 서비스 인력 활성화

일단 우리가 세 번째 단계에 들어가면 우리는 주동적인 서비스 종사자가 통제하는 클라이언트가 하나도 없다고 확신하기 때문에 우리의 새로운 클라이언트를 활성화하는 것은 안전하다.install 사건과 유사하게 우리는 호출 event.waitUntil() 을 통해 수동으로 이 단계를 연장할 수 있다.이렇게 하면 우리는 청소 임무를 수행하여 다른 직원들로부터 오래된 데이터를 삭제할 수 있다.
이 단계의 전형적인 임무는 최종적으로 시대에 뒤떨어진 캐시를 정리하는 것이다.다시 한 번, 우리는 나의 다음 문장에서 이것에 대해 자세하게 연구할 것이다.

서비스 등록

다음 코드 세그먼트는 내 파일registerserviceworker.js의 내용을 보여 줍니다.

import {
    capabilities
} from "./capabilities";

console.log('Trying to register service worker.');
if (capabilities.sw) {
    navigator.serviceWorker
        .register('../../sw.js')
        .then(registration => {
          console.log("Registered service worker with scope: " + registration.scope);
        });
} else {
    console.log('Service workers not supported, skipping registration.');
}

이 상당히 짧은 코드는 실제로 상당히 많은 토론 내용을 포함하고 있다.

navigator.serviceWorker
    .register('../../sw.js');

이 은행은 실제 우리의 서비스 인원을 등록하는 것을 책임진다.나의 예시에서 sw.js의 서비스 인원 코드는 나의 웹 응용 프로그램 루트 폴더에 위치하고 등록 코드보다 두 단계 높다.
비록 이것은 조금도 특별해 보이지 않지만, 그것은 사실상 우리를 중요한 화제로 이끌었다.

서비스 인원 범위

우리가 응용 프로그램에서 보내는 모든 요청은 하나origin가 있다.서비스 종사자 범위의 배치는 그 원천이 통제하에 있다.기본적으로 서비스 종사자의 역할 영역은 그 위치로 설정되어 있기 때문에 루트 단계에 있을 때 전체 역할 영역을 제어하고 모든 요청을 차단할 수 있습니다.
예를 들어 ./other/scope 로 설정하면 https://toplevel.domain/other/scope 로부터의 요청만 차단할 수 있습니다.
구성 객체를 register() 호출에 전달하여 SW 역할 영역을 구성합니다.

{
  scope: './other/scope'
}

일반적으로 서비스 종사자 파일과 같은 수준 또는 낮은 수준의 범위에서만 구성할 수 있습니다.따라서 (적어도 추가 작업 없이) 예를 들어 / 에 있는 서비스 직원에게 /src/js/sw.js 범위를 설정할 수 없습니다.
만일 우리가 정말로 우리의 서비스 종사자 파일에 역할 영역을 설정하고 싶다면, 또 하나의 방법이 실현될 수 있다.만약 우리가 자신의 취향에 따라 웹 서버를 설정할 수 있다면, 우리는 어쩔 수 없이 서비스 종사자 자원에 특수한 헤더를 추가할 것이다.
특수 헤더Service-Worker-Allowed를 추가하면 서비스 인원의 역할 영역에 상부 경로를 설정할 수 있습니다.자세한 내용은 를 참조하십시오service worker spec.
솔직히 말해서, 나는 추가 설정 작업을 피하기 위해 서비스 종사자 파일을 루트 단계에 두었을 뿐이다.

서비스 인력 지원

또 다른 세부 사항은 다음과 같습니다.

import {
    capabilities
} from "./capabilities";

편의를 위해서 나는 이 모듈을 소개했다.

export const capabilities = {
    sw: 'serviceWorker' in navigator,
    idb: 'indexedDB' in window,
    sync: 'serviceWorker' in navigator && 'SyncManager' in window
};

서비스 직원은 더 많은 브라우저 지원을 받고 있지만, 대부분의 오래된 브라우저는 그들을 지원하지 않는다.따라서 그들의 기능을 사용하기 위해서 우리는 먼저 현재의 브라우저가 서비스 인원을 지원하는지 확인해야 한다.
아직 수표가 좀 있으면 우리가 잠시 후에 처리할 것이다. 현재 우리는 단지 검사할 뿐이다

'serviceWorker' in navigator

caniuse.com 서비스 담당자를 지원하는 브라우저 버전에 대해 간략하게 설명합니다.

결론

이 글에서 우리는 서비스 종사자의 능력과 생명 주기를 이해했다.작은 코드 예시는 서비스 종사자를 등록하는 방법과 선택할 수 있는 범위를 설정하는 방법을 보여 준다.
우리는 Service-Worker-Allowed 헤더를 추가하여 최대 범위를 조작하는 방법과 브라우저 호환성을 검사하는 방법을 토론했다.

다음은 뭐예요?

다음 글에서 나는 서비스 종사자의 캐시를 깊이 있게 연구할 것이다.

캐시 프리

동적 캐시

캐시 동적 내용

캐시 유틸리티

내 다음 글의 끝에 우리는 모든 것을 가지고 우리의 PWA를 모바일 장치에 설치할 수 있게 할 것이다!
다음에 봐요!
시몬