최종 프로젝트 마무리하면서 아위웠던 PWA를 시도해봤다. Github ❤

PWA

• 프로그레시브 웹 앱
• PC/모바일 등에서 웹을 앱처럼 보이도록 만들 수 있다
• 설정을 해놓으면 인터넷이 끊겨도 앱이 돌아가는 것처럼 화면이 보인다
  (다만 서버와 통신은 당연히 불가능하다)
• 아날로그가 익숙한 유저에게 바로가기 아이콘, 앱 아이콘을 제공해 접근성을 높일 수 있다.
• 실제 앱처럼 자이로센서, 알림기능 등을 이용할 수 있다.
• 스토어 진출도 가능. 반대로 자사 페이지에서 바로 다운로드하게 할 경우 마케팅 비용을 줄일 수 있다.

PWA pet프로젝트

 npx create-react-app 프로젝트명 --template cra-template-pwa

이렇게 프로젝트 생성하면 필요한 파일이 자동으로 만들어진다.

serviceWorkerRegistration.unregister();

index.js에 가면 위와 같은 코드가 있는데 unregister()를 register()로 바꾸고 yarn build 해주면 된다.

manifest.json 파일은 웹앱의 아이콘, 이름, 테마색 등을 설정할 수 있다.
service-worker 는 Cache Storage에 자동으로 파일을 저장하게 하는데 역시 설정을 변경할 수 있다.
(** 나중에 설정도 건드려보기!)
service-worker 덕분에 PWA는 오프라인에서도 공룡이 아니라 앱 모양을 유지할 수 있음.

PWA 다운로드 버튼

** 추가예정
PWA로 프로젝트 생성이 생각보다 금방 끝나서 로컬서버로 PC에 앱을 다운로드 했다.
그런데 앱을 PC에서 삭제한 이후에 사라진 다운로드 버튼...
다운로드 버튼을 넣어야겠답.. 이력서 마무리하고 추가해야징..