1. PWA란 무엇인가?
MDN-PWA 소개를 읽고 PWA에 대한 기본적인 이해를 가질 수 있었다.
웹앱, 네이티브앱이 무엇인지 살짝 이해한다면 PWA를 이해하기 더 좋은 거 같다.
웹앱은 발견이 쉬운 특징이 있다. 마켓에서 애플리케이션을 설치하는 것 보다 웹사이트 방문이 빠르고 링크로 공유도 가능하기 때문이다.
네이티브앱은 운영체제와 잘 통합되어 부드러운 사용자 경험 제공을 하며 오프라인에서 동작한다.
이 두 특징을 함께 살린 것이 PWA라고 생각하면 된다. PWA의 핵심요소는 service worker이다. 이 service worker란 기술 덕분에 캐싱이 가능하고 캐싱으로 PWA는 오프라인에서도 접근가능하다.
어떤게 PWA인가에 대한 몇 가지 기준이 있다.
- 설치 가능 : 기기의 홈 화면에서 사용할 수 있어야 한다.
- 네트워크 독립적 : 오프라인이나 불안한 네트워크 연결에서 동작한다.
- 재참여 가능 : 새로운 컨텐츠들에 대해 푸시 알림을 보낼 수 있다.
- 반응형
우리 프로젝트는 여기서 1, 3번의 이득을 취하기 위해 PWA를 도입하게 되었다.
2. PWA 구현을 돕는 사이트 및 도구
2-1. PWA builder
이 사이트에서는 애플리케이션이 PWA 웹앱이 되기 적합한 지 확인할 수 있고 적합도를 점수로 표현해준다.
PWA 애플리케이션을 만드는데 처음에 가장 까다로운 부분이 manifest.json 파일 만드는 부분과 service worker 파일을 넣어주는 부분이었다.
Manifest 탭에서 필요한 정보와 아이콘 이미지를 넣어주면 manifest.json 파일의 내용을 만들어준다. 이것을 복사해서 그대로 프로젝트에 넣어주면 된다.
service worker 파일도 마찬가지이다.
Service Worker Options 탭을 눌러 내용을 확인하면서 service worker에 포함시킬 기능을 포함시키면 된다.
2-2. maskable
Manifest.json 파일을 생성하기 위해 아이콘이 중요한 요소이다.
이 사이트를 통해서 아이콘을 각 크기에 맞게 추출할 수 있는데, 192X192랑 512X512 크기는 꼭 필요하니까 이 두 크기의 아이콘만 포함시켜줘도 light house의 PWA test에 통과할 수 있다. 이 부분을 나는 너무 늦게 알아서 너무 고생했다.
2-3. Lighthouse
개발자 도구 중 하나로 여러 테스트 기능을 지원한다. 그 중에서 PWA TEST도 있다. 조금 있다가 TEST 결과가 어떻게 화면에 나오는 지 확인해보자!
2-4. 결론
결국 우리가 준비해야할 것은 3개다.
2. manifest.json
: 다양한 기기에 애플리케이션이 설치되게 하는 역할
3. service worker
: 애플리케이션이 서버와 요청을 주고 받을 때 중간에서 중재
3. PWA 세팅 FLOW
3-1. HTTPS로 배포
먼저 애플리케이션이 배포 및 HTTPS 사이트인 상태에 있어야 한다.
근데 애플리케이션이 다 완성도 안됐는데 배포를 해야한다니... 좀 부담스러울 수 있으니 Ngrok을 사용하면 된다. 설치는 해당 사이트에서 말하는대로 쭉 따라가면 된다.
ngrok http 3000
명령어를 통해 https 사이트 주소를 얻을 수 있다.
3-2. 아이콘 만들기
위에서 설명한 maskable사이트에서 아이콘을 만들어주면 된다. 위에서도 설명했지만 192x192, 512x512 사이즈 아이콘은 필수다. 다른 아이콘은 없애도 되지만 요 두 크기는 꼭 있어야 된다.
3-3. PWA builder에서 테스트하기
- 첫 테스트
HTTPS 설정만 해준 상태에서 테스트를 했을 때 딱 30점 나왔다.
- PWA 설정이 끝난 사이트
manifest.json 및 service worker 파일도 넣어준 상태의 사이트 도메인을 넣었을 때 190점이 나왔다.
3-4. 점수 올리기
공식 사이트에서 해라는 대로 하면 왜 이렇게 안될까.. 제일 많이 도움 받은 블로그를 보면서 내가 service-worker.js, serviceWorkerRegistration.js 파일이 없다는 것을 알게 되었다.
1) 좋은 건 나눠쓰자
npx create-react-app my-app --template cra-template-pwa
위의 블로그 글을 쓴 사람이 만든 PWA 프로젝트이다. 프로젝트 내에 service-worker.js 파일과 serviceWorkerRegitsration.js 파일을 우리 프로젝트에 가져왔다.
2) icon은 publice 디렉토리 내부에 넣자
나는 icon 중에 192x192, 512x512가 필수인 걸 후반에 알아서 많이 돌아갔는데 혹시 이 글을 본다면 저 아이콘 두 개만 있어도 되니 나처럼 돌아가지 마시길... 이제 그만 말하겠다.
3) manifest.json 파일 디테일 살려라(요 부분이 제일 힘들었네)
manifest.json 파일을 만들 때 몇 가지 포인트가 있었다.
- icons 배열에 icon 정보를 잘 넣어주는 게 제일 중요하다.
- icons 배열에 "purpose": "any maskable" 넣어줘야 한다.
- icon 이미지 파일은 모두 절대 경로로 잡혀있어야 한다.
4) index.html 파일에 icon 정보 링크건다.
[favicon]
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
[icon]
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x48.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x72.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x96.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x128.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x384.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x192.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/maskable_icon_x512.png" />
[manifest.json]
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />5) index.tsx에서 몇 줄 추가
import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
import reportWebVitals from "./reportWebVitals";
serviceWorkerRegistration.register();
reportWebVitals();4. light house PWA test 결과
5. 느낀점
이렇게 여러 부분을 건들면서 설정을 해본 적은 많이 없는 것 같다. manifest.json, service worker 등 잘 몰랐던 부분들에 대한 이해를 할 수 있어서 좋았다.
오늘 낮에 정주원 코치님이 말씀해주신 부분이 기억에 남는다.
구글이 가장 많은 수익은 내는 부분은 웹 검색이다. 따라서 안드로이드가 웹보다 더 잘 되는 것은 구글입장에서 좋은 상황이 아니다. 그래서 구글은 모바일에서 할 수 있는 일을 웹에서도 할 수 있도록 준비해왔고 계속 준비할 것이다.
PWA도 구글에서 만든 거지 않냐.
기술의 발전과 동향이 회사의 비즈니스와 연결된다는 점이 매우 흥미로웠다. PWA 구현하면서 구글링을 엄청 많이 했는데 흥미로운 것이 사장님 입장에서 PWA 같은 기술이 정말 반갑다는 것이었다. 앱 개발자를 고용하지 않아도 웹 개발자만으로 웹과 앱을 모두 구현할 수 있기 때문이다.
이런 개발 시장의 동향과 흐름을 잘 이해하는 개발자가 되어야 겠다는 생각을 한 번 더 하게 되었다.
6. 참고 사이트
PWA에 필요한 부분 간단하게 잘 정리
드림코딩 PWA 강의
PWA 도입하다가 빡친 썰 < 제일 처음 PWA 설정할 때 잘 안될 때 많은 웃음을 줬다.
제로초 PWA
제일 많이 도움 받은 블로그 < 이 블로그 보면서 마무리를 할 수 있었다.
너무길어요!