데스크탑 프로그레시브 웹 앱: 주요 혁신

게시 됨: 2019-09-10

목차

PWA(프로그레시브 웹 앱)에 대해 이야기할 때 항상 그래왔기 때문에 모바일 애플리케이션이 가장 먼저 떠오릅니다.

 추천 자료: 프로그레시브 웹 앱이란

그러나 시간이 변화함에 따라 PWA 이니셔티브가 있는 Chrome과 같은 주요 브라우저가 이제 데스크톱 시장에 침입하여 PWA의 무한해 보이는 잠재력을 더욱 확대하고 있습니다.

Chrome 70부터 사용자는 이제 Windows 및 Linux에 Desktop Progressive Web Apps를 설치할 수 있습니다. 일단 설치되면 시작 메뉴에서 시작되고 주소 표시줄이나 탭 없이 설치된 다른 모든 앱처럼 실행됩니다.

인스타그램에서 이 게시물 보기

기본 애플리케이션과 거의 구별할 수 없는 PWA(프로그레시브 웹 앱)는 앱과 유사한 기능을 갖춘 웹의 미래입니다. 그 중 하나는 설치(홈 화면에 PWA 추가) 기능으로 웹 경험에 혁명을 일으킬 수 있습니다. ? 지금 SimiCart로 PWA를 구축하십시오. . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsummit #chromedevsummit2019

SimiCart(@simicart.official)가 공유한 게시물

그리고 그것 에서 멈추지 않습니다 . 하이브리드 PWA Microsoft Store의 기반이 단계별로 배치되고 있습니다. Microsoft Store에서 Progressive Web Apps는 이제 기본 Windows 응용 프로그램과 동등하므로 거의 7억에 달하는 전체 Windows 10 설치 기반으로 범위를 확장합니다. 활성 월간 사용자.

데스크탑 PWA의 이해와 이것이 중요한 이유

Progressive Web Apps 의 모든 특전을 보유하고 있는 Desktop Progressive Web App 은 꾸준히 데스크탑 앱 개발 트렌드가 되고 있습니다.

 추천 자료: 영감을 주는 12가지 프로그레시브 웹 앱 예제

Desktop PWA에 대한 간략한 이해를 위해 Desktop PWA는 웹 구성 요소를 활용하여 작동하는 온라인 문서 또는 Google 문서 와 같다고 상상할 수 있습니다. 반면에 기본 데스크톱 응용 프로그램은 Microsoft Word 와 비슷합니다. 성능이 좋고 약간의 크기가 있으며 원활하게 작동하도록 설계되었습니다. Desktop PWA가 현재 인기 있는 이유는 Desktop PWA가 훨씬 더 매력적인 경험으로 기본 데스크톱 응용 프로그램의 작업을 거의 수행할 수 있고 하드 디스크 공간을 거의 또는 전혀 차지하지 않기 때문입니다.

요약하면 데스크톱 PWA는 다음과 같습니다.

  • 빠름 – PWA는 즉각적이고 반응이 빠르며 전반적으로 즐거운 경험을 제공합니다.
  • 설치 가능 – PWA는 다른 기본 앱처럼 설치할 수 있으며 브라우저가 필요 없이 데스크탑이나 홈 화면에 표시됩니다. PWA의 설치는 항상 즉각적이고 패키지 크기가 작습니다.
  • 참여 - PWA는 고품질 UX 및 UI를 위한 최상의 지침을 채택하는 동시에 네트워크 상태 또는 장치 기능에 관계없이 작동할 수 있습니다.

Desktop PWA의 가장 눈에 띄는 예는 Twitter Lite 입니다. 모바일 사용자를 염두에 두고 만들어졌음에도 불구하고 Twitter는 데스크톱 사용자 상호 작용에서 눈에 띄는 성장을 경험했습니다.

세션당 페이지 수 65% 증가

보낸 트윗 75% 증가

이탈률 20% 감소

PWA 운동의 초기 단계를 표시하는 첫 번째 장면은 확실히 트위터에 의해 발사되었습니다. 그 뒤를 이어 스포티파이(Spotify)와 핀터레스트(Pinterest)와 같은 영향력 있는 브랜드가 서두르며 뛰어난 제품 품질을 자랑합니다.

