자바스크립트 "Service Workers API"
Service Workers API는 개발자가 기본 페이지의 JavaScript 실행 컨텍스트와 별도로 웹 페이지의 백그라운드에서 실행되는 스크립트를 생성할 수 있는 JavaScript API입니다. 서비스 작업자는 네트워크 요청을 가로채고 콘텐츠를 캐시하며 오프라인 지원을 제공할 수도 있습니다.
다음은 Service Workers API를 사용하는 방법에 대한 간단한 예입니다.
// Register the service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service worker registered:', registration);
})
.catch(function(error) {
console.log('Service worker registration failed:', error);
});
}
// Service worker code
self.addEventListener('fetch', function(event) {
console.log('Intercepting network request:', event.request.url);
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
console.log('Returning cached response:', response);
return response;
}
console.log('Fetching network response:', event.request.url);
return fetch(event.request);
})
.catch(function(error) {
console.log('Failed to fetch response:', error);
})
);
});
이 예제에서는 먼저 브라우저가 Service Workers API를 지원하는지 여부를 나타내는 `serviceWorker` 속성이 `navigator` 개체에 있는지 확인합니다. 그렇다면 서비스 작업자 스크립트(`/sw.js`)를 등록합니다.
그런 다음 서비스 워커 스크립트는 브라우저가 네트워크에서 리소스를 가져오려고 할 때마다 실행되는 `fetch` 이벤트를 수신 대기합니다. 이러한 이벤트를 가로채고 가능한 경우 캐시된 콘텐츠로 응답하거나 네트워크에서 콘텐츠를 가져와 향후 요청을 위해 캐시합니다.
서비스 워커는 HTTPS를 통해 제공되는 페이지에만 등록할 수 있습니다.