JavaScript 서비스 소개

이 글은 최초로 attacomsian.com/blog에 발표되었다.
서비스 직원은 점진적인 웹 응용 프로그램의 핵심 부분으로 이 응용 프로그램은 캐시 자원과 web push notifications 등 내용을 허용하여 효과적인 오프라인 체험을 만들 수 있다.웹 응용 프로그램, 브라우저, 인터넷 사이의 에이전트를 맡아 개발자가 네트워크 요청을 차단하고 캐시하며, 네트워크의 가용성에 따라 적절한 행동을 취할 수 있도록 한다.
서비스 담당자는 단독 라인에서 운행하기 때문에, 그것은 비막힌다.이것은 또한 DOM과 주 자바스크립트 라인에서 사용할 수 있는 다른 API, 예를 들어 쿠키, XHR, 웹 저장소 API(로컬 저장소와 세션 저장소) 등에 접근할 수 없다는 것을 의미한다. 완전히 비동기적으로 설계되었기 때문에 그들은 네트워크 요청의 응답을 기다리기 위해 promises을 대량으로 사용한다.

Due to security concerns, service workers only run over HTTPS and cannot be used in private browsing mode. However, you do not need a secure connection while making location requests (good enough for testing).

브라우저 지원

서비스 직원은 modern web browsers에서만 지원되는 비교적 새로운 API입니다.따라서 먼저 브라우저가 API를 지원하는지 확인해야 합니다.

if('serviceWorker' in navigator) {
    // Supported 😍
} else {
    // Not supported 😥
}

서비스 등록

캐시 자원을 시작하거나 네트워크 요청을 차단하기 전에 브라우저에 서비스 담당자를 설치해야 합니다.서비스 제공자는 본질적으로 JavaScript 파일이므로 파일의 경로를 지정하여 등록할 수 있습니다.파일은 네트워크를 통해 접근할 수 있어야 하며, 서비스 인원 코드만 포함해야 한다.
페이지가 로드될 때까지 기다린 후 서비스 종사자 파일 경로를 navigator.serviceWorker.register() 메서드에 전달해야 합니다.

window.addEventListener('load', () => {
    if ('serviceWorker' in navigator) {
        // register service worker
        navigator.serviceWorker.register('/sw-worker.js').then(
            () => {
                console.log('SW registration succesful 😍');
            },
            err => {
                console.error('SW registration failed 😠', err)
            });
    } else {
        // Not supported 😥
    }
});

페이지를 불러올 때마다 상술한 코드를 어렵지 않게 실행할 수 있습니다.브라우저는 서비스 직원이 설치되었는지 여부를 결정하고 이에 따라 처리할 것입니다.

서비스 인력 수명 주기

등록 라이프 사이클에는 다음 세 단계가 포함됩니다.

다운로드

설치

활성화

사용자가 사이트를 처음 방문할 때 서비스 워크러 파일을 다운로드하고 설치를 시도합니다.설치가 완료되면 서비스 직원이 활성화됩니다.사용자가 다른 페이지에 액세스하거나 현재 페이지를 새로 고칠 때까지 서비스 작업자 파일의 모든 기능을 사용할 수 없습니다.

브라우저 이벤트

서비스 직원이 설치되어 활성화되면 네트워크 요청과 캐시 자원을 차단하기 시작할 수 있습니다.서비스 워크러 파일에서 브라우저가 보낸 이벤트를 감청할 수 있습니다.브라우저에서 다음 이벤트가 발생합니다.

서비스 직원을 설치하면 install이 발송됩니다.

서비스 직원이 성공적으로 등록하고 설치한 경우 activate이 전송됩니다.이 이벤트는 새 버전을 설치하기 전에 오래된 캐시 자원을 삭제하는 데 사용할 수 있습니다.

웹 페이지가 네트워크 자원을 요청할 때마다 fetch을 보냅니다.그것은 새로운 HTML 문서, 이미지, JSON API, 스타일시트, 자바스크립트 파일, 원격 위치에서 사용할 수 있는 모든 것일 수 있습니다.

Push API는 새로운 Push 알림을 받으면 push으로 전송됩니다.이 이벤트를 사용하여 사용자에게 display a notification을 보낼 수 있습니다.

브라우저가 연결 해제 후 네트워크 가용성을 감지하면 sync이 호출됩니다.

캐시 리소스에 대한 서비스 제공

서비스 직원이 특정 리소스를 캐시하기 위해 설치하는 경우 네트워크가 끊어질 때 페이지에 서비스를 제공해야 하는 install 이벤트를 탐지할 수 있습니다.

const CACHE_NAME = 'site-name-cache';

self.addEventListener('install', event => {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(cache =>
                cache.addAll([
                    'favicon.ico',
                    'projects.json',
                    'style.css',
                    'index.js',
                    'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
                ])
            )
    );
});

위의 예제 코드는 캐시 API를 사용하여 site-name-cache이라는 캐시에 리소스를 저장합니다.

The self is a read-only global property that is used by the service workers to get access to themselves.

이제 요청한 자원이 캐시에 저장되어 있는지 확인하기 위해 fetch 이벤트를 모니터링하고 검색하면 다음과 같이 반환합니다.

// ...
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) {
                //found cached resource
                return response;
            }
            return fetch(event.request);
        })
    );
});

request 속성으로 표시된 자원의 캐시 항목을 찾습니다. 찾지 못하면 fetch request을 만들어서 가져옵니다.새 요청을 캐시하려면fetch 요청의 응답을 처리하고 캐시에 추가할 수 있습니다. 아래와 같습니다.

//...
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) {
                //found cached resource
                return response;
            }

            // get resource and add it to cache
            return fetch(event.request)
                .then(response => {
                    // check if the response is valid
                    if (!response.ok) {
                        return response;
                    }

                    // clone the response
                    const newResponse = response.clone();

                    // add it to cache
                    caches.open(CACHE_NAME)
                        .then(cache =>
                            cache.put(event.request, newResponse)
                        );

                    // return response
                    return response;
                });
        })
    );
});

서비스 인력 업데이트

서비스 워크맨을 설치한 후 사용자가 삭제하거나 업데이트할 때까지 계속 실행됩니다.서비스 워크맨을 업데이트하려면 서버에 서비스 워크맨 파일의 새 버전을 불러오기만 하면 됩니다.사용자가 사이트에 액세스하면 브라우저는 자동으로 파일 변경 사항을 감지하고 새 버전을 설치합니다.
처음 설치한 것처럼 사용자가 다른 페이지로 이동하거나 현재 페이지를 새로 고칠 때만 새로운 서비스 작업자 기능을 사용할 수 있습니다.
우리가 할 수 있는 일은 activate 사건을 감청하고 낡은 캐시 자원을 삭제하는 것이다.다음 코드는 모든 캐시에서 우리의 캐시 이름과 일치하는 캐시를 순환하고 삭제함으로써 이를 실현합니다.

// ...
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(keys => {
            return Promise.all(
                keys.map(cache => {
                    if (cache === CACHE_NAME) {
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});

이상은 서비스 직원에게 소개합니다.더 많은 정보를 알고 싶으면 ServiceWorker Cookbook을 보십시오. 이것은 현대 사이트에서 서비스 직원을 사용하는 실용적인 예시집입니다.
✌️ 나는 현대 자바스크립트, 노드를 썼다.js, Spring Boot 및 모든 웹 개발Subscribe to my newsletter, 매주 인터넷 개발 강좌와 프로그램을 받습니다.
이 문장처럼.너도 나를 따라갈 수 있다.