드림코딩 by 엘리_The concept of PWA (Progressive Web App)

---

The concept of PWA (Progressive Web App)

---

PWA가 뜨고 있는 추세이고 계속 성장세를 이어 나갈것 같다고 예상되어 진다.

많은 기업들이 이미 PWA의 강력한 잠재력을 알아보고 성공적으로 런칭했다.

 

 

PWA는 새롭고 강력한 소프트웨어 앱을 만드는 방식이다.

HTML, CSS, JavaScript를 이용해서 만든 웹앱을 모던한 웹 브라우저 APIs와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다.

즉 이미 만든 웹사이트나 어플이 있다면 몇 가지만 추가하면 손쉽게 데스크탑에서 동작하는 또한 모바일에서도 동작 가능한 어플을 만들 수 도 있다.

 

 

안드로이드나 아이폰 처럼 특정한 플랫폼에서 동작하는 네이티브 어플리케이션은 플랫폼에서 제공하는 다양한 API를 이용해서 사용자에게 다양한 기능을 제공하는 역량은 크지만 

앱 스토어를 이용해서 설치가능하며 그 플랫폼에서만 사용가능하다는 단점이 있다.

 

반대로 브라우저에서 동작하는 웹앱은 플랫폼에 상관없이 브라우저만 있으면 사용가능하므로

사람들이 쉽게 접근해서 사용할 수 있는 장점이 있지만 네이티브앱 처럼 플랫폼 자체의 API를 사용할 수 없다는 단점이 있다.

 

PWA는 접근성이 높은 웹앱의 장점과 플랫폼 API를 사용할 수 있는 네이티브 앱의 장점들이 결합되어 있다.

 

How to make a PWA?

 

 

총 4가지가 필요하다.

1. 웹코드로 만든 웹사이트나 웹어플리케이션

2. 보안은 굉장히 중요한 이슈이다. 그래서 HTTPs를 이용해서 서비스가 제공되어야 된다.

3. Application Manifest가 있어야 한다.

 - JSON 포맷으로 된 text file 이고 웹어플리케이션에 대한 여러 정보들이 담겨있는 파일들이 있어야 한다.

 - 이것을 이용해서 다양한 기기들에 우리 어플리케이션을 설치 가능하도록 도와준다.

4. Service Worker

 - 자바스크립트로 작성가능한 Script 이다.

 - 우리 어플리케이션에서 서버와 데이터를 주고받을 때 중간에서 모든 요청들을 통제하고 관리할 수 있다. 

 

유용한 사이트

* https://www.pwabuilder.com/

PWABuilder

 

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

Workbox  |  Google Developers

 

* https://maskable.app/

Maskable.app

 

* https://web.dev/install-criteria/

웹사이트 또는 웹 어플리케이션을 PWA로 변환하는 방법

PWA builder를 이용해서

어떤 부분이 빠져있는지 현재 점수를 확인해 본다음 

필요한 부분을 매꿔서 채워넣은 다음

다시 PWA builder를 이용해서 PWA로써 적합한지 확인해본다.

이것을 이용하기 위해서는 외부에서 접근이 가능한 url이 필요하다.

 

우리한테 필요한 어플리케이션을 위한 url을 만들고 싶다면 Github pages, Netlify 와 같은 배포툴을 이용할 수 있고

ngrok 라는 편리한 툴을 이용해서 로컬호스트url(local에서 동작하는 url)을 외부에서 접근가능 하도록 url을 만든다.

심지어 htts로 만든다.

 

그다음에 PWA를 위한 아이콘을 만들어본다.

Maskable을 이용해서 만든다.

 

- 강의참조