PWA란?
Progressive Web Application
HTML, CSS, JavaScript를 이용해서 만든 웹앱을 모던한 웹 브라우저 APIs와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다!
안드로이드나 ios 어플리케이션(native app)은 플랫폼에서 제공하는 다양한 API를 이용해서 사용자에게 다양한 기능을 제공한다. 하지만 앱스토어로 설치해야하고, 그 플랫폼에서만 사용할 수 있다.
브라우저에서 동작하는 Web app은 플랫폼과 상관없이 브라우저만 있으면 사용 가능하기 때문에 사람들이 쉽게 접근해서 사용할 수 있다. 하지만 native app처럼 플랫폼 자체의 API를 사용할 수 없다.
PWA = 접근성이 높은 웹앱의 장점 + 플랫폼 API를 사용할 수 있는 native app의 장점
PWA Tools
PWA Builder : 웹사이트를 PWA로 만들때 어떤지 검토 및 부족한부분을 채워줌
Wordbox : 구글의 다양한 PWA를 위한 Service Worker를 자동으로 만들어주는 라이브러리
Maskable : 더 나은 PWA 사용성을 위한 Adaptiv 아이콘 생성
PWA를 만들기 위해 필요한 4가지
- 웹코드로 만든 사이트 혹은 웹 어플리케이션
- HTTPs를 사용한 서비스 제공 (보안을 위해!)
- Application Manifest (JSON) : 웹 어플리케이션에 대한 다양한 정보들 => 다양한 기기에 어플리케이션을 설치할 수 있도록 도와줌!
- Service Worker (JavaScript) : 어플리케이션에서 서버와 데이터를 주고받을때, 중간에서 그 모든것을 통제하고 관리하는 역할
※ ngrok를 사용해서 로컬 네트워크를 외부에서도 사용할 수 있게 만들어보자!
앞서 PWA를 만들기 위해 필요한 4가지 중 하나로 HTTPs를 사용한 서비스를 제공해야한다고 했다. 그렇다면 내가 로컬에서 만든 프로그램을 HTTPs로 외부에서 접근하게 하려면 어떻게 해야할까? 정석대로라면 웹서버를 만들고 올리고 하기에는 굉장히 귀찮은 작업이다. 하지만 ngrok를 사용한다면, 쉽게 외부에서 접근이 가능하도록 만들 수 있다! 물론 테스트를 위한 용도이지, 정식 배포는 아니다!
- ngrok사이트에서 os에 맞는 ngrok 파일을 다운받고 설치한다.
- VsCode에서 Live Server를 사용해 로컬 서버에 프로그램을 실행한다.
- port 번호를 확인한다. 여기서는 5500번으로 Onlinme Shopping이란 프로그램이 실행중이다.
- ngrok를 실행하고,"ngrok http (포트번호)"를 입력한다. 나는 5500번이니까 "ngrok http 5500"!
- 포워딩된 임시 링크를 복사해서 사용하면 된다! 우리는 https를 사용할거니까 제일 밑에꺼 사용!
- 해당 링크로 접속하면 이렇게 HTTP Request에 대한 내용이 ngrok에 출력된다.
PWA를 만들어보자!
- PWA Builder에 들어가서 내가 만든 프로그램 링크를 입력해 얼마나 PWA와 적합한지 확인한다.
앞서 https로 만든 링크를 입력했다.
굉장히 야박하게 30점을 받았다.
- Manifest Options에서 Info, Setting, Image 등을 넣어준다.
- Service Worker Options에서 Offline page를 추가한다.
- Overview로 돌아와서 Next를 클릭한 후 Generate를 클릭하여 다운로드받는다.
manifest 파일과 다양한 크기의 이미지파일이 들어가있다.
- manifest.json, images폴더, 그리고 pwabuilder-sw.js 파일을 프로젝트 폴더로 옮긴다.
- manifest 링크와 script를 index.html의 head에 넣어준다. script는 head의 제일 마지막에 넣어야한다.
<link rel="manifest" href="manifest.json" />
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
</script>- pwabuilder-sw.js에서 offlineFallbackPage을 offline.html로 변경하고 offline.html 파일을 만든다.
- PWA Builder 페이지에 다시 들어가서 Test Updated App 버튼을 클릭한다.
150점이 나와야하는데 자꾸 렉 먹어서 설정이 변경이 잘 안된다ㅠㅠㅠㅠ
- 이후 완성한 다음 확인해보면 url 입력칸 우측에 해당 어플리케이션을 다운로드할 수 있는 버튼이 나온다!
