PWA 알아보기

Progressive Web Application.

웹앱을 API와 연결해서 크로스 플랫폼에서 동작하는 어플리케이션 형식

이미 만든 웹사이트나 웹앱을 몇 가지만 추가하면 어디서나 동작하는 어플리케이션을 만들 수 있음

 

개인적인 견해

웹 바로가기 아이콘을 만든다의 느낌과 비슷한데

안드로이드는 여기에 푸시 알림도 가능하고

ios는 현재 푸시 알림 불가.  (2022. 07. )

 

하이브리드 앱과의 차이?

하이브리드는 웹뷰 개념. 안드로이드나 xcode에서 건드려야하지만 PWA는 그렇지않음.

PWA는 앱 스토어에서 설치할 필요 X. (물론 가능도 함!)

 

필수 요소

1. 반응형 디자인

2. 서비스워커사용

3. 웹앱 매니페스트를 사용할 것

4. 푸시 노티피케이션을 사용할 수 있을 것

+ 사용자들이 네이티브앱을 사용하는 것처럼 느낄 수 있도록 다양브라우저 api를 사용해서 구현하도록 할 것.

사용자들의 디바이스에 설치가 가능하도록 만들 것

 

유튜브, 트위터, 페이스북,틱톡, 틴더, 우버, 핀터레스트, 스타벅스 등등

 

PWA 여러 곳에서 배포가능

 

Project Fugu

 

새롭게 추가되는 브라우저

 

툴

PWA builder (MS) 검토, 빠진부분 자동 채워줌

WorkBox (Google) 서비스워커 자동으로 만들어주는 라이브러리

Maskable 어댑티브 아이콘 디자인 툴

 

1. 웹 코드 어플리케이션

2. HTTPs (보안을위해)

3. Application Manifest (Json Format Text File)

4. Service Workrer (Javscript 작성, 어플리케이션 서버 통신 시 요청들을 통제하고 관리하는,  컨트롤러 역할)

오프라인 상태일때 저장해둔 데이터 보여줌. 최신 데이터들은 미리받아와서.

 

PWA Builder 이용

필요한 부분 채워놓고

다시 확인.

외부에서 접근가능한 URL. (GithubPage나 ngrok 로컬호스트를 외부에서 접속할 수 있도록 url만듦)

 

만드는 방법 참고하기

https://www.youtube.com/watch?v=FEBkne7Nyu4