앱이 휴대전화를 지배합니다. 오랫동안 앱은 데스크톱이나 브라우저에 같은 방식으로 영향을 미치지 않았습니다. 최근 몇 년 동안 바뀌었습니다. 프로그레시브 웹 앱(PWA)의 위상이 높아지고 있으며 모든 방식의 웹사이트와의 상호 작용을 변화시키고 있습니다.
그러나 프로그레시브 웹 앱이란 정확히 무엇입니까? PWA는 웹사이트가 하지 않는 일을 무엇입니까? 다음은 Progressive Web Apps에 대해 알아야 할 사항입니다.
프로그레시브 웹 앱이란 무엇입니까?
프로그레시브 웹 앱은 사용자에게 일반 사이트를 제공하지만 기본 모바일 앱으로 표시되는 웹 응용 프로그램입니다. PWA는 기본 모바일 앱의 유용성을 최신 브라우저 기능 세트로 가져오고 두 개발 영역의 발전을 최대한 활용하려고 합니다.
그렇다면 PWA를 정의하는 것은 무엇입니까?
- 범용 :PWA는 브라우저에 관계없이 모든 사용자에게 원활하게(거의, 거의) 작동해야 합니다.
- 반응성 :PWA는 노트북, 태블릿, 스마트폰 등과 같은 모든 장치에서 작동해야 합니다.
- 디자인 :디자인은 고급 기능을 위한 간단한 상호 작용과 함께 능률적이고 찾기 쉬운 메뉴를 의미하는 기본 모바일 앱을 모방해야 합니다.
- 안전함 :PWA는 사용자 데이터를 안전하게 유지하기 위해 HTTPS를 사용해야 합니다.
- 검색 가능: 사용자는 PWA를 찾을 수 있으며 "사이트"가 아닌 응용 프로그램으로 쉽게 식별할 수 있습니다.
- 참여: PWA는 푸시 알림과 같은 기본 참여 기능에 액세스할 수 있어야 합니다.
- 업데이트: PWA는 최신 상태로 유지되어 최신 버전의 서비스 또는 사이트를 제공합니다.
- 설치: 사용자가 앱 스토어 없이도 홈 화면에 PWA를 쉽게 "설치"할 수 있습니다.
- 공유: PWA는 설치 없이 공유할 단일 URL만 필요합니다.
보시다시피 PWA는 기본 앱의 간소화된 기능과 인터페이스 디자인을 통해 사용자에게 완전한 웹사이트 경험을 제공하는 것을 목표로 합니다.
프로그레시브 웹 앱은 어떻게 작동합니까?
Progressive Web Apps의 핵심은 브라우저 서비스 작업자입니다.
서비스 워커는 "웹 페이지와 별도로" 브라우저의 백그라운드에서 실행되는 스크립트로, 웹 페이지나 사용자 상호 작용이 필요하지 않은 기능에 대한 문을 엽니다. 현재 푸시 알림 및 백그라운드 동기화와 같은 서비스 워커를 사용할 수 있지만 즉각적인 PWA 미래는 이러한 스크립트에 더 강력한 기능을 제공합니다.
이와 같이 서비스 작업자는 거의 즉각적인 결과를 위해 웹 캐시를 사용하여 PWA 표준의 기초를 형성합니다.
서비스 워커 이전에는 이동 브라우저 캐시 스크립트가 애플리케이션 캐시(또는 앱 캐시)였습니다. App Cache는 광범위한 오프라인 우선 서비스에서 기능하지만 다소 오류가 발생하기 쉽습니다. 또한 A List Apart가 설명하는 것처럼 App Cache에는 몇 가지 잘 알려진 제한 사항이 있습니다.
그러나 개발자의 주요 문제는 AppCache가 작동하는 방식과의 직접적인 상호 작용이 부족하여 개발자가 문제가 발생할 때 정확하게 수정하지 못하게 한다는 것입니다. 결과적으로 완전한 오프라인 기능을 갖춘 웹사이트와 서비스는 위험한 선택이었습니다.
그러나 서비스 근로자는 조치가 필요한 동안만 지속됩니다. PWA에서 무언가를 클릭하거나 기능을 사용하면 서비스 워커가 작동합니다. 서비스 작업자(스크립트임을 기억하십시오)는 이벤트를 처리하여 오프라인 캐시가 요청을 완료할 수 있는지 여부를 결정합니다. 아이디어는 PWA가 선택할 수 있는 여러 오프라인 캐시가 있어 훨씬 더 광범위한 오프라인 기능을 제공한다는 것입니다.
또한 캐시는 오프라인 속도 향상만을 위한 것이 아닙니다. 예를 들어, PWA로 이동하지만 연결이 매우 고르지 않습니다. 서비스 워커는 사용자 경험을 방해하지 않고 완벽하게 작동하는 이전 캐시를 제공합니다.
프로그레시브 웹 앱 브라우저 지원
프로그레시브 웹 앱을 사용하기 위한 두 가지 요구 사항은 호환 가능한 브라우저와 PWA 지원 서비스입니다.
먼저 브라우저를 살펴보겠습니다. PWA 브라우저 지원을 확인하는 두 가지 옵션이 있습니다. 첫 번째는 Jake Archibald의 Is Service Worker Ready?입니다. 주요 브라우저와 삼성 인터넷의 PWA 지원 상태를 쉽게 표시합니다.
PWA 브라우저 지원에 대한 자세한 개요는 브라우저 버전별로 다양한 웹 및 브라우저 기술 구현을 나열하는 전문 웹사이트인 Can I Use를 확인해야 합니다. 예를 들어, 검색창에 "서비스 워커"를 입력하면 각 브라우저가 PWA 서비스 워커를 구현한 버전 번호를 표시하는 테이블을 찾을 수 있습니다.
서비스 작업자를 사용할 수 있습니까 표는 주요 브라우저가 모두 PWA를 지원함을 확인합니다. 또한 여러 대체 데스크톱 브라우저 및 모바일 브라우저에 대한 PWA 지원을 보여줍니다.
조금 더 세분화:
- 데스크톱 브라우저(전체 지원): 크롬, 파이어폭스, 오페라, 엣지, 사파리
- 데스크톱 브라우저(부분 지원/오래된 버전): QQ 브라우저, 바이두 브라우저
- 모바일 브라우저(전체 지원): 크롬, 파이어폭스, 사파리, UC 브라우저, 삼성 인터넷, 민트 브라우저, 위챗
- 모바일 브라우저(부분 지원/오래된 버전): QQ 브라우저, Android 브라우저, Opera 모바일
따라서 주요 브라우저는 모두 PWA를 지원합니다. Microsoft Edge 및 Safari는 전체 지원 목록에 가장 최근에 추가되었습니다. 반대로, QQ Browser와 Baidu Browser는 이제 오래된 버전을 사용하므로 두 번째 계층으로 떨어졌습니다.
프로그레시브 웹 앱을 찾고 설치하는 방법
사용할 브라우저를 알았으니 이제 PWA 검색 및 설치에 대해 생각할 수 있습니다. 이 예에서는 Google Chrome과 함께 Samsung Galaxy S8을 사용하겠습니다.
프로그레시브 웹 앱은 어디에나 있습니다. 많은 회사에서 Progressive Web App 버전을 제공하기 위해 사이트와 서비스를 조정했습니다. 대부분의 경우 홈페이지나 모바일 서비스 사이트로 이동할 때 PWA를 처음 접하게 되며, 이는 홈 화면에 추가를 트리거합니다. 대화 상자.
Twitter 모바일 사이트를 방문하면 어떤 일이 일어나는지 아래 동영상을 확인하세요.
물론, 수많은 사이트를 방문하고 홈 화면 트리거를 보기를 바라는 것은 유용하지 않습니다. 사실 시간이 많이 걸리는 작업입니다. 고맙게도 PWA 카탈로그 전용 사이트가 몇 개 있으므로 그렇게 할 필요가 없습니다.
먼저 아웃웹을 사용해보세요. 새로운 옵션이 자주 나타나는 꽤 괜찮은 범위의 PWA를 나열합니다. 다음으로 pwa.rocks를 시도하십시오. 선택 항목이 더 적지만 기기에 추가하고 싶은 편리한 PWA가 있습니다.
또한 2019년 1월 Android용 Chrome 72에는 TWA(신뢰할 수 있는 웹 활동)가 함께 제공되었습니다. TWA를 사용하면 Chrome 탭을 독립 실행형 모드로 열 수 있습니다. 결과적으로 PWA는 Google Play 앱 스토어에서 기능할 수 있습니다. Google Play에 처음 등장한 몇 개의 PWA는 Twitter Lite, Instagram Lite 및 Google Maps Go였으며 시간이 지남에 따라 더 많이 표시될 예정입니다.
프로그레시브 웹 앱이 네이티브 앱을 대체합니까?
Progressive Web Apps는 브라우저와 기본 모바일 앱 간의 훌륭한 하이브리드 단계입니다. PWA가 기본 앱을 완전히 대체합니까? 그것은 나에게서 어려운 아니오입니다. PWA는 경량 제품으로서 훌륭하지만 현재 주로 기존 사이트 및 서비스 복제에 중점을 두고 있기 때문에 기본 앱을 대체하지는 않습니다.
적어도 당분간은 아닙니다.
그래도 PWA는 작동합니다. PWA 통계에서 사용할 수 있는 데이터도 이를 뒷받침합니다. 다음은 PWA가 일반적으로 사용되는 웹사이트와의 상호 작용을 어떻게 변화시키고 있는지 보여주는 몇 가지 흥미로운 수치입니다.
- Trivago는 PWA를 홈 화면에 추가하는 사용자의 참여도가 150% 증가한 것을 확인했습니다.
- Forbes의 PWA "홈페이지는 단 0.8초 만에 완전히 로드"되는 반면 방문당 노출수는 10% 증가했습니다. Forbes의 PWA에서도 사용자 세션 길이가 두 배가 되었습니다.
- Twitter Lite는 세션당 페이지 수가 65%, 트윗이 75%나 증가했습니다. 또한 "3G를 통해 5초 이내에" 대화식입니다.
- Alibaba는 모바일 전환이 76% 증가했습니다.
PWA는 아직 주류가 아닙니다. 그러나 기기의 공간 절약과 같은 다양한 이점을 제공하므로 앞으로 더 많은 정보를 듣게 될 것입니다.