프로그레시브 웹 앱이란 무엇이며 어떻게 설치합니까?

프로그레시브 웹 앱이란 무엇이며 어떻게 설치합니까?

앱이 휴대전화를 지배합니다. 오랫동안 앱은 데스크톱이나 브라우저에 같은 방식으로 영향을 미치지 않았습니다. 최근 몇 년 동안 바뀌었습니다. 프로그레시브 웹 앱(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에는 다음과 같은 몇 가지 잘 알려진 제한 사항이 있습니다. 목록 떨어져 설명합니다.



그러나 개발자의 주요 문제는 AppCache가 작동하는 방식과의 직접적인 상호 작용이 부족하여 개발자가 문제가 발생할 때 정확하게 수정하지 못하게 한다는 것입니다. 결과적으로 완전한 오프라인 기능을 갖춘 웹사이트와 서비스는 위험한 선택이었습니다.

그러나 서비스 근로자는 조치가 필요한 동안만 지속됩니다. PWA에서 무언가를 클릭하거나 기능을 사용하면 서비스 워커가 작동합니다. 서비스 작업자(스크립트임을 기억하십시오)는 이벤트를 처리하여 오프라인 캐시가 요청을 완료할 수 있는지 여부를 결정합니다. 아이디어는 PWA가 선택할 수 있는 여러 오프라인 캐시가 있어 훨씬 더 넓은 범위의 오프라인 기능을 제공한다는 것입니다.

또한 캐시는 오프라인 속도 향상만을 위한 것이 아닙니다. 예를 들어 PWA로 이동하지만 연결이 매우 고르지 못합니다. 서비스 워커는 경험을 방해하지 않고 완벽하게 작동하는 이전 캐시를 제공합니다.

프로그레시브 웹 앱 브라우저 지원

프로그레시브 웹 앱을 사용하기 위한 두 가지 요구 사항은 호환 가능한 브라우저와 PWA 지원 서비스입니다.

먼저 브라우저를 살펴보겠습니다. PWA 브라우저 지원을 확인하는 두 가지 옵션이 있습니다. 첫 번째는 Jake Archibald의 서비스 워커가 준비되어 있습니까? ? 주요 브라우저와 삼성 인터넷의 PWA 준비 상태를 쉽게 표시합니다.

PWA 브라우저 지원에 대한 자세한 개요는 다음을 확인하십시오. 사용해도 되나요 , 다양한 웹 및 브라우저 기술의 구현을 브라우저 버전별로 나열하는 전문 웹사이트입니다. 예를 들어, 검색창에 '서비스 워커'를 입력하면 각 브라우저에서 PWA 서비스 워커를 구현한 버전 번호가 표시된 테이블을 찾을 수 있습니다.

서비스 작업자를 사용할 수 있습니까 표는 주요 브라우저가 모두 PWA를 지원함을 확인합니다. 또한 여러 대체 데스크탑 브라우저 및 모바일 브라우저에 대한 PWA 지원을 보여줍니다.

조금 더 분해하면 다음과 같습니다.

  • 데스크탑 브라우저(전체 지원): 크롬, 파이어폭스, 오페라, 엣지, 사파리
  • 데스크탑 브라우저(부분 지원/오래된 버전): QQ 브라우저, 바이두 브라우저
  • 모바일 브라우저(전체 지원): 크롬, 파이어폭스, 사파리, UC 브라우저, 삼성 인터넷, 민트 브라우저, 위챗
  • 모바일 브라우저(부분 지원/오래된 버전): QQ 브라우저, 안드로이드 브라우저, 오페라 모바일

따라서 주요 브라우저는 모두 PWA를 지원합니다. Microsoft Edge 및 Safari는 전체 지원 목록에 가장 최근에 추가되었습니다. 반대로 QQ Browser와 Baidu Browser는 이제 오래된 버전을 사용하므로 두 번째 계층으로 떨어졌습니다.

프로그레시브 웹 앱을 찾고 설치하는 방법

이제 사용할 브라우저를 알았으므로 PWA 검색 및 설치에 대해 생각할 수 있습니다. 이 예에서는 Google Chrome과 함께 Samsung Galaxy S8을 사용합니다.

프로그레시브 웹 앱은 어디에나 있습니다. 많은 회사에서 Progressive Web App 버전을 제공하기 위해 사이트와 서비스를 조정했습니다. 대부분의 경우 홈페이지나 모바일 서비스 사이트로 이동할 때 PWA를 처음 접하게 됩니다. 홈 화면에 추가 대화 상자.

방문했을 때 어떤 일이 일어나는지 아래 비디오를 확인하십시오. 트위터 모바일 사이트 .

물론 수많은 사이트를 방문하고 홈 화면 트리거를 보기를 바라는 것은 유용하지 않습니다. 사실 시간이 많이 걸리는 작업입니다. 고맙게도 PWA 카탈로그 전용 사이트가 몇 개 있으므로 그렇게 할 필요가 없습니다.

첫 시도 아웃웹 . 새로운 옵션이 자주 나타나는 꽤 괜찮은 범위의 PWA를 나열합니다. 다음으로 pwa.rocks를 시도하십시오. 선택 항목은 적지만 장치에 추가하고 싶은 편리한 PWA가 있습니다.

또한 2019년 1월 Android용 Chrome 72에는 TWA(신뢰할 수 있는 웹 활동)가 함께 제공되었습니다. TWA를 사용하면 Chrome 탭을 독립 실행형 모드로 열 수 있습니다. 결과적으로 PWA는 Google Play 앱 스토어에서 기능할 수 있습니다. Google Play에 처음 등장한 몇 개의 PWA는 다음과 같습니다. 트위터 라이트 , 인스타그램 라이트, 구글 맵스 고 , 시간이 지남에 따라 더 많이 표시될 예정입니다.

이미지 갤러리 (2 이미지) 확장하다 확장하다 닫다

프로그레시브 웹 앱이 네이티브 앱을 대체할 것인가?

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는 아직 주류가 아닙니다. 그러나 기기 공간 절약과 같은 다양한 이점을 제공하므로 앞으로 더 많은 정보를 듣게 될 것입니다.

공유하다 공유하다 트위터 이메일 음성 애니메이션에 대한 초보자 가이드

연설에 애니메이션을 적용하는 것은 어려울 수 있습니다. 프로젝트에 대화를 추가할 준비가 되었으면 프로세스를 분석해 드리겠습니다.

다음 읽기 관련 항목 저자 소개 개빈 필립스(945건의 기사 게재)

Gavin은 Windows 및 Technology Explained의 주니어 편집자이며, really Useful Podcast의 정기 기고자이자 정기 제품 검토자입니다. 그는 Devon의 언덕에서 약탈한 디지털 아트 프랙티스로 학사(우등) 현대 작문과 10년 이상의 전문 작문 경험을 보유하고 있습니다. 그는 많은 양의 차, 보드 게임, 축구를 즐깁니다.

개빈 필립스가 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.