서비스 워커를 사용하여 자산을 캐시하면 반복 방문 속도를 높이고 오프라인 지원을 제공할 수 있습니다. Workbox를 사용하면 간단하게 만들 수 있으며, Create React App에 기본적으로 포함되어 있습니다.
Workbox 내장
React App (CRA)을 만들면
정적 애셋을 추가해야 합니다
이것이 왜 유용할까요?
서비스 워커를 사용하여 중요한 리소스를 캐시에 저장 가능 (프리캐싱)하여 사용자가 웹페이지를 두 번째로 로드하면 브라우저는 요청을 전송하는 대신 서비스 워커에서 가져올 수 있습니다. 않습니다. 따라서 재방문 시 사용자가 오프라인 상태일 때 콘텐츠를 표시하는 기능
CRA의 워크박스
Workbox는 서비스를 만들고 유지관리할 수 있는 도구 모음입니다.
있습니다 CRA에서
workbox-webpack-plugin 드림
이미 프로덕션 빌드에 포함되어 있으며
새 서비스 워커를 등록하기 위해 src/index.js 파일을
빌드:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
다음은 이 파일을 통해 서비스 워커가 사용 설정된 CRA로 빌드된 React 앱의 예입니다.
어떤 애셋이 캐시되고 있는지 확인하려면 다음 단계를 따르세요.
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다. - `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- 앱을 새로고침합니다.
페이로드 크기를 표시하는 대신 Size 열에
이러한 리소스가 검색되었음을 나타내는 (from ServiceWorker) 메시지
서비스 워커에서 시작됩니다
서비스 워커는 모든 정적 자산을 캐시하므로 오프라인일 때:
- DevTools의 네트워크 탭에서 오프라인 체크박스를 선택하여 시뮬레이션합니다.
- 앱을 새로고침합니다.
네트워크가 없어도 애플리케이션은 정확히 동일한 방식으로 작동합니다. 연결!
캐싱 전략 수정
CRA에서 Workbox가 사용하는 기본 사전 캐싱 전략은 캐시 우선입니다. 모든 정적 자산을 서비스 워커 캐시에서 가져옵니다. 예를 들어 리소스가 캐시되지 않으면 네트워크 요청이 이루어집니다. 이 사용자가 전체 데스크톱 컴퓨터 네트워크에도 해당 콘텐츠를 있습니다.
Workbox는 다양한 전략과 접근 방식을 정의할 수 있도록 지원합니다.
정적 및 동적 리소스를 캐시하는 데 있어, CRA의 기본 구성은
완전히 제거하지 않는 한 수정하거나 덮어쓸 수 있습니다. 그러나
공개 제안서
를 방문하여 외부 workbox.config.js 파일 지원을 추가하는 방법을 알아보세요. 이
개발자는 기본 설정을 재정의하기만 하면
단일 workbox.config.js 파일
캐시 우선 전략 처리
먼저 서비스 워커 캐시를 사용한 다음 네트워크로 대체 후속 방문 시 로드 속도가 빠르고 오프라인으로 작동합니다. 하지만 사용 설정 시 고려해야 할 다음 사항을 고려해야 합니다.
- 서비스 워커의 캐싱 동작을 어떻게 테스트할 수 있을까요?
- 사용자에게 보고 있음을 알리는 메시지가 있어야 하나요? 무엇인가요?
CRA 문서 에서 이러한 사항을 자세히 설명합니다.
결론
서비스 워커를 사용하여 애플리케이션의 중요한 리소스를 사전 캐시하여 사용자에게 더 빠른 경험과 오프라인 지원을 제공합니다.
- CRA를 사용하는 경우
src/index.js - React 애플리케이션을 빌드하는 데 CRA를 사용하지 않는 경우
Workbox에서 제공하는 여러 라이브러리(예:
workbox-webpack-plugin)를 빌드할 수 있습니다 - 언제 CRA가
workbox.config.js재정의 파일을 지원하는지 주목하세요. 이 GitHub 문제