210718 PWA 발행하기

PWA란?

Progrssive Web App
웹사이트를 안드로이드/IOS 모바일 앱처럼 사용할 수 있게 만드는 웹 개발 기술.
웹앱으로 스무스하게 동작하도록 만든 웹사이트를 모바일 앱으로 발행해서 쓸 수 있도록 해준다!

1. 스마트폰이나 태블릿 바탕화면에 웹사이트 설치 가능(마치 앱처럼)
2. 오프라인에서도 동작할 수 있음
3. 설치 유도 비용이 적음
   플레이스토어를 방문해서 앱을 설치하도록 유도하는 것보다, 웹사이트에 간단한 팝업을 띄우는 것만으로 웹사이트 방문자들에게 설치하도록 유도할 수 있음

PWA 발행하기

PWA를 발행하는 방법은 그렇게 어렵지 않다.
manifest.json과 service-worker.js 라는 파일 2개만 로컬에 있으면 브라우저가 알아서 PWA로 인식함!

하지만 2020년 11월 이후에 npx create-react-app으로 프로젝트를 생성하고 npx build를 했을 경우 manifest.json파일만 생성된다.
service-worker.js까지 자동으로 생성되려면 프로젝트를 처음 만들 때
npx create-react-app 프로젝트명 --template cra-template-pwa 라는 명령어를 사용해야함

그리고 index.js 하단의 코드를

serviceWorkerRegistration.unregister();

⬇⬇

serviceWorkerRegistration.register();

이렇게 바꿔주기!

웹앱 말고 기본 HTML/CSS와 django로 배포한 사이트도 이렇게 할 수 있나? 알아봐야겠다.