데스크탑 Spotify 및 Pinterest PWA

놓친 경우 Spotify PWA에 대한 철저한 검토가 있습니다. 나머지 부분보다 돋보이는 Spotify PWA는 사용자 경험을 대폭 변경한 개선 사항과 함께 제공되어 음악 플레이어가 되어야 하는 것처럼 사용자의 요구에 더 맞춤화되고 적응할 수 있습니다.

Spotify PWA의 적응형 배경색

Pinterest 역시 핵심 비즈니스 지표에서 몇 가지 긍정적인 개선을 경험했습니다.

소요 시간은 이전 모바일 웹 경험에 비해 40% 증가, 사용자 생성 광고 수익은 44% 증가 , 핵심 참여는 60% 증가

그들의 새로운 모바일 웹 경험은 이전 웹사이트의 단일체로 한 단계 업그레이드되었습니다.

그들은 자바스크립트에서 수백 KB를 분해하고 줄여 코어 번들의 크기를 650KB에서 150KB로 줄였을 뿐만 아니라 핵심 성능 지표도 개선했습니다. 첫 번째 의미 있는 페인트는 4.2초에서 1.8초로, 대화형 시간은 23초에서 5.6초로 감소했습니다.

Pinterest PWA의 특정 사례 연구에 관심이 있는 독자에게는 Pinterest Progressive Web App Performance Case Study 문서를 적극 권장합니다.

Pinterest PWA 통계
출처: PWAstats

데스크탑에 프로그레시브 웹 앱을 설치하는 방법

Desktop Progressive Web App 설치 프로세스는 매우 간단하고 능률적입니다. 가장 중요한 단계는 앱의 올바른 PWA 주소를 찾는 것입니다.

오늘 튜토리얼에서는 Twitter 를 Desktop PWA의 예로 사용할 것입니다.

1단계 : Chrome 버전 70 이상을 사용하여 https://mobile.twitter.com/home으로 이동합니다.

2단계 : 주소창 우측 끝에 (+) 버튼이 있는지 확인

Twitter PWA 설치 앱 팝업

또는 드롭다운 메뉴에 " 트위터 설치 " 옵션이 있는 경우

트위터 PWA 설치 옵션

3단계 : 설치 를 클릭하면 프로세스가 즉시 완료됩니다.

4단계 : 데스크탑에서 새로 설치된 PWA를 시작 합니다.

데스크탑 트위터 아이콘
데스크탑 트위터 아이콘

데스크탑에서 프로그레시브 웹 앱을 제거하는 방법

관심이 없는 사용자의 경우 데스크톱 PWA 아이콘을 삭제하는 것이 PWA를 제거하는 한 가지 허용되는 방법입니다. 그러나 보다 확실한 PWA 제거 방법을 찾고 있는 사용자에게는 다음 단계를 권장합니다.

1단계 : 데스크톱 PWA를 엽니다(이 경우 Twitter ).

2단계 : 드롭다운 메뉴에서 " 트위터 제거 ..."를 선택합니다.

Twitter PWA 제거 옵션

3단계 : 제안된 옵션을 선택하거나 선택 취소한 다음 마지막으로 " 제거 "를 클릭합니다.

Twitter PWA 제거 팝업

그리고 그게 다야! Twitter PWA는 이제 몇 가지 간단한 단계만 거치면 컴퓨터에서 제거가 완료됩니다.

끝 맺는 말

Desktop PWA는 웹 앱 상호 작용 및 기능의 다음 혁명적 단계입니다. 경쟁에서 앞서기 위해 기업 지금 PWA 운동을 수용하고 웹/앱 개발의 변화하는 추세에 주의를 기울여야 합니다.

완벽한 Magento Progressive Web App 솔루션을 찾고 있는 온라인 판매자를 위해 여기 SimiCart에서 귀하와 귀하의 상점을 위한 완전한 패키지를 제공합니다.

SIMICART로 PWA 구축