프로그레시브 웹 앱 (PWA, Progressive Web Apps )

‘프로그레시브 웹 앱스(Progressive Web Apps. PWA)’는 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념으로 Google I/O 2016에서 소개된 미래의 웹기술이며, PWA라고 줄여서 부르기도 합니다. PWA는 앱 수준으로 점진적으로 발전해 나가는 웹을 지향합니다. 궁극적으로는 앱(app) 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다.  구글에서 소개하는 PWA는 이러합니다.

PWA는 최고의 웹(web)과 최고의 앱(app)을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해 질 것이다. 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다. 모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다.

쉽게 말하자면, PWA는 모바일 앱과 웹 기술의 장점을 결합한 것이라고 볼 수 있습니다.( 출처 : 프로그레시브 웹앱(Progressive Web Apps)이란? )

 

PWA의 특징들

 

■ 프로그레시브 웹앱이란?

• 진화 : 점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관없이 모든 사용자에게 적합하다
• 반응형 : 데스크톱, 태블릿, 모바일 등 모든 폼팩터에 맞게 보여집니다
• 연결 독립적 : 오프라인이나 느린 네트워크에서도 작동(로컬 기기의 캐시에서 로드)
• 앱과 유사 : 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공
• 최신 상태
• 안전 : HTTPS를 통해 제공됨
• 검색 가능 : 구글과 같은 검색 포탈에 검색결과에 노출됩니다. 
• 재참여 가능 : 푸시 알림 같은 기능 가능
• 설치 필요 없음(다운로드 필요 없음) : 앱 스토어 등록이 필요 없음
• 링크 연결 가능 : URL을 통해 손쉽게 공유할 수 있음

– 출처 : 구글 개발자 블로그

아래의 화면은 프로그레시브 웹앱으로 구축된 사이트를 보여주는 화면입니다. 폰에 바로가기가 있다는 점, 앱과 같은 완벽한 사용자 경험을 제공하다는 점, 그리고 엄청나게 빠르다는 것을 쉽게 확인할 수 있습니다.

( 출처 : 구글의 ‘프로그레시브 웹 앱스’를 아십니까? )

 

프로그레시브 웹 앱 ( PWA, Progressive Web Apps ) 설명 동영상 교보재

아래는 2016년에 구글에서 발표한 PWA 키노트입니다. 딱딱할수 있는 분위기를 재밌게 풀어서 설명해주고있습니다.  한글자막이 있으니 보시면 많은 도움이 됩니다. ( 출처 : 구글의 ‘프로그레시브 웹 앱스’를 아십니까? )

아래는 2016년에 구글에서 발표한 PWA 키노트입니다. 딱딱할수있는 분위기를 재밌게 풀어서 설명해주고있습니다. 한글자막이 있으니 보시면 많은 도움이 되실겁니다.

 

프로그레시브 웹 앱 (PWA, Progressive Web Apps )의 사업성(가능성)

 

