[오늘은 무엇을 먹을까?] PWA 개발

안녕하세요🙈🙉 개발자 재민콩입니다.

 

이번글은 PWA로 개발하여 Google Play 앱 출시까지 하는 과정을 포스팅하려고 합니다.

 

PWA란 Progressive Web Applications으로 반응형 웹앱으로 제작된 페이지를 네이티브 앱과 같이 보여주고 오프라인에서도 동작하고, 설치, 푸시 알림 등 기능들을 구현할 수 있고 빠른 로딩을 할 수 있는 장점이 있습니다. 또한 앱으로 빌드하여 Store에 출시도 가능합니다.

 

PWA는 필수 조건이 있습니다.

1. manifest.json

2. service-worker.js

3. icon image

4. https

 

PWA는 새로운 프레임워크나 프로그래밍 언어가 아니고, 위의 조건을 충족시키기만 하면 됩니다.

PWABuilder에서 내가 개발한 사이트의 Manifest, Service Worker를 생성하거나, PWA 홈페이지로 적합하다면 Android, IOS로 Build를 진행해 App Store, Google Play에 출시도 할 수 있습니다.

 

제가 참고한 PWA 적용 홈페이지로는 아래 홈페이지들이 있습니다. Chrome 웹으로 접속하여 사이트를 애플리케이션으로 다운로드가 가능하거나 페이지 소스보기에서 manifest를 찾아서 확인해볼 수 있습니다.

1. Instargram

2. Twitter

3. Youtube Music

 

내용은 간단하게 여기까지 알아보고, Flutter로 개발했었던 Front를 Vue로 다시 개발하는 작업을 진행했습니다.

Vue는 자주 사용하던 프레임워크이기 때문에 수월하게 작업을 진행했습니다. 디자인적인 감각이 부족하기 때문에 무료로 제공해주는 LottieFiles를 🙇🏻‍♂️ 사용하여 저의 부족한 감각을 조금 숨겨주었습니다.

 

* Vue는 웹 프레임워크로 SPA(Single Page Application)입니다. 하나의 페이지로 구성이 되어있고 상태관리를 쉽게 할 수 있기 때문에 많은 개발자분들이 사용하고 있습니다.

 

홈

음식점 검색 필터

음식점 검색 결과

메뉴

통계 - 캐릭터 유형

통계 - 차트

 

다음은 Server 세팅으로 찾아뵙겠습니다!