✨ Create React App 4로 React 앱을 PWA로 만드는 방법

개발자 👋의 귀환을 환영합니다.

Create React App 또는 react-scripts는 React 앱을 구축할 수 있는 훌륭한 도구입니다. 그리고 그것의 가장 좋은 부분 중 하나는 React 앱을 매우 쉽게 오프라인으로 만드는 데 도움이 되는 기성품serviceWorker.js 파일이 있다는 것입니다.

그러나 react-scripts 버전 4에서는 npx create-react-app app-name 명령을 사용할 때마다 서비스 작업자 파일을 가져오지 않습니다.

하지만 걱정하지 마세요. 다시 서비스 작업자 파일로 React 앱을 쉽게 생성할 수 있지만 템플릿을 사용해야 합니다. 따라서 그냥 실행하는 대신 create-react-app 플래그를 추가해야 하며 이것이 새 명령의 모습입니다.

새 앱 만들기

# JavaScript
npx create-react-app app-name --template cra-template-pwa

# TypeScript
npx create-react-app app-name --template cra-template-pwa-typescript

그러면 두 개의 서비스 워커 파일이 생성됩니다. 그 중 하나는 등록용이고 다른 하나는 서비스 워커 자체입니다.


index.js 파일에서 이전과 같이 가져오기 및 .unregister() 메서드를 얻을 수 있습니다.




.unregister()를 .register()로 간단히 변경하여 서비스 작업자를 등록하면 이제 앱이 빌드되면 오프라인에서 실행할 수 있습니다. Chrome, Edge 또는 기타 Chromium 기반 브라우저를 사용하는 경우 검색주소창 오른쪽에 버튼이 표시됩니다.



설치 시 앱을 캐시하고 온라인 상태에서도 실행할 수 있습니다.

기존 앱 변환

기존 앱을 변환하려면 코드를 복사하고 필요한 파일을 만든 다음 내가 만든 a gist에서 붙여넣기만 하면 됩니다.

원하는 경우 이 주제에 대한 비디오를 확인하는 것도 고려하십시오.


이 게시물이 도움이 되었기를 바라며 💙좋아요를 누르고 다른 사람들과 공유하십시오.

💬 댓글에 PWA인 React 앱을 알려주세요.

읽어 주셔서 감사합니다! ✌