오늘 우리는 Service Workers의 도움으로 첫 번째 오프라인 웹 페이지를 구축하고 있습니다.

서비스 워커란?

서비스 작업자는 사용자 상호 작용 없이 브라우저에서 BackGround를 실행할 수 있습니다. 그들은 There Own 스레드에서 작동하며 브라우저가 닫히거나 사이트가 닫히더라도 작동합니다.

서비스 작업자는 localhost에서 작동하는 개발 시점에 (https)와 같은 보안 사이트에서만 실행됩니다.

오늘날 우리는 오프라인 웹 페이지를 구축하기 위해 Service Workers를 사용하고 있습니다.

먼저 브라우저에서 서비스 워커를 사용할 수 있는지 확인해야 합니다.

이것은 우리의 script.js 파일 코드입니다.



내비게이션에 서비스 워커가 있는 경우 위 코드가 수행하는 작업

그렇다면 블록 내에서 이 코드를 실행합니다.

빈 sw.js 파일을 생성해야 하고 register 메소드에서 sw.js 파일의 경로를 지정해야 합니다.

등록 방법은 성공적으로 등록되면 약속을 돌려줍니다.
그렇지 않으면 등록하는 동안 몇 가지 문제가 발생했습니다.

이제 우리는 Sw.js 파일에 있습니다.

그들은 서비스 작업자가 우리에게 제공하는 다른 수명 주기 이벤트입니다.
설치, 활성화, 가져오기는 무엇입니까?

먼저 코드를 작성하는 데 필요한 서비스 워커를 설치해야 합니다.

이벤트 설치

self.addEventListener('install',function(){


})

이것들처럼 보인다

설치 시 캐시를 열고 정적 자산을 캐시에 넣어야 합니다.



event.waitUntil()은 Promise를 취하여 Promise가 될 때까지 기다립니다.
해결합니다. 마찬가지로 애셋이 캐시에 들어갈 때까지 기다려주세요.

캐시 이름 *'my-cache-1'*에 정적 자산을 이미 캐시한 활성화 이벤트를 건너뜁니다.

이제 네트워크 요청을 보내는 대신 캐시에 액세스하고 캐시 내부의 자산을 사용하려고 합니다.

가져오기 이벤트

먼저 요청한 파일이 캐시에 있는지 확인합니다. 사용하거나 네트워크 요청을 보내면 캐시에 있습니다.

와우, 간단한 오프라인 웹 페이지를 성공적으로 완성했습니다.



이것이 우리의 최종 결과물입니다. 궁금한 점이 있으면 언제든지 문의하십시오.

행복한 코딩...

자원

Cache Api

More About Service Workers