이 모든 작업이 window 외부에서 이루어졌기 때문에 Cache 인스턴스는 서비스 워커 범위에서만 액세스할 수 있다고 생각할 수 있습니다. 서비스 워커 범위 및 window에서 실행되는 웹 앱의 기존 코드에서 Cache 인스턴스에 액세스할 수 있다는 것입니다. 이렇게 하면 사용자가 더 쉽게 서비스 워커 캐시와 직접 상호작용하거나 캐시 상태에 따라 사용자 인터페이스를 업데이트할 수 있습니다.
한 가지 가능한 사용 사례는 사용자가 나중에 읽고 싶지만 그 시점에 오프라인일 수도 있다는 것을 알고 있는 페이지에 '오프라인용으로 저장' 기능을 제공하는 것입니다. 아래의 Glitch 삽입에서 Workbox로 이 작업을 수행하는 방법을 보여줍니다.
위의 삽입에서 '오프라인용으로 저장' 버튼을 클릭하면 app.js 스크립트가 window 컨텍스트에서 오프라인 캐시에 쓰는 것을 확인할 수 있습니다. 서비스 워커에서 페이지의 정적 애셋은 오프라인 액세스를 위해 사전 캐시됩니다. NetworkOnly 전략은 캐시된 페이지의 오프라인 액세스를 관리하는 특수 핸들러와 함께 사용되며 NavigationRoute에 전달됩니다.
Glitch 삽입에서 기능을 테스트하려면 다음 단계를 따르세요.
- 새 브라우저 창을 열고 https://save-for-offline-test.glitch.me/로 이동합니다.
- 오프라인 읽기 목록에 추가 버튼을 클릭합니다.
- Firefox 또는 Chrome에서 브라우저의 개발자 도구를 엽니다. Chrome을 사용하는 경우 애플리케이션 패널로 이동합니다. Firefox에서 저장소 패널로 이동합니다.
- 두 브라우저의 개발자 도구 모두 왼쪽 창에 Cache Storage 항목이 표시됩니다. 클릭하여 펼칩니다. offline-cache 항목의 오른쪽 창에 방금 추가한 페이지 URL이 표시됩니다.
- 페이지 하단에서 다른 페이지 링크를 클릭합니다.
- 두 브라우저에서 오프라인 모드를 전환하여 오프라인 연결을 시뮬레이션합니다.
- 오프라인 캐시에 추가한 페이지의 링크를 클릭합니다. 오프라인 상태인 경우에도 표시되어야 합니다.
- 오프라인 캐시에 추가하지 않은 페이지의 링크를 클릭합니다. 요청이 실패합니다.
이는 window에서 Cache 인스턴스로 작업하는 유일한 사용 사례는 아닙니다. 예를 들어, 사용자가 특정 작업을 실행해야 할 것으로 알고 있는 자산을 예측하여 미리 가져오고 캐시할 수 있습니다. 이렇게 하면 주문형 애셋 다운로드에 따른 지연 시간이 줄거나 방지할 수 있습니다.
다른 사용 사례도 있을 수 있습니다. 서비스 워커가 없을 때도 Cache 인스턴스와 상호작용할 수 있으므로 서비스 워커를 설치해야 하는 것은 아닙니다.