자바스크립트 학습에 관심이 있으십니까? jshandbook.com에서 내 eBook 받기
프로그레시브 웹 앱(PWA)은 모바일 애플리케이션 개발의 최신 트렌드입니다. 웹 기술을 사용합니다. 작성 시점(2018년 초)에는 Android 기기에만 적용됩니다. .
PWA는 곧 iOS 11.3 및 macOS 10.13.4로 제공됩니다.
Safari 및 Mobile Safari의 기반 기술인 WebKit은 최근(2017년 8월) 브라우저에 서비스 워커를 도입하는 작업을 시작했다고 선언했습니다. 이는 곧 iOS 기기에도 탑재될 것임을 의미합니다. 따라서 Apple이 이 접근 방식을 권장하기로 결정한다면 Progressive Web Apps 개념은 iPhone 및 iPad에 적용될 수 있습니다.
획기적인 신기술이 아니라 웹 기반 앱에 대한 더 나은 경험을 만드는 것을 목표로 하는 일련의 기술을 식별하는 새로운 용어입니다.
프로그레시브 웹 앱이란 무엇입니까
프로그레시브 웹 앱은 기기가 지원하는 것을 기반으로 추가 기능을 제공할 수 있는 앱입니다. , 오프라인 기능, 푸시 알림, 거의 기본 앱 모양과 속도, 리소스의 로컬 캐싱을 제공합니다.
이 기술은 원래 2015년에 Google에서 도입했으며 개발자와 사용자 모두에게 많은 이점을 제공하는 것으로 입증되었습니다.
개발자는 거의 최고 수준을 구축할 수 있습니다. 웹 스택을 사용하는 애플리케이션. 이는 특히 크로스 플랫폼 앱을 구축하고 유지 관리하는 의미를 고려할 때 기본 애플리케이션을 구축하는 것보다 훨씬 쉽고 저렴합니다.
개발자는 설치 마찰 감소의 이점을 누릴 수 있습니다. , 그리고 스토어에 앱을 설치해도 99,99%의 앱에 대한 검색 가능성 측면에서 실제로 아무 것도 가져오지 않을 때 Google 검색은 그 이상은 아니더라도 동일한 이점을 제공할 수 있습니다.
프로그레시브 웹 앱은 일반 모바일에 최적화된 웹사이트보다 모바일 경험을 훨씬 더 즐겁게 만드는 특정 기술로 개발된 웹사이트입니다. 다음 기능을 제공하므로 기본 앱에서 작업하는 것과 거의 같습니다.
- 오프라인 지원
- 빠른 로드
- 안전함
- 푸시 알림을 보낼 수 있음
- URL 표시줄 없이 몰입감 넘치는 전체 화면 사용자 환경 제공
모바일 플랫폼(작성 당시의 Android이지만 기술적으로 이에 국한되지 않음)은 Progressive Web Apps에 대한 지원을 증가시킵니다. 사용자에게 홈 화면에 앱을 추가하도록 요청하기도 합니다. 해당 사용자가 그러한 사이트를 방문할 때.
그러나 먼저 이름에 대한 약간의 설명입니다. 프로그레시브 웹 앱 혼란스러운 용어가 될 수 있습니다. , 그리고 좋은 정의는 다음과 같습니다. 최신 브라우저 기능(예:웹 작업자 및 웹 앱 매니페스트)을 활용하여 모바일 장치에서 앱을 일류 시민 앱의 역할로 "업그레이드"하도록 하는 웹 앱입니다.
프로그레시브 웹 앱 대안
모바일 경험을 구축할 때 PWA는 다른 대안과 비교하여 어떤가요?
각각의 장단점에 중점을 두고 PWA가 어디에 적합한지 살펴보겠습니다.
네이티브 모바일 앱
네이티브 모바일 앱은 모바일 앱을 구축하는 가장 확실한 방법입니다. iOS의 Objective-C 또는 Swift, Android의 Java /Kotlin, Windows Phone의 C#
각 플랫폼에는 고유한 UI 및 UX 규칙이 있으며 기본 위젯은 사용자가 기대하는 경험을 제공합니다. 플랫폼 App Store를 통해 배포 및 배포할 수 있습니다.
기본 앱의 주요 문제점은 플랫폼 간 개발에 다양한 방법론과 모범 사례를 학습하고, 마스터하고, 최신 상태로 유지해야 한다는 것입니다. 예를 들어, 소규모 팀이 있거나 3개의 플랫폼에서 앱을 빌드하는 솔로 개발자라면 기술과 환경을 배우는 데 많은 시간을 할애해야 합니다. 또한 다양한 라이브러리를 관리하고 다양한 워크플로를 사용하는 데 많은 시간을 할애하게 됩니다(예:iCloud는 iOS 기기에서만 작동하며 Android 버전은 없음).
하이브리드 앱
하이브리드 애플리케이션은 웹 기술을 사용하여 구축되지만 App Store에 배포됩니다. 중간에는 애플리케이션을 패키징하는 프레임워크 또는 어떤 방법이 있어 검토를 위해 기존 App Store로 보낼 수 있습니다.
가장 일반적인 플랫폼 중 일부는 Phonegap 및 Ionic Framework이며, 일반적으로 페이지에 표시되는 것은 본질적으로 로컬 웹사이트를 로드하는 WebView입니다.
처음에는 Xamarin을 목록에 포함했지만 Carlos Eduardo Pérez는 Xamaring이 네이티브 코드를 생성한다고 정확하게 지적했습니다.
하이브리드 앱의 주요 측면은 한 번 작성하여 어디서나 실행하는 것입니다. 개념. 다른 플랫폼 코드는 빌드 시 생성되며 JavaScript, HTML 및 CSS를 사용하여 앱을 빌드하고 있습니다. 이는 놀라운 일입니다. 기기 기능(마이크, 카메라, 네트워크, GPS 등)은 JavaScript API를 통해 노출됩니다.
하이브리드 앱 구축의 나쁜 점은 훌륭한 일을 하지 않는 한 공통 분모를 제공하는 데 안주할 수도 있다는 것입니다. 이는 앱이 플랫폼별 인간-컴퓨터 상호 작용 지침을 무시하기 때문에 모든 플랫폼에서 차선책인 앱을 효과적으로 생성합니다.
또한 복잡한 보기의 경우 성능이 저하될 수 있습니다.
React Native로 빌드된 앱
React Native는 JavaScript API를 통해 모바일 장치의 기본 컨트롤을 노출하지만 WebView 내부에 웹사이트를 포함하지 않고 기본 애플리케이션을 효과적으로 생성합니다.
이 접근 방식을 하이브리드 앱과 구별하는 그들의 모토는 한번 배우고 어디에서나 작성하는 것입니다. 즉, 접근 방식은 플랫폼 간에 동일하지만 각 플랫폼에서 뛰어난 경험을 제공하기 위해 완전히 별도의 앱을 만들 것입니다.
성능은 기본 앱과 비슷합니다. 빌드하는 것이 기본적으로 App Store를 통해 배포되는 기본 앱이기 때문입니다.
프로그레시브 웹 앱 기능
마지막 섹션에서는 주요 경쟁업체를 보았습니다. 프로그레시브 웹 앱. 그렇다면 PWA와 PWA는 어떤 차이가 있으며 주요 기능은 무엇입니까?
기억하십시오. 현재 Progressive Web Apps는 Android 기기 전용입니다.
기능
프로그레시브 웹 앱에는 위의 접근 방식과 완전히 다른 한 가지가 있습니다. 앱 스토어에 배포되지 않습니다.
이것이 핵심 이점입니다. 앱 스토어는 당신의 앱이 입소문을 낼 수 있는 범위와 운이 좋다면 유익합니다. 그러나 상위 0.001%에 들지 않는 한 App Store에서 자신의 위치가 작은 것으로부터 많은 이점을 얻지 못할 것입니다.
프로그레시브 웹 앱은 검색 엔진을 사용하여 검색 가능 , 사용자가 PWA 기능이 있는 사이트를 방문하면 기기와 결합된 브라우저가 사용자에게 홈 화면에 앱을 설치할 것인지 묻습니다 . 일반 SEO가 PWA에 적용될 수 있으므로 유료 획득에 대한 의존도가 훨씬 줄어들기 때문에 이는 엄청난 것입니다.
App Store에 없다는 것은 Apple 또는 Google의 승인이 필요하지 않음을 의미합니다. 사용자 주머니에 있습니다. iOS 앱의 일반적인 표준 승인 절차를 거치지 않고 원할 때 업데이트를 릴리스할 수 있습니다.
PWA는 기본적으로 일부 주요 기능을 가능하게 하기 위해 최근에 도입된 일부 핵심 기술과 함께 스테로이드의 HTML5 애플리케이션/반응형 웹사이트입니다. 기억한다면 원래 iPhone에는 기본 앱을 개발할 수 있는 옵션이 없었습니다. 개발자는 홈 화면에 설치할 수 있는 HTML5 모바일 앱을 개발하라는 지시를 받았지만 당시 기술은 이에 대한 준비가 되어 있지 않았습니다.
프로그레시브 웹 앱 오프라인에서 실행 .
서비스 워커 사용 앱이 항상 백그라운드에서 다운로드할 수 있는 최신 콘텐츠를 보유하고 푸시 알림을 지원하도록 허용합니다. 더 큰 재참여 기회를 제공합니다.
또한 공유 가능성은 URL만 있으면 되기 때문에 앱을 공유하려는 사용자에게 훨씬 더 나은 경험을 제공합니다.
혜택
그렇다면 사용자와 개발자가 프로그레시브 웹 앱에 관심을 가져야 하는 이유는 무엇입니까?
- PWA는 더 가볍습니다. 네이티브 앱의 무게는 200MB 이상일 수 있지만 PWA는 KB 범위일 수 있습니다.
- 기본 플랫폼 코드가 없습니다
- 획득 비용이 저렴합니다(사용자가 앱을 설치하도록 설득하는 것이 웹사이트를 방문하여 처음 경험하는 것보다 훨씬 어렵습니다)
- 업데이트를 빌드하고 릴리스하는 데 필요한 노력이 크게 줄어듭니다.
- 일반 앱 스토어 앱보다 딥 링크를 훨씬 더 많이 지원합니다.
핵심 개념
- 반응성 :UI가 기기 화면 크기에 맞게 조정됩니다.
- 앱 같은 느낌 :웹사이트가 아니라 앱 같은 느낌(최대한)
- 오프라인 지원 :오프라인 환경을 제공하기 위해 기기 스토리지를 사용합니다.
- 설치 가능 :기기 브라우저에서 사용자에게 앱을 설치하라는 메시지를 표시합니다.
- 재참여 :푸시 알림은 사용자가 한 번 설치된 앱을 다시 찾을 수 있도록 도와줍니다.
- 검색 가능 :검색 엔진 및 SEO 최적화는 앱 스토어보다 더 많은 사용자를 제공할 수 있습니다.
- 신선함 :앱이 온라인 상태가 되면 앱 자체와 콘텐츠가 업데이트됩니다.
- 안전함 :HTTPS를 사용합니다.
- 프로그레시브 :기능이 더 적은 경우에도(예:웹사이트로서, 설치할 수 없음) 모든 기기, 심지어 오래된 기기에서도 작동합니다.
- 연결 가능 :URL을 사용하여 쉽게 가리킬 수 있습니다.
서비스 워커
Progressive Web App 정의의 일부는 오프라인에서 작동해야 한다는 것입니다.
웹 앱이 오프라인으로 작동하도록 허용하는 것은 서비스 워커이므로 서비스 워커는 프로그레시브 웹 앱의 필수 부분입니다. .
경고:서비스 워커는 현재 Chrome(데스크톱 및 Android), Firefox 및 Opera에서만 지원됩니다. 지원에 대한 업데이트된 데이터는 https://caniuse.com/#feat=serviceworkers를 참조하십시오.
팁:서비스 워커와 웹 워커를 혼동하지 마십시오. 그것들은 완전히 다른 것입니다.
서비스 워커는 웹 앱과 네트워크 사이에서 중개자 역할을 하는 JavaScript 파일입니다. 이 때문에 캐시 서비스를 제공하고 앱 렌더링 속도를 높이며 사용자 경험을 개선할 수 있습니다.
보안상의 이유로 HTTPS 사이트만 서비스 워커를 사용할 수 있으며 이것이 프로그레시브 웹 앱이 HTTPS를 통해 제공되어야 하는 이유 중 일부입니다.
서비스 워커는 사용자가 앱을 처음 방문할 때 기기에서 사용할 수 없습니다. 처음 방문할 때 서비스 워커가 설치되고 이후에 사이트의 별도 페이지를 방문할 때 이 서비스 워커가 호출됩니다.
서비스 워커에 대한 전체 가이드 확인
앱 매니페스트
앱 매니페스트는 프로그레시브 웹 앱에 대한 기기 정보를 제공하는 데 사용할 수 있는 JSON 파일입니다.
모든 에 매니페스트에 대한 링크를 추가합니다. 웹사이트의 각 페이지 헤더:
<link rel="manifest" href="/manifest.webmanifest">이 파일은 장치에 설정 방법을 알려줍니다.
- 앱의 이름 및 짧은 이름
- 다양한 크기의 아이콘 위치
- 도메인과 관련된 시작 URL
- 기본 방향
- 시작 화면
예시
{ "name": "The Weather App", "short_name": "Weather", "description": "Progressive Web App Example", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html?utm_source=app_manifest", "orientation": "portrait", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" }앱 매니페스트는 W3C 작업 초안이며 https://www.w3.org/TR/appmanifest/
에서 액세스할 수 있습니다.앱 셸
App Shell은 기술이 아니라 디자인 개념입니다. 웹 앱 컨테이너를 먼저 로드하고 렌더링하고 잠시 후 실제 콘텐츠를 로드하여 사용자에게 앱과 같은 멋진 인상을 주기 위한 것입니다.
예를 들어 사용자 인터페이스와 유사한 스플래시 화면을 사용하라는 Apple의 휴먼 인터페이스 가이드라인 제안을 살펴보세요. 이는 앱을 로드하는 데 시간이 오래 걸린다는 인식을 낮추는 것으로 밝혀진 심리적 힌트를 제공합니다.
캐싱
앱 셸은 콘텐츠와 별도로 캐시되며 캐시에서 셸 구성 요소를 검색하는 데 시간이 거의 걸리지 않도록 설정됩니다.
자바스크립트 학습에 관심이 있으십니까? jshandbook.com에서 내 eBook 받기