무엇이 서비스 인원이고 어떻게 그들을 사용합니까?
7307 단어 webdevbeginnersjavascript
만약 네가 이 답안 중의 어느 것에 동의한다면, 이 문장은 너에게 커다란 시사점을 줄 것이다.그러나 대부분의 사람들이 알고 있는 바와 같이 현대 웹 응용 프로그램은 브라우저에서 몇 개의 스크립트를 실행해서 HTML을 표시하는 데 그치지 않는다.
오프라인 액세스를 위해 컨텐츠를 캐시할 수 있습니다.그것은 모든 응용 프로그램과 같이 설치하여 응용 프로그램의 풍부한 체험을 제공할 수 있다.그것은 push notifications 사용자에게 주기적으로 background sync 데이터 백업을 제공할 수 있습니다!
여기가 바로 서비스 요원이 나타난 곳입니다!요컨대, 서비스 종사자는 JavaScript 파일로 응용 프로그램의 일부 자산을 캐시하는 데 사용된다.
그것의 작업 원리는 개발자가 응용 프로그램이 네트워크 요청을 처리하는 방식을 제어할 수 있도록 허용하는 것이다.관련 코드를 시작하기 전에 서비스 인원의 생명주기를 알아보면 응용 프로그램의 자산이 캐시에 어떻게 저장되는지 이해하기 쉽습니다.
이 주제를 모르신다면 제가 얼마 전에 발표한 이 글을 읽으실 수 있습니다.
JavaScript 약속이란 무엇입니까?
라가트 M・ 8월 23일・ 5분 읽기
#javascript
#es6
#webdev
#beginners
서비스 인원을 시작하고 운행하는 것은 몇 가지 절차와 관련된다. 그들은 서비스 인원의 생명 주기라고 불린다.이 그림은 관련된 각 단계의 간소화 버전을 보여 줍니다.
각 단계는 비동기적입니다.여기서 세 가지 주요 이정표는 다음과 같습니다.
캐시된 자산을 어디서 찾을 수 있는지 알고 싶으면 크롬 개발 도구의 응용 프로그램 옵션 카드를 엽니다. 아래와 같습니다.
우선worker라는 파일을 만듭니다.js 또는 sw.js는 프로젝트의 루트 디렉터리에 있습니다.인덱스 HTML 파일이 서비스 종사자 파일과 같은 수준이면 더욱 쉽다.
우선, 당신은 서비스 인원을 등록해야 합니다.별도의 파일에서 이 작업을 수행하고 색인에 연결할 수 있습니다.html(또는 프로젝트 루트 디렉터리의 주 html 파일).그러나 HTML 파일 자체의
<script> 태그에 서비스 종사자가 등록하는 것을 자주 볼 수 있습니다.<script>
if ('serviceWorker' in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log("Service worker registered"))
.catch(err => console.error(`Service Worker Error: ${err}`));
});
} else {
console.log("Service Worker is not supported by browser.");
}
</script>
다른 단계는 소프트웨어 내에서 완료됩니다.js 파일.이를 위해 창 대상에 이벤트 탐지기를 몇 개 추가할 것입니다.
만약 우리가 매우 간단한 응용 프로그램을 가지고 있다면, 단지 3개의 파일
index.html, index.css, script.js 뿐이다.그리고 소프트웨어에 다음 코드 줄을 추가해야 합니다.js 파일.const cacheName = "v1"; // Can be any string
const cachedAssets = ["index.html", "index.css", "script.js"];
// Call install event
self.addEventListener("install", (e) => {
e.waitUntil(
caches
.open(cacheName)
.then((cache) =>
cache.addAll(cachedAssets);
})
.then(() => self.skipWaiting())
);
});
v1 을 사용하여 새 캐시 폴더를 만들고 다른 자산을 추가합니다.이 절차의 다음 단계는 이벤트 탐지기를 창 대상에 추가하고 현재 캐시
v1 가 사용 가능한 최신 버전인지 확인하는 것입니다.이를 위해 소프트웨어에서 다음 코드를 복사하십시오.js 파일.// Call activate event
self.addEventListener("activate", (e) => {
// Remove unwanted cached assets
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if (cache !== cacheName) {
return caches.delete(cache);
}
})
);
})
);
});
v2 을 변경해 보십시오.현재 두 개의 캐시 자산이 있습니다. 즉, v1 및 v2
캐시가 다른cacheName에서 필요하지 않은 자산을 삭제하지 않으면 브라우저에 더 많은 저장 공간을 소모합니다.이것이 바로 사건 탐지기를 활성화하는 용무의 곳이다.
이벤트를 터치하면 캐시 대상의 모든 키를 가져옵니다.이름
v1, v2 등 아래의 각종 캐시 자산일 뿐이다.그리고 이 캐시 이름을 현재 캐시 이름과 비교합니다. 일치하지 않으면 캐시 저장소에서 이 특정 자산 집합을 삭제합니다!마지막으로 이 과정의 가장 중요한 절차는 캐시에서 자산을 추출하는 것이다.이것은 이벤트 탐지기를 창 대상에 추가하는 것을 통해 이루어집니다. 아래와 같습니다.
// Call fetch event
self.addEventListener("fetch", (e) => {
e.respondWith(fetch(e.request)
.catch(() => caches.match(e.request))
);
});
이 단계에서 우리가 해야 할 일은fetch 이벤트가 촉발되기를 기다리는 것이다. 그 후에 우리는 먼저 인터넷 요청을 통해 필요한 자산에 접근하려고 시도한다.우리는 fetch() API 네트워크 요청을 실행합니다. (이를 우리가 설정한 이벤트 탐지기와 혼동하지 마십시오.)
그러나 응용 프로그램이 오프라인 상태이면 fetch() API는 필요한 데이터를 되돌려 주지 않습니다.이것은 우리가 캐시된 자산을 응용 프로그램의 원시적인 요청에 대한 응답으로 되돌릴 수 있도록 합니다.이것은 응용 프로그램이 오프라인 상태일지라도 캐시 자산을 요청할 때 오류가 발생하지 않도록 보장합니다!
모든 3단계가 끝날 때 소프트웨어.js 파일은 다음과 같습니다.
이것은 서비스 종사자를 만드는 방법일 뿐이지만, 응용 프로그램의 모든 페이지를 캐시하고 싶다면 소프트웨어를 수정하십시오.js 파일은 다음과 같습니다
우리의 대부분의 작업은 현재fetch 이벤트를 촉발한 후에 이루어졌다는 것을 알게 될 것입니다.이것은 현재 액세스한 모든 페이지를 캐시 저장소에 추가하여 특정 페이지를 복제하는 데 필요한 모든 자산을 복제하기 때문입니다
이것은 모든 응용 프로그램의 오프라인 운행에 필요한 자산을 캐시할 수 있는 쉬운 복구 방법인 것 같지만 모든 캐시 수요를 만족시키는 원스톱 해결 방안은 아니다!응용 프로그램의 필요에 따라 서비스 인원을 변경해야 합니다
마지막으로 응용 프로그램에 유효한 서비스 종사자가 등록되었는지 테스트하기 위해 크롬 개발 도구의 응용 프로그램 옵션 카드에 있는 서비스 종사자 부분을 볼 수 있습니다.응용 프로그램이 오프라인으로 작동하는지 테스트하려면 오프라인을 표시하고 페이지를 새로 고침하는 옵션을 선택하십시오
Reference
이 문제에 관하여(무엇이 서비스 인원이고 어떻게 그들을 사용합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rajatm544/what-are-service-workers-and-how-to-use-them-4j55텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
