프로그레시브 웹 어플리케이션

Progressive web application
PWA 로고

프로그레시브 웹 어플리케이션(PWA)은 일반적으로 프로그레시브 웹 어플리케이션으로 알려져 있으며 HTML, CSS, JavaScript, Web Assembly 등의 일반적인 웹 테크놀로지를 사용하여 웹을 통해 전달되는 어플리케이션소프트웨어의 일종입니다.표준 준거 브라우저를 사용하는 모든 플랫폼(데스크탑 및 모바일 디바이스 포함)에서 동작하도록 설계되어 있습니다.

프로그레시브 웹 앱은 웹 애플리케이션으로 알려진 웹 페이지 또는 웹 사이트의 한 종류이기 때문에 별도의 번들 또는 배포가 필요하지 않습니다.개발자는 단순히 웹 애플리케이션을 온라인으로 게시하고 기본 "설치 가능성 요건"을 충족하는지 확인할 수 있으며 사용자는 홈 화면에 애플리케이션을 추가할 수 있습니다.Apple App Store나 Google Play와 같은 디지털 배포 시스템에 앱을 게시하는 것은 [1]선택 사항입니다.

2021년 현재 PWA 기능은 Google Chrome, Apple Safari, Android용 Firefox 및 Microsoft[2][3] Edge에서 다양한 수준으로 지원되지만 [4]데스크톱용 Firefox에서는 지원되지 않습니다.

브라우저 지원

브라우저 지지하다 댓글
창문들 리눅스 MacOS 안드로이드 iOS
크롬계 네. 네. 네. 네. — Google Chrome, Microsoft Edge,[5] Brave, Opera, Vivaldi [6]등이 포함됩니다.
파이어폭스 아니요[4]. 아니요[4]. 아니요[4]. 부분적 아니요.
사파리 — — 네. — 네.
(iOS 11.3+)[7]

역사

전임자

2007년 아이폰 출시 당시 스티브 잡스는 웹 앱(AJAX 아키텍처를 사용하여 HTML5로 개발)이 아이폰 앱의 표준 포맷이 될 것이라고 발표했다.소프트웨어 개발 키트(SDK)가 필요 없으며, Safari 브라우저 [8]엔진을 통해 앱이 장치에 완전히 통합됩니다.이 모델은 나중에 탈옥자를 방지하고 실망한 [9]개발자들을 달래기 위한 수단으로 앱스토어로 전환되었다.2007년 10월, Jobs는 다음 해에 [8]SDK를 개시한다고 발표했습니다.그 결과, 애플은 웹 앱을 계속 지원했지만, iOS 애플리케이션의 대부분은 앱 스토어로 옮겨갔다.

2010년대 초반부터 동적 웹 페이지를 통해 웹 기술을 사용하여 대화형 웹 애플리케이션을 만들 수 있게 되었습니다.응답성이 뛰어난 웹 디자인과 화면 크기의 유연성을 통해 PWA 개발에 보다 쉽게 접근할 수 있게 되었습니다.HTML, CSS 및 JavaScript가 지속적으로 개선됨에 따라 웹 응용 프로그램은 보다 높은 수준의 인터랙티브를 통합하여 웹 사이트에서 [10]네이티브와 같은 경험을 할 수 있게 되었습니다.

2013년, Mozilla는 Firefox OS를 출시했습니다.모바일 기기에서 웹 앱을 네이티브 앱으로 실행할 수 있는 오픈 소스 운영 체제입니다.파이어폭스 OS는 Gaia라는 이름의 사용자 인터페이스를 HTML5로 기술한 Gako 렌더링 엔진을 기반으로 2016년에 [11]파이어폭스 OS의 개발이 종료되었으며,[12] 2017년에 파이어폭스 OS의 포크가 피처폰 [13]플랫폼인 KaiOS의 기반으로 사용되었지만 이 프로젝트는 완전히 중단되었다.

첫 번째 소개