페이스북 공개그룹중 하나인 한국 워드프레스 사용자 모임(  https://www.facebook.com/groups/kopress/permalink/1833126583410546/ )에 구슬이 서 말 님은 ” 개인적으로는 앞으로 한국에서도 쇼핑몰이나 회사 소개 페이지를 프로그레시브 웹 앱으로 대체할 가능성 높다고 봅니다. 워드프레스 관련 일을 하는 저로써는 프로그레시브 웹 앱은 또 다른 기회라고 판단하고 있습니다. ” 라며 PWA가 기회라는 점을 지적하고 있는데, 이에 대해 저도 공감합니다.

 

MS가 구글과 함께 PWA에 올인하는 이유

(출처 : 칼럼 | MS와 구글이 ‘프로그레시브 웹 앱’에 올인하는 이유 )

“

…..

스마트TV와 다양한 사물인터넷 기기에 PWA를 적용하는 것도 간편하다. 스마트TV와 다양한 사물인터넷 기기에 PWA를 적용하는 것도 간편하다.
……
크롬 70을 설치하면 윈도우 10에서 PWA가 마치 앱처럼 작동한다. 알림, 라이브 타일, 코타나를 지원한다는 의미다. 또한, 크롬 메뉴나 시작 메뉴, 또는 작업 표시줄의 고정 앱으로 바로 실행할 수도 있다. 크롬 70은 마이크로소프트 스토어에서 다운로드할 수 있다.

현재까지 구글과 마이크로소프트는 PWA에서 더할 나위 없이 좋은 팀워크를 보여줬다. 양사 모두 이익이기 때문이다. 먼저 마이크로소프트는 PWA를 통해 윈도우 이용자가 이용할 수 있는 앱의 수와 종류를 크게 늘릴 수 있다. 그러나 필자가 더 주목하는 것은 다른 가능성이다. 바로 마이크로소프트가 자신의 안드로메다(Andromeda) 기기로 스마트폰 시장에 재진출하는 것을 염두고 둔 것이다. 앱이 전혀 없이 시장에 들어가는 대신 위험을 PWA를 앞세워 낮추는 것이다.

실제로 PWA 앱 대부분은 안드로이드 앱의 대체재로 개발될 것이다. 이전에는 안드로이드 기기와 픽셀북에서만 쓸 수 있었던 수많은 앱을 윈도우 서피스 폰 기기에서도, 또는 안드로메다에서도 쓸 수 있게 된다. 이는 마이크로소프트와 구글 모두에게 이익이다. 마이크로소프트는 막대한 앱을 얻고, 구글은 모든 사람이 모든 것을 웹에서 처리하는 현재의 크롬OS 전략과 미래의 푸시아(Fuschia) 전략(구글의 차세대 모바일 단말용 운영체제 (OS)에 도움이 된다.

…..

실제로 Uber, Twitter Lite, AliExpress, Pinterest, Trivago, Forbes, Washington Post, 버거 킹(2019-04-23 기준 본사와 한국 모두 적용 안 됨), Lancôme, 홈데포, 나사, 스타벅스, Settled 등이 PWA로 전환했거나 전화하고 있고, 다른 기업도 뒤를 따를 것이 확실시 된다.

…..
“

이 칼럼의 내용을 다시 해석해보면 스마트폰/태블릿PC는 물론, 윈도우 10이 설치된 데스크톱/노트북은 물론 스마트 TV및 다양한 사물인터넷 기기에도 PWA를 적용(ex : 푸쉬알림을 보낼 수 있음)함으로써 거의 모든 통신장비에 PWA를 적용할 수 있음을 의미합니다. 한편으로는 애플을 빼고 마이크로소프트와 구글이 손을 잡고 app 시장을 대체하겠다는 의미이기도 합니다. 

 

왜 PWA인가?(PWA 의 강점, PWA의 사업성)

프로그레시브 웹앱(Progressive Web Apps)이란?  을 살펴보시면 “왜, PWA 인가”에 관한 너무나 명쾌하게 설명하고 있습니다. 반드시 꼭 다독 및 정독해 주세요.  워드프레스로 만든 사이트를 PWA로 구축하시면

• 네이티브 앱은 플랫폼(안드로이드, iOS)처럼 종속되어 개발하는데에 많은 시간과 노력이 필요한데 PWA는 web을 연장하여 발전시킨 것으로 web 구축에 들어가는 시간과 노력외에 약간의 추가적인 시간과 노력이 들어가면 가능하고 추가 구측비용이 매우 저렴합니다.  
• 앱(app)은 자연검색에 노출되지 않지만 PWA는 웹(URL, 사이트)이므로 검색엔진(네이버, 구글, 다음, 줌 등)에 노출되어 자연스럽게 유입을 얻을 수 있고( SEM( 검색엔진마케팅, Search Engine Marketing ) 이 가능합니다. ( 참고로, 이 사이트, aiforu.kr 는 18.9.22 기준 대략 월 2,250 건을 모바일기기를 통해 자연검색 유입(네이버, 구글, 다음, 줌 등을 통한 유입)을 얻고 있습니다.  클릭당 비용을 1,000원이라고 가정하고 이것을 클릭당 광고비용으로 환산하면 월 225만원의 광고효과를 무료로 얻을 수 있음을 의미합니다 ) 
• 홈 스크린(Home Screen)에 바로가기 아이콘을 추가하여 쉽게 찾아올수 있게 할 수 있습니다.(유입 및 재방문을 크게 늘릴 수 있습니다.)
• 관련된 푸시 알람(Notification)을 보내어 재유입 또는 전환을 이끌 수 있습니다. (이것은 기존에 가장 저렴하면서도 유효한 마케팅 기법이면서도 국내에서만은 외면당했던 e-mail marketing 이 가능함을 의미합니다. 또한 무료 SMS marketing 대체제로서의 가능성을 보여줍니다.)
• 이외에도 오프라인 상태에서도 작동하여 웹서버가 중지되어도 사용자는 해당 사이트를 이용할 수 있습니다. 
• 일반 web에 비해 4배나 빠른 loading 속도로 검색엔진최적화에 높은 점수를 받아 상위에 랭크될 수 있는 강점(사업성)이 있습니다. 

 

PWA의 사업성에 관한 저의 견해

프로그레시브 웹 앱 (PWA, Progressive Web Apps )의 사업성(가능성)은 앱개발의 사업성 그 이상입니다. PWA가 앱의 대체품이라고 생각한다면 부정적 견해가 있을 수 있지만, 자신의 독창적인 비즈니스 모델이 있으나 앱개발에 어려움을 겪어던 개인이나 사업체에게는 기회가 될 수 있으며 저희들처럼 inbound marketing 에 강점이 있는 개인이나 사업체에게는 앱시장에 진입할 수 있는 기회가 될 것이라고 생각합니다.   (물론 아주 약간의 구축 비용은 들지만) PWA는 거의 무제한의 푸시 알람이 가능합니다. 이것은 국내 inbound marketing 에서 안 통하던 SMS marketing, e-mail marketing 이 가능해진다는 점도 큰 가능성중에 하나입니다. 카카오의 플러스친구의 비용 18년 5월 1일부터 무료문자가 1만건에서 1,000건으로 축소된 이후, 1,000 건이상에 대해서는 건당 15원 / 20원이 부가되는 비용과 비교해 볼때 PWA의 푸시 알람기능은 강력한 SMS marketing 대체 도구가 될 수 있습니다. https://www.aiforu.kr/%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%ED%94%8C%EB%9F%AC%EC%8A%A4%EC%B9%9C%EA%B5%AC-%EA%B0%9C%EC%84%A4%ED%95%98%EA%B8%B0/ )

 

당신이 PWA를 배워야하는 5가지 이유

( 출처 : 노마드 코더 Nomad Coders 의 페이스북 페이지 )

1. (PWA Stats) PWA 도입 후 전환율 수치를 공유하는 웹 사이트
– Uber PWA take less than 3 seconds to load
– Treebo conversion rate 4x increase
– Best Western Hotel sees 300% increase in revenue 
👉 https://www.pwastats.com/

2019-04-23 기준 65개의 PWA 성공사례를 보여줍니다. 이 사이트를 강력 추천합니다. PWA가 어떤 효용을 줄 수 있는가에 관한 총체적 영감/답을 주고 내용도 매우 충실합니다. 

도입사례는 구글 개발자 모임의 Case Studies( https://developers.google.com/web/showcase/ ) 에서도 확인할 수 있습니다.
FEATURED(대표), BY VERTICAL(산업별), BY REGION(지역별), ALL(전체)로 구별하여 상세히 살펴볼 수 있습니다.

도입사례들중 국내에서 알만한 일부 회사들의 사례를 발췌 번역하였습니다. 참고하세요.  

프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 도입사례(1) : Building m.uber : 세계 시장을 위한 고성능 웹 응용 프로그램 엔지니어링

 

프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 도입사례(2) : Alibaba

 

프로그레시브 웹 앱 (PWA, Progressive Web Apps ) 도입사례(3) : Trivago

 

PWA에 관한 사업제안서가 필요하신 분은 [email protected] 로 memo 남겨주시면 e-mail로 보내드리겠습니다. 

2. (PWA examples) PWA 웹 앱 몽땅 모음
👉 https://pwa.rocks/

3. (Forbes) PWA가 네이티브 앱을 대체하게될 이유
https://www.forbes.com/…/why-progressive-web-apps-will-re…/…

4. (Hackernoon) PWA? 모바일 웹 앱 개발의 미래
https://hackernoon.com/progressive-web-apps-the-future-of-m…

5. (PWA examples) 우수한 PWA 웹 앱 딱 11가지 샘플 모음
https://themanifest.com/ap…/11-examples-progressive-web-apps

👉 PWA 수업 구경은 요기 👈 워드프레스로 PWA 를 구축할 수 없다면 이 아카데미에서 배울 수 있습니다. 
https://academy.nomadcoders.co/p/ecommerce-clone-nextjs-pwa

 

WordPress 의 PWA 도입 일정( 출처 :  Progressive Web Apps: How That Will Change the WordPress Environment )

WordPress는 기본 응용 프로그램에서 프로그레시브 웹 응용 프로그램의 생성을 완전히 지원하지 않습니다. Jetpack 팀은 내년(2018년)에 PWA 기능을 추가하기로 약속했습니다. 이것은 WordPress의 Javascript- ification에 의해 도움이됩니다.

Jetpack은 “준비가 끝나면 PWA 기능을 서서히 도입합니다.”Dan Walmsley, WordPress VIP 블로그 기사. 개발자는 5.6.0의 Jetpack Manifest Module을 사용하여 매니페스트 파일을 추가 할 수 있으며 프로그레시브 이미지로드를 도입하여 페이지에 이미지가 많아도 사이트로드 속도를 높일 수 있습니다.

일부 플러그인은 PWA 기능을 추가하려고하지만 많이 채택되지는 않았습니다.

• WordPress 최적화 도구는 작업 및 매니페스트 도구를 제공합니다.
• 슈퍼 프로그레시브 웹 앱은 다른 기능과 함께 홈 화면에 매니페스트와 추가 버튼을 생성합니다.
• 워드 프레스 모바일 팩은 또한 PWA 기능들을 추가합니다.

 

카페24, 차세대 웹기술 적용한 ‘스마트웹앱’ 서비스 시작

 ‘카페24’는 업계 최초로 웹을 앱처럼 사용할 수 있는 차세대 웹기술 PWA(Progressive Web Apps)를 적용한 ‘스마트웹앱’ 서비스를 19년 2월 12일 시작하였습니다.  신개념 웹기술로 설치형 애플리케이션 수준의 환경구현을 목표로 하고 있다고 밝혀 아직은 완벽한 PWA 서비스를 제공하고 있지는 않은 것 같습니다. 그러나 PWA가 대세라는 것은 확실합니다.  
관련기사 : 카페24, 차세대 웹기술 적용한 ‘스마트웹앱’ 서비스

 

대체제(경쟁 서비스)

 

모바일앱서비스(  바이앱스 , 스마트스킨  )

카페24는 제휴서비스로 모바일앱서비스를 소개하고 있고 제휴사는 바이앱스 , 스마트스킨 2곳입니다. 

모바일앱서비스를 모바일 웹사이트에 어플리케이션이 합쳐진 형태로, 웹과 앱의 장점을 모두 갖춘 쇼핑환경을 고객에게 제공할 수 있는 서비스로 정의하고 있으며 푸시 알림 및 SNS 연동 기능 등 앱에서만 가능한 기능들이 쇼핑몰 매출증대에 큰 역할을 해 줄 수 있다고 소개하고 있습니다. 

저는 바이앱스만 살펴보았는데, PWA로 구현되는 것은 아니고 스크랩핑/파싱 기술을 이용하여 웹을 앱으로 전환하는 것 같습니다. 푸쉬알람은 기본이고 풍부하고 다양한 분석 서비스등 제공하며 기술의 수준이 매우 높고 가격 경쟁력도 매우 높습니다. 고려할 점은 계속 매달 유지 관리비(월 5만원)가 들어갑니다. 

 

배달어플( 바나나포스 )

이 회사는 을 대량생산(?)하는 솔루션회사입니다. 이 회사의 솔루션을 보면서 제가 보는 가능성은 배달어플 시장입니다. 

앱의 구현형태는 http://bananapos.co.kr/product/myapp 에서 볼 수있으며 기본 프레임 위에 업소의 정보와 메뉴등이 들어가는 형태입니다. 

제가 이 배달어플에서 찾는 가능성은  native app 인데, 1년이면 44.8 만원( = 10만원 + 2.9만원*12개월 ), 2년이면 79.6 만원의 수익을 얻을 수 있다는 점입니다. 

( 이미지 출처 : http://bananapos.co.kr/product/myapp )

강점은 배달 POS에 있고 배달의민족, 요기요, 배달통의 배달앱 주문 연동으로 배달의민족, 요기요, 배달통으로 들어온 주문을 바나나 배달 포스 1곳에 모아서 보고 처리할 수 있는 것도 강점입니다. 

간편한 배달앱 연동은 스크래핑 엔진으로 얼마든지 가능할 것 같은데, 공개된 페이지가 아닌 로그인해야 볼 수 있는 주문내역 페이지르 어떻게 스크래핑할 수 있을지는 더 알아보아야 겠습니다. 

 

Progressive Web App 관련 워드프레스 플러그인들

워드프레스 플러그인( https://ko.wordpress.org/plugins/ ) 검색창에서 27개 정도의 플러그인들이 검색됩니다.

활성사용자가 1000 명이 넘고 여러 검색결과 높은 평가를 받는 플러그인들은 가. Progressive WordPress (PWA), 나. WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps, 다. Super Progressive Web Apps, 라. WP-AppKit – Mobile apps and PWA for WordPress 등으로 압축됩니다.

아래의 모든 플러그인들을 이용함에 있어 공통적으로 미리 아셔야 할 것이 있습니다.

1. 플러그인을 설치 및 실행 후 아무런 변화가 없는 경우,  이용중인 스마트폰/태블릿 등 장치와 브라우저가 serviceworkers를 지원하는지 확인해 보세요.  기본적으로 모바일 크롬브라우저에서는 잘 보여지고 최신 버전의 대부분의 브라우저는 지원이 됩니다. 그러나 마이크로소프트 IE(인터넷 익스플로어) 모바일, 블랙베리 등은 지원이 되지 않습니다.  

기기(스마트폰/태블릿 제조사)별로는 영향을 거의 받지 않으나 그 기기가 사용하는 브라우저에는 영향을 받습니다. 삼성스마트폰의 삼성인터넷은 안드로이드 운영체계를 사용하고 크롬을 삼성화한 브라우저이어 PWA가 잘 구현이 됩니다. 그러나 홈화면 추가 배너가 뜨지 않고 주소표시줄에 홈아이콘으로 표시되어 잘 작동하지 않는 것으로 오해하실 수 있습니다. 이 경우, 삼성스마트폰에서 크롬에서 사이트에 접속하면 홈화면 추가 배너가 보여질 것입니다. 개인적으로 개발하는 프로젝트가 있는데, 국내의 경우, 삼성폰에서 삼성인터넷으로 접속하는 경우가 많을 것 같은데, 사용자들이 잘 홈화면 추가 버튼을 찾지 못할 것 같아 염려됩니다. 

2. 플러그인 구성시 중간중간 PWA 의 유효성을 검사하며 진행하세요. 

 

가. Progressive WordPress (PWA)

이 게시글이 너무 길어저 따로 아래의 게시글로 정리하였습니다.

https://www.aiforu.kr/progressive-wordpress-pwa-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/

 

나. WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps( https://wpmobilepack.com/ )

이 게시글이 너무 길어저 따로 아래의 게시글로 정리하였습니다. 기본이 되는 워드프레스 PWA 플러그인이니, PWA plugin입니다. 무료 버전은 잘 구현이 되는데, 유료 테마(Phantom, $49)에 대한 기술지원은 안 좋습니다. PayPal 결제후 취소에도 어려움이 있습니다.  WordPress Mobile Pack Pro 에 대한 기술지원은 실제로 구입 및 설치해 보지 않아 평가를 유보합니다. 

WordPress Mobile Pack plugin : 워드프레스 프로그레시브 웹 앱 플러그인 Progressive Web App plugin

 

다. Super Progressive Web Apps

• 버전 :1.9
• 최종 업데이트 :1 month ago
• 운영중인 설치 :10,000+
• WordPress 버전 :3.6.0 이상
• 최대 테스트 :4.9.8
• PHP 버전 :5.3 이상

Super Progressive Web Apps를 사용하면 WordPress 웹 사이트를 Progressive Web App으로 즉시 변환 할 수 있습니다! SuperPWA가 설치되면 지원되는 모바일 장치에서 웹 사이트를 탐색하는 사용자는 화면 하단에서 “홈 화면에 추가”알림을보고 해당 장치의 홈 화면에 ‘웹 사이트를 설치할 수 있습니다. 방문한 모든 페이지는 기기에 로컬로 저장되며 오프라인 일 때도 읽을 수 있습니다. SuperPWA는 구성하기 쉽고 Progressive Web App을 설치하는 데 1 분도 채 걸리지 않습니다!

PWA 설치 전 요구 사항

1. 귀하의 WordPress 웹 사이트는 HTTPS 보안이되어 있어야합니다. 즉; 주소 표시 줄에 녹색 자물쇠 표시 (보안 연결에서 생성)
2. 웹 사이트가 반응형이어야합니다 (예 : 웹 사이트가 모바일, 태블릿 및 데스크톱에서 완벽하게 작동해야 함)

설치

이 플러그인을 설치하려면 다음과 같이하십시오. WordPress 관리 인터페이스를 통해 플러그인을 설치하거나 FTP를 사용하여 / wp-content / plugins /에 플러그인 폴더를 업로드하십시오. WordPress의 ‘플러그인’화면을 통해 플러그인을 활성화하십시오. WordPress Admin> SuperPWA로 이동하십시오.

설정

설정 페이지 내에서 플러그인을 사용하면 앱 이름(Application Name), 앱의 약식 이름(Application Short Name), 설명(Description), 초기 화면 아이콘(Splash Screen Icon), 시작 페이지(Start Page) 등에 대한 세부 정보를 편집 할 수 있으며 드롭 다운에서 오프라인 페이지(Offline Page)를 선택할 수도 있습니다. 디자인 탭에서 시작 화면의 배경색상(Background Color), 테마의 배경색상(Theme Color)을 선택할 수 있습니다. PWA가 휴대 전화에 설치되면 아이콘 및 스플래시 화면에 192px * 192px 및 512 * 512px 크기의 로고를 업로드 할 수도 있습니다.

• 응용 프로그램 이름(앱 이름, Application Name) : 홈 화면에 추가 화면이 나타날 때 언급 할 응용 프로그램의 이름입니다 .
• 앱의 약식 이름(Application Short Name)
• 설명(Description)
• 앱의 아이콘(Application Icon) : 이것은 휴대 전화에 설치될 앱의 아이콘입니다. PNG정확히 192x192크기 의 이미지 여야합니다 .
• 앱의 시작화면 아이콘(Splash Screen Icon) : 이 아이콘은 지원되는 기기에서 앱의 시작 화면에 표시됩니다. PNG정확히 512x512크기 의 로고 이미지 여야합니다 .  Android 앱은 시작 시, 특히 앱이 기기에서 처음으로 실행될 때 다소 시간이 걸릴 수 있습니다. 시작 화면(Splash screen)은 사용자에게 시작 진행률을 표시하거나 브랜드를 보여주기 위해 표시할 수 있습니다.
• 화면의 배경색상(Background Color)
• 테마의 배경색상(Theme Color)
• 시작 페이지(Start Page) : 사용자가 PWA를 열 때로드되는 페이지. url을 입력하는 것이 아니고 페이지중 하나를 선택하는 방식입니다.
• 오프라인 페이지(Offline Page) : 장치가 오프라인 상태이고 페이지가 이전에 캐시되지 않은 경우로드되는 페이지
• Orientation : 기기에서 앱의 방향을 설정합니다. Follow Device Orientation앱을 설정 하면 기기가 회전하면서 회전합니다.

Status 는 결과를 표시해주는 화면입니다. 맨아래줄에 Progressive Web Apps require that your website is served over HTTPS. Please contact your host to add a SSL certificate to your domain.(프로그레시브 웹 앱을 사용하려면 웹 사이트가 HTTPS를 통해 제공되어야합니다. 도메인에 SSL 인증서를 추가하려면 호스트에 문의하십시오.) 와 같은 경고 메시지가 보입니다. 위에서 언급한 PWA 설치 전 요구 사항중 하나입니다.

 

웹호스팅에 보안서버 SSL 인증서 적용하기(http를 httpss 로 전환하기)는 아래의 저희의 다른 게시글을 참조하세요.

https://www.aiforu.kr/really-simple-ssl/

다. WP-AppKit – Mobile apps and PWA for WordPress

5 Best Progressive Web App Plugins For WordPress 에서 추천하는 PWA 플러그인인데 2019-04-13 기준 아직 알아보지 못했습니다.

WP-AppKit – Mobile apps and PWA for WordPress

라. PWA

5 Best Progressive Web App Plugins For WordPress 에서 추천하는 PWA 플러그인인데 2019-04-13 기준 아직 알아보지 못했습니다.

PWA

마. WPtouch

이 플러그인 모바일 친화적인 웹페이지(모바일웹)를 만드는 플러그인으로 PWA를 지원하는 플러그인은 아닙니다.( 안드로이드, 아이폰, 블랙베리 등의 스마트 폰에서 워드프레스 블로그를 아이폰 어플리케이션-스타일 테마로 변경할 수 있고, 댓글이나 트랙백 알림 기능이 있으나 푸시 알람 기능은 없을 것입니다. ) 그러나 10년이상, 20만명 이상이 다운로드한 인기 플러그인이라고 소개합니다. WPtouch는 유료이지만 사용하기에 무리없는무료도 배포하고 있어서 사용자 층이 가장 두텁습니다. 개발사는 www.bravenewcode.com. 심플한 디자인과 직관적인 UI로 국내에서도 인기가 높습니다. 설치는 wp-content/plugins 에 업로드하면 됩니다.(출처 : 워드프레스 모바일 페이지 추천 플러그인 )

• 버전 :4.3.28
• 최종 업데이트 :1 개월 전
• 운영중인 설치 :200,000+
• WordPress 버전 :4.2 이상
• 최대 테스트 :4.9.8

BraveNewCode Inc. 에서 개발하였고  WordPress 의 플러그인을 통해서 사용할 수 있는 무료버전과 개발자의 웹사이트(www.bravenewcode.com)에서 받을 수 있는 유료버전( Wptouch Pro )으로 나뉘고 유료버전은 관리자툴 등의 추가 기능 지원을 지원합니다. WebKit 기반 브라우저 지원하고 터치스크린 환경의 모바일 디바이스를 위한 인터페이스를 지원합니다.(예:아이폰, 안드로이드, 블랙베리 등), WebKit 기반이 아닌 브라우저에서는 지원하지 않습니다. WordPress Mobile Pack(이하:WMP) 과 같이 사용하여, Wptouch는 터치스크린에 대한 UI을 WMP는 그 이외의 UI를 제공하도록 사용가능합니다. ( 출처 : 워드프레스를 이용한 모바일웹 개발 )

설치

WordPress Mobile Pack (기타 플러그인들)과 동일한 방법으로 설치합니다.

세팅방법

세팅방법은 아래의 게시글을 참조하세요.

워드프레스 스마트폰으로 즐기자

PWA 와 woocommerce

제가 pwa에 관심을 가졌던 중요한 이유중 하나는 woocommerce plugin과 연동하여 온라인쇼핑몰용(전자상거래용) PWA를 구축하는 것이었습니다. 일단은 아래의 유료 도구를 이용하면 온라인쇼핑몰용(전자상거래용) PWA 구축은 가능한 것으로 판단됩니다. 가격은 [보안서버 SSL 인증서구축 비용(38,500 원, 저렴한 카페24기준) + PWACOMMERCE – PRO $99(111,672원 = 1,128 원 * 99) ]= 합 150,172 원이 필요합니다. 추가로 연구해볼 것은 아래의 3개 정도이고 완료되면 게시글에 업데이트하겠습니다.

1. 아래의 “PWA 와 woocommerce”관련 플러그인들은 woocommerce만 되는 것이고 메뉴, 게시글(post)와 페이지와 같은 기존 CMS은 같이 구현을 못하거나 따로 PWA를 구현해야하는지와 2. WordPress Mobile Pack plugin 은 PWAcommerce.com 와 같은 회사에서 만든 제품인데 PWAcommerce.com 의 이하 유료 버전들과 게시글(post)와 통합할 수 있는지 확인해야합니다. (게시글(post)는 SEO에서 가장 중요한 부분(King)이니까요)
2. 마지막으로 buddypress와는 통합할 수 있는 방법은 없는지 연구해보는 것입니다. (activity is queen이니까요!)

가. PWACommerce – WooCommerce Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps By PWAcommerce.com

• Version:0.5
• Last updated:2 months ago
• Active installations:60+(활성사용자수가 작은 것이 마음에 걸립니다.)
• WordPress Version:4.8 or higher
• Tested up to:4.9.8
• PHP Version:5.4 or higher

가와 나는 제작사가 PWAcommerce.com 로 같고 무료와 유료의 차입니다.

나. PWACOMMERCE – PRO EDITION

전자 상거래 진보적 인 웹 응용 프로그램

PRO 버전은 무료버전에 오프라인 모드, 웹 푸시 알림, 유지 보수 및 실무 지원 여러 앱 테마에 대한 액세스 기능이 추가됩니다. 주문은 https://pwacommerce.com/downloads/progressive-web-app-for-woocommerce-pro/ 에서 할 수 있는데 $99입니다.  3 Domain Licenses,  Unlimited Web Push Notifications, 12 Months Priority Support & Product Updates 을 제공합니다. 코드캐니언의 envatomarket 에서 판매하는 $26 짜리 상품( WooCommerce Progressive Web App Starter Kit ) 은 도메인이 1개만되고  support 기간이 6개월로 짧은 것 같습니다.(6 months support from appticles )

• 제품 및 카테고리 탐색
• 미니멀리스트 제품 섹션
• 유연한 쇼핑 카트
• 손쉬운 체크 아웃 프로세스

WooCommerce PWA의 알파 버전에서는 Lighthouse 에서 91 점을 기록했습니다 . WooCommerce PWA는 ReactJS로 제작되었으며 GitHub에서 무료로 사용할 수 있습니다.

스마트폰에서 확인하시려면 click하세요. http://bit.ly/pwacommerce

다. WooCommerce Progressive Web App Starter Kit

가격은 $26 이고 상품 카테고리를 기준으로 보여줍니다. 검색기능과 장바구니창이 있습니다. 

•  Included:Quality checked by Envato

•  Included:Future updates

•  Included:6 months support from appticles What does support include?
• live demo : http://preview.codecanyon.net/item/woocommerce-progressive-web-app-starter-kit/full_screen_preview/21057762?_ga=2.148930358.105918764.1539599835-1397397521.1539599835

PWACommerce는 WooCommerce 상점을 프로그레시브 모바일 웹 응용 프로그램으로 변환하는 데 도움이되는 모바일 플러그인입니다. PWACommerce는 iOS 및 Android 스마트 폰 및 태블릿에서 지원됩니다. 호환되는 브라우저 : Safari, Google 크롬, Android – 기본 브라우저. WordPress 4.8 이상에서 테스트되었습니다. PWACommerce에서 수행 할 수있는 작업은 다음과 같습니다. 프로그레시브 웹 앱. 점진적 웹 앱의 주요 기능은 다음과 같습니다.

• 앱은 사용자가 어떤 종류의 네트워크 연결을하든 관계없이 거의 즉시로드되고 신뢰할 수 있습니다.
• 웹 앱 설치 배너는 모바일 앱을 홈 화면에 빠르고 원활하게 추가 할 수있는 기능을 제공하므로 쉽게 실행하고 앱으로 돌아갈 수 있습니다.
• 부드러운 애니메이션, 스크롤링 및 탐색 기능으로 부드러운 실감을 유지합니다.

라. coding 으로 구현하기

아래의 게시글에는 coding 을 통해 구현하는 방법이 있는데 저같은 초심자는 pass하고 프로그래머분들은 도전해 보세요.

Want to Build Progressive Web Apps Based on WordPress and WooCommerce? Here’s How (w/ Code Examples)

PWA 유효성 검토하기

아래의 게시글로 정리하였습니다. 

PWA(프로그레시브 웹 앱, Progressive Web Apps) 유효성(매니페스트(manifest), 서비스워커(service worker) ) 검사방법

---

참고자료 : 1. [IT열쇳말] 프로그레시브 웹 앱스(PWA)

2. 여러분의 첫 Progressive Web App

3.  프로그레시브 웹앱(Progressive Web Apps)이란?

4. 구글의 ‘프로그레시브 웹 앱스’를 아십니까?

5. 웹 프로젝트는 PWA이어야 한다

6. 프로그레시브 웹 앱 : 어떻게 WordPress 환경을 바꿀지

7. How to Setup Progressive Web Apps on Your WordPress Website

8.  카페24 웹호스팅 보안서버 SSL 인증서 443 포트 사용

9. LETSENCRYPT 에서 SSL 인증서를 무료로 발급 받아 웹 서버에 적용하기

10. 간단하게 무료로 HTTPS를 사용하시려면 CloudFlare를 추천드립니다. 심지어 아무 설정도 없이… Flexible SSL

11. 워드프레스 모바일 페이지 추천 플러그인

12. 워드프레스를 이용한 모바일웹 개발

13. 칼럼 | MS와 구글이 ‘프로그레시브 웹 앱’에 올인하는 이유

14. 카페24, 차세대 웹기술 적용한 ‘스마트웹앱’ 서비스