[PWA] PWA 소개 , PWA란 무엇인가?

-목   차-

 

1장 PWA 소개 6

1.1  PWA란 무엇인가? 6

1.1.1 PWA(Progressive Web Apps) 6

2장 개발환경 셋팅 12

2.1  개발툴 설치 12

2.1.1 스프링부트설치 12

2.1.2 자바 설치 13

3장 스프링부트 프로젝트 생성 14

3.1  push 알리미 기능 프로젝트 생성 14

3.2  자바 패키지 파일 생성 26

3.2.1 자바 환경설정 파일 만들기 26

3.2.2 모델 만들기 29

3.2.3 MVC 패턴 클래스 파일 만들기 34

3.2.4 Controller 코딩하기 41

3.2.5 Service interface 코딩하기 46

3.2.6 Service impl 코딩하기 46

3.2.7 repository 코딩하기 51

4장 클라이언트 만들기 53

4.1  push 알리미 웹페이지 만들기 53

4.2.1 웹페이지 만들기 53

4.2.2 index.html 페이지 만들기 54

4.2.3 manifest.json 페이지 만들기 56

4.2.4 serviceworker.js 페이지 만들기 58

4.2.5 index.css 만들기 61

4.2.6 app.js 파일 만들기 64

5장 구현한 소스 테스트 73

5.1  push 알림 테스트 73

6장 깃허브 샘플 예제 가져오기 79

6.1  샘플소스 가져와서 셋팅하기 79

 

1장 PWA 소개

1.1  PWA란 무엇인가?

1.1.1 PWA(Progressive Web Apps) 

‘Progressive Web Apps’의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 제품입니다.

◆ 푸시알림

일반적인 앱처럼 푸시 알림을 보낼 수 있습니다. 브라우저를 닫고 있는 상태의 사용자에게 푸시 알림을 보낼수 있기 때문에, 웹사이트와 비교하면 현격히 접촉,횟수를 늘릴 수 있습니다.

◆ 아이콘을 홈 화면에 추가

스마트폰의 홈 화면에 아이콘을 추가할 수 있습니다. 네이티브 앱과 마찬가지로 홈 화면에서 직접 액세스를 할 수 있으므로 사용자에게는 매우 유용한 기능입니다. 아이콘을 탭하는 것만으로 액세스를 할 수 있어 재방문 증가가 예상됩니다.

홈 화면에 추가할려면 사이트 열람이 나타나는 팝업에서 허가하거나 브라우저 메뉴에서 사용자가 직접 추가할 필요가 있습니다.

◆설치 불필요, 네이티브 앱과 같은 사용감

PWA는 앱이 아니기 때문에 사용자는 스토어에서 다운로드 및 설치하는 수고를 할 필요가 없습니다. 그러나 앱과 같은 외형과 사용감을 제공할 수 있습니다.

전체 화면 모드로 표시되기 때문에 외형도 앱에 가깝습니다. API를 복수연계하여 보다 수준높은 사용자 인터페이스를 제공 할 수 있습니다.

◆ 표시속도의 고속화

페이지의 표시 속도를 향상시킬수 있습니다. PWA는 프리캐시 기능이 있어, 사용자가 페이지를 읽고 있는 동안 다음 페이지의 데이터를 일거 들일 수 있습니다.

◆오프라인에서 열람이 가능

미리 페이지 정보를 읽어 들이기 때문에 오프라인 상태에서도 캐시 데이터를 사용하여 사이트의 열람을 할 수 있게 됩니다.

◆모바일 브라우저와의 차이점

읽기 속도

최대치에 가까운 읽기 속도입니다. PWA는 프리캐시 기능이 있어 페이지를 보고있는 동안 다음 페이지를 읽어들입니다. 네트워크의 품질에 관계없이 빠르게 표시되기 때문에 사용자는 스트레스 없이 사이트를 열람 할 수 있습니다. 또한 백그라운드에서 업데이트 하기 때문에 다시 로드할 필요도 없습니다.

앱과 같은 인터페이스

기존의 모바일 브라우저에 비해 사용자 인터페이스의 자유도가 높아집니다. 전체화면 모드 표시가 가능하여 앱과 같이 사용자의 몰입감을 높일 수 있습니다. 등록 및 주문,결제,연락처 등의 도선을 원활하게 구축할 수 있습니다.

사용자와의 접촉 기회 증가

사용자의 허가가 있으면 앱과 같이 홈 화면에 아이콘 추가 및 푸시 알림도 가능하기 때문에, 접촉 빈도 증가로 연결됩니다.

◆앱과의 차이점

설치가 필요없다.

가장 큰 차이점은 앱스토어를 통해 다운로드 및 설치를 할 필요가 없다는 점입니다.

개발의 자유도

앱스토어를 통할 필요가 없다는 것은 Apple과 Google의 정책에 구속될 필요가 없다는 의미입니다. 심사를 통과할 필요가 없어 개발의 자유도도 증가하고 즉시 공개할수 있습니다.

또한 개발자의 관점에서 볼 때, 플랫폼별로 앱을 개발할 필요가 없다는 점도 매력적입니다. 하나의 PWA를 구축하는 것만으로 장치에 상관없이 일관된 내용을 표시할 수 있습니다.

◆PWA를 도입할 때 주의할 점

SSL화가 필요하다

 

PWA는 https를 전제로 한 기술입니다. HTTP를 통해 구축된 웹사이트라면 전체를 https로 해야 적용됩니다.

 

◆ 도입사례

Twitter :  https://twitter.com

구글 파이어베이스 : https://firebase.google.com/

PWA를 설치하면 바탕화면에 바로가기 아이콘이 생성됩니다.

생성된 바탕화면 바로가기 아이콘 위에 3개는 대형사이트에서 운영하는 아이콘이고

밑에 푸쉬알림 PWA는 이 교재에 예제로써 공부할 내용입니다.

예제는 심플하지만 PWA의 모든 기능이 함축된 예제입니다.

예제 PUSH알림 데모 화면입니다.

메세지를 입력후 제목&내용,아이콘,이미지,액션,사용자 닫기 버튼을 트레이아이콘 상단에 메세지 창이 옵션에 따라서 다양한 모습으로 창을 표시합니다.