2015년 디자이너 Frances Berriman과 Google Chrome 엔지니어 Alex Russell은 사용자가 웹 앱을 네이티브 운영체제(OS)에서 진보적인 웹 애플리케이션으로 업그레이드할 수 있는 서비스 직원과 웹 앱 매니페스토를 포함한 최신 브라우저에서 지원되는 새로운 기능을 활용하는 앱을 설명하기 위해 "진보적인 웹 앱"[14]이라는 용어를 만들었습니다.구글은 안드로이드용 [15][16]PWA 개발을 촉진하기 위해 상당한 노력을 기울였다.파이어폭스는 2016년에 서비스 워커를 위한 지원을 도입했고, 마이크로소프트 [17][15]엣지와 애플 사파리는 2018년에 이어 모든 주요 시스템에서 서비스 워커를 사용할 수 있게 되었습니다.

2019년까지 PWA는 Microsoft Edge[5](Windows)와 Google[18] Chrome(Windows, MacOS, Chrome OS 및 Linux)를 포함한 대부분의 브라우저의 데스크톱 버전에서 지원되었습니다.

2020년 12월 데스크톱용 Firefox는 PWA의 구현을 포기했습니다(특히 실험적인 기능으로 사용 가능했던 프로토타입 "사이트별 브라우저" 구성을 제거했습니다).파이어폭스의 한 건축가는 다음과 같이 말했습니다.「당사가 전달하고 싶은 신호는, 데스크탑 파이어폭스에의 PWA 지원이 가까운 [4]시일내에 실현되지 않는 것입니다.」Mozilla는 [19]여전히 Android에서 PWA를 지원할 계획입니다.

앱스토어

프로그레시브 웹 앱은 웹 애플리케이션으로 알려진 웹 페이지 또는 웹 사이트의 한 종류이기 때문에 별도의 번들 또는 배포가 필요하지 않습니다.특히 개발자나 사용자가 애플 앱스토어, 구글 플레이, 마이크로소프트 스토어, 삼성 갤럭시 스토어 등 디지털 유통 시스템을 통해 웹 앱을 설치할 필요가 없다.주요 앱스토어에서는 [1]PWA의 공개를 지원하고 있습니다.구글 플레이, 마이크로소프트 스토어,[20] 삼성 갤럭시 스토어는 PWA를 지원하지만 애플 앱스토어는 지원하지 않는다.Microsoft Store는 일부 적격 [21]PWA를 Bing 인덱싱을 통해 검색한 후 자동으로 게시합니다(앱 작성자의 요청 없이도).

특성.

프로그레시브 웹 앱은 모두 적절한 웹 표준을 준수하는 모든 브라우저에서 작동하도록 설계되었습니다.다른 크로스 플랫폼 솔루션과 마찬가지로 개발자가 네이티브 [15]앱보다 크로스 플랫폼 앱을 쉽게 구축할 수 있도록 지원하는 것이 목표입니다.프로그레시브 웹 앱은 프로그레시브 확장 웹 개발 전략을 채택하고 있습니다.

일부 진보적인 웹 앱은 App Shell [22]Model이라는 아키텍처 접근 방식을 사용합니다.이 모델에서는 서비스 워커는 브라우저의 오프라인 캐시에 응답성 웹 디자인 애플리케이션의 기본 사용자 인터페이스 또는 "쉘"을 저장합니다.이 모델을 통해 PWA는 웹 접속 유무에 관계없이 네이티브와 같은 사용을 유지할 수 있습니다.이를 통해 콘텐츠를 [23]동적으로 점진적으로 로드할 수 있는 초기 정적 프레임, 레이아웃 또는 아키텍처를 제공함으로써 로드 시간을 단축할 수 있습니다.

설치 가능성 기준

