PWA로 애플리케이션 만들기

기존 네이티브 앱을 만들 수 있는 Android와 Swift는 플랫폼 내의 환경을 100% 활용할 수 있다는 장점은 있지만, 그 플랫폼에서만 사용할 수 있다는 단점이 있다. 그러나 PWA를 이용하면, 브라우저 환경에서 동작하는 애플리케이션이므로, Mobile과 PC에서 모두 동작하게 만들 수 있다. 물론, 브라우저의 힘을 빌리므로 각 플랫폼에 맞는 API를 모두 활용하진 못한다.

 

PWA로 제작하기 위한 준비물

• 반응형 디자인으로 만든 웹앱
• HTTPs 
• Manifest 
• Service Workers 

 

Manifest란?

웹앱에 대한 정보가 담겨있는 json 파일이다.

 

Service Workers란?

JavaScript로 작성하며, 서버와 데이터를 주고받을 때, 중간에서 요청을 통제하고 관리하는 역할을 한다. 데이터캐싱을 통하여 오프라인에서도 정상적으로 앱이 동작하도록 도와줄 수 있고, 데이터 패칭을 통하여 성능최적화를 이룰 수 있다.

 

 

도움이 되는 사이트

PWA Builder

https://www.pwabuilder.com/

마이크로소프트사에서 만들었으며, 웹사이트를 PWA로 전환할때, 검토해주고, 빠진부분들을 자동으로 채워주면서 심플하게 만들 수 있게 도와준다.

 

Workbox

https://developers.google.com/web/tools/workbox

Google는 다양한 PWA를 위한 서비스워커를 자동으로 만들어주는 라이브러리를 만들었다.

 

app-manifest

https://app-manifest.firebaseapp.com/

manifest 작성을 도와주는 사이트이다.

 

Maskable.app

https://maskable.app/

PWA 사용성을 위한 아이콘을 디자인할 수 있는 사이트이다. 아래처럼 icon을 생성할 수 있다.

 

비슷한 사이트로 https://www.favicon-generator.org/ 도 있다.

 

PWA Builder 사용기

내가 만든 웹앱 주소를 입력하면, 아래와같이 PWA에 적합한지 판정을 받을 수 있다.

 

PWA에 적합하다는 판정을 받고나면 아래와 같이, 패키지파일을 얻을 수 있다.