진보적인 웹 앱으로 간주되고 브라우저에 의해 "설치 가능"하게 되는 사이트의 기술적 기준 기준은 Russell에 의해 후속[24] 투고에서 설명되었고 이후 업데이트되었다.[25][26]

  • 시큐어한 발신기지로부터 발신됩니다.TLS를 통해 제공되며 활성 혼합 콘텐츠가 없습니다.사용자의 프라이버시, 보안 및 콘텐츠의 신뢰성을 확보하기 위해 프로그레시브 웹 앱은 HTTPS를 통해 제공되어야 합니다.
  • 서비스 워커를 가져오기 핸들러에 등록합니다.프로그레시브 웹 앱은 서비스 워커를 사용하여 프로그램 가능한 콘텐츠 캐시를 생성해야 합니다.처음 사용 후 콘텐츠를 캐시한 다음 다양한 휴리스틱에 의존하여 콘텐츠가 더 이상 필요하지 않은 경우를 추측하는 일반 HTTP 웹 캐시와 달리, 프로그래밍 가능한 캐시는 콘텐츠를 처음 사용하기 전에 미리 명시적으로 프리페치하고 더 [27]이상 필요하지 않은 경우에는 콘텐츠를 명시적으로 폐기할 수 있습니다.이 요건에 의해, 오프라인 또는 저품질 네트워크상에서 페이지에 액세스 할 수 있게 됩니다.
  • 웹 앱 매니페스트를 참조합니다.매니페스트에는 적어도 다음 5가지 주요 속성이 포함되어 있어야 합니다.name또는short_name,start_url,그리고.display(값:standalone,fullscreen또는minimal-ui, 및icons(192px 및 512px 버전).매니페스트에 포함된 정보는 URL을 통해 쉽게 PWA를 공유할 수 있게 하고 검색 엔진에서 검색할 수 있게 하며 복잡한 설치 절차를 완화합니다(단, PWA는 여전히 서드파티 [28]앱스토어에 나열할 수 있습니다).또한, PWA는 홈 화면에 추가, 스플래시 스크린 표시 등을 포함한 네이티브 앱 스타일의 인터랙션과 내비게이션을 지원합니다.

네이티브 앱과의 비교

2017년 Twitter는 공식 네이티브 Android 및 iOS 앱의 PWA 대안인 Twitter Lite를 출시했습니다.Twitter에 따르면 Twitter Lite는 네이티브 앱 크기의 1~3%에 불과했다.2019년 7월부터 Twitter는 기본적으로 모든 웹사이트 사용자를 Twitter Lite에 [29]제공하기 시작했습니다.2020년 6월 1일, Twitter는 레거시 웹사이트 레이아웃을 비활성화하여 진보적인 웹 앱 버전을 유일한 옵션으로 [30]남겨두었습니다.

스타벅스는 동등한 iOS 앱보다 99.84% 작은 PWA를 제공한다.PWA를 도입한 후 스타벅스는 온라인 주문 수를 두 배로 늘렸고 데스크톱 사용자는 모바일 앱 [31]사용자와 거의 같은 속도로 주문했다.

일부 기업은 PWA 구현 후 페이지, 전환 또는 [citation needed]수익에 소요되는 시간 증가 등 다양한 주요 성과 지표가 크게 개선되었음을 강조합니다.

테크놀로지

진보적인 웹 앱을 만드는 데 일반적으로 사용되는 많은 기술이 있습니다.웹 응용 프로그램이 "설치 가능성 기준"을 충족하면 PWA로 간주되므로 오프라인으로 작동할 수 있으며 장치 홈 화면에 추가할 수 있습니다.이 정의를 충족시키려면 모든 PWA에 최소한 서비스 워커와 [32][33][34]매니페스트가 필요합니다.

매니페스트

웹 앱[35] 매니페스트란 개발자에게 다음과 같은 웹 애플리케이션과 관련된 메타데이터를 저장할 수 있는 중앙 집중화된 장소를 제공하기 위해 JSON 기반 매니페스트(일반적으로 manifest.json [28]레이블)를 정의하는 W3C 사양입니다.

  • 웹 응용 프로그램 이름
  • 웹 앱 아이콘 또는 이미지 개체에 대한 링크
  • 웹 앱을 시작하거나 열 때 선호하는 URL
  • 웹 앱 구성 데이터
  • 웹 앱의 기본 방향
  • 디스플레이 모드 설정 옵션(예: 전체 화면)

이 메타데이터는 앱을 홈 화면에 추가하거나 네이티브 앱과 함께 나열하는 데 매우 중요합니다.

iOS 지원

iOS Safari는 매니페스트를 부분적으로 구현하지만 대부분의 PWA 메타데이터는 메타 태그에 대한 Apple 고유 확장을 통해 정의할 수 있습니다.개발자는 이러한 태그를 사용하여 전체 화면 표시를 활성화하고 아이콘과 시작 화면을 정의하며 [36][37]응용 프로그램의 이름을 지정할 수 있습니다.

웹 어셈블리

주요 기사:웹 어셈블리

Web Assembly를 사용하면 미리 컴파일된 코드를 웹 브라우저에서 거의 네이티브 [38]속도로 실행할 수 있습니다.따라서 C와 같은 언어로 작성된 라이브러리를 웹 앱에 추가할 수 있습니다.JavaScript에서 Web Assembly로 데이터를 전달하는 비용 때문에 단기적으로는 애플리케이션 [dubious – discuss][citation needed]전체가 아닌 주로 숫자 크런치(음성 인식 및 컴퓨터 비전 등)를 사용하게 됩니다.

데이터 스토리지

프로그레시브 웹 앱 실행 컨텍스트는 가능한 한 언로드되므로 프로그레시브 웹 앱은 대부분의 장기 내부 상태(사용자 데이터, 동적으로 로드된 애플리케이션 리소스)를 다음 중 하나의 방법으로 저장해야 합니다.

웹 스토리지

주요 기사:웹 스토리지

Web Storage는 W3C 표준 API로 최신 브라우저에서 키 밸류 스토리지를 가능하게 합니다.API는 sessionStorage(브라우저 세션 종료 시 삭제되는 세션 전용 스토리지를 활성화함)와 localStorage(세션 [39]간에 지속되는 스토리지를 활성화함)의 두 가지 개체로 구성됩니다.

인덱스 데이터베이스 API

주요 기사:인덱스 데이터베이스 API

Indexed Database API는 모든 주요 브라우저에서 사용할 수 있는 W3C 표준 데이터베이스 API입니다.API는 최신 브라우저에서 지원되며 [40]문자열로 표현되는 JSON 객체 및 모든 구조를 저장할 수 있습니다.인덱스 데이터베이스 API는 래퍼 라이브러리와 함께 사용할 수 있으며, 이 라이브러리 주변의 추가 구성을 제공합니다.

서비스 워커

서비스 워커는 메인 문서의 웹/HTTP 요청에 응답할 수 있는 프로그램 가능한 네트워크 프록시를 구현하는 웹 워커입니다.원격 서버의 가용성을 확인하고 서버가 사용 가능할 때 내용을 캐시하고 나중에 해당 내용을 문서에 제공할 수 있습니다.서비스 워커는 다른 웹 워커와 마찬가지로 메인 문서 컨텍스트와 별도로 작업합니다.서비스 워커는 푸시 알림 처리 및 백그라운드에서 데이터 동기화, 리소스 요청 캐시 또는 검색, 네트워크 요청 대행 수신 및 중앙 집중식 업데이트 수신을 문서가 로드되지 [41]않은 경우에도 수행할 수 있습니다.

서비스 워커는, 등록, 인스톨, 액티베이션의 3 단계의 라이프 사이클을 거칩니다.등록에는 설치 준비를 위해 브라우저에 서비스 워커의 위치를 알려주는 작업이 포함됩니다.웹 앱용 브라우저에 서비스 워커가 설치되어 있지 않거나 서비스 워커가 업데이트되었을 때 설치가 수행됩니다.PWA의 모든 페이지가 닫힐 때 활성화되므로 이전 버전과 업데이트된 버전이 충돌하지 않습니다.또,[41] 1개의 도메인에 대해서 액티브하게 할 수 있는 서비스 워커는 1명뿐이기 때문에, 서비스 워커의 버전을 전환할 때에도, 라이프 사이클에 의해서 일관성이 유지됩니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ a b "Progressive Web Apps Software AG". techradar.softwareag.com. Retrieved 2020-09-25.
  2. ^ "Can I use pwa?". CanIUse. Retrieved 27 January 2021.{{cite web}}: CS1 maint :url-status (링크)
  3. ^ "Is Service Worker Ready?". Jake Archibald.
  4. ^ a b c d e Newman, Jared (2021-01-26). "Firefox just walked away from a key piece of the open web". Fast Company. Retrieved 2021-01-27.
  5. ^ a b "Progressive Web Apps on Windows overview". Microsoft Edge Documentation. 13 March 2021. Retrieved 13 March 2021.
  6. ^ "Get your PWA on". Vivaldi Browser. 2021-10-07. Retrieved 2021-10-11.{{cite web}}: CS1 maint :url-status (링크)
  7. ^ Firtman, Maximiliano (2020-08-18). "Progressive Web Apps on iOS are here 🚀". Medium. Retrieved 2021-01-29.
  8. ^ a b Ritchie, Rene (5 March 2018). "App Store Year Zero: Unsweet web apps drove iPhone to an SDK". iMore. Retrieved 23 May 2019.
  9. ^ "Jobs' original vision for the iPhone: No third-party native apps". 9to5Mac. 21 October 2011. Retrieved 22 May 2019.
  10. ^ Marcotte, Ethan. "Responsive Web Design". A List Apart. Retrieved May 25, 2010.
  11. ^ "Mozilla ends commercial Firefox OS development - gHacks Tech News". gHacks Technology News. 2016-09-27. Retrieved 2022-05-05.
  12. ^ Hoffman, Chris; PCWorld (2016-09-28). "Mozilla is stopping all commercial development on Firefox OS". PCWorld. Retrieved 2021-03-17.
  13. ^ "KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps". TechCrunch. Retrieved 2021-03-17.
  14. ^ Russell, Alex. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul". Retrieved June 15, 2015.
  15. ^ a b c Evans, Jonny (26 January 2018). "Apple goes back to the future with web apps". Computerworld. Retrieved 23 May 2019.
  16. ^ Ladage, Aaron (17 April 2018). "Progressive Web Apps Are Here and They're Changing Everything". DEG. Retrieved 23 May 2019.
  17. ^ "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2021-05-16.
  18. ^ LePage, Pete (4 June 2019). "Progressive Web Apps on Desktop". Google Developers. Retrieved 13 September 2019.
  19. ^ agi90 (19 December 2020). "Comment". Reddit. We have no plans of sunsetting PWAs on mobile that I know of.{{cite web}}: CS1 maint :url-status (링크)
  20. ^ MSEdgeTeam. "Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development". docs.microsoft.com. Retrieved 2021-05-16.
  21. ^ "The first batch of Windows 10 Progressive Web Apps is here". Windows Central. 2018-04-07. Retrieved 2021-05-16.
  22. ^ "The App Shell Model".
  23. ^ Osmani, Addi. "The App Shell Model Web Fundamentals". Google Developers. Retrieved 23 May 2019.
  24. ^ Russell, Alex. "What, Exactly, Makes a Progressive Web App". Retrieved October 18, 2016.
  25. ^ "What does it take to be installable?". web.dev. Retrieved 2021-05-19.
  26. ^ Google Developers. "Progressive Web App". Retrieved June 15, 2015. {{cite web}}: last1=범용명(도움말)이 있습니다.
  27. ^ "Service worker caching and HTTP caching". web.dev. Retrieved 2021-05-19.
  28. ^ a b W3C "Web App Manifest", 작업 초안, 2016년 9월 12일 취득
  29. ^ "Twitter Starts Rolling Out Updated Website With New Design". MacRumors.
  30. ^ "Twitter warns of legacy site theme shutting down on June 1". BleepingComputer.
  31. ^ "12 Best Examples of Progressive Web Apps (PWAs) in 2021". SimiCart. 2021-02-22. Retrieved 2021-05-16.{{cite web}}: CS1 maint :url-status (링크)
  32. ^ "Discoverable". Mozilla Developer Network. Retrieved 2017-04-24.
  33. ^ "Network independent". Mozilla Developer Network. Retrieved 2017-04-24.
  34. ^ "Instant Loading Web Apps with an Application Shell Architecture". Google Developers. Retrieved 2017-04-24.
  35. ^ "Web Manifest Docs on MDN". MDN Web Docs.
  36. ^ "What's new on iOS 12.2 for Progressive Web Apps". Medium. 27 March 2019.
  37. ^ "Configuring Web Applications". Safari Web Content Guide.
  38. ^ "WebAssembly Concepts". MDN. Retrieved 14 August 2018.
  39. ^ "Web Storage API". MDN. Retrieved 14 August 2018.
  40. ^ "Concepts behind IndexedDB". MDN. Retrieved 14 August 2018.
  41. ^ a b "Introduction to Service Worker Web". Google Developers. 1 May 2019. Retrieved 23 May 2019.

외부 링크