모바일 웹의 다가오는 물결에 대해 들어 보셨을 것입니다. 여러분이 들어 본 가장 일반적인 것은 모바일 웹 액세스가 빠르게 증가하고 있으며 현재 전체 웹 트래픽의 약 절반이 전화 나 태블릿을 통해 발생한다는 것입니다. ㅏ 퓨 리서치 센터에서 2 월 2018 보고서 모든 미국인의 95 %는 휴대 전화를 소유하고 있으며, 스마트 폰을 보유한 미국인의 비율은 77 %입니다.
모바일의 영향을보기 위해 멀리 볼 필요가 없습니다. 자신과 가족의 행동을 살펴보십시오. 2016 년 XNUMX 월 comScore는 17 세 이상의 미국인 평균이 하루에 51 시간 XNUMX 분을 휴대 전화로 보냈다고보고했습니다. (Englais).
Statcounter.com 글로벌 웹 트래픽은 주로 1 년 이상 (2 월 51,95의 2018 %) 모바일 장치에서 발생합니다.
모바일 사용자가 휴대폰에 저장할 수있는 네이티브 앱을 개발할 여력이 없다고 생각할 수 있지만 모든 비즈니스에서 사용할 수있는 훌륭한 대안이 있습니다. 프로그레시브 웹 애플리케이션입니다. 프로그레시브 웹 애플리케이션 (PWA)과 사람들이이를 사용하여 비즈니스를 성장시키는 방법에 대해 들어 보셨을 것입니다. 이 기사에서는 PWA에 대해 조금 더 배우고 2018 년에 PWA의 사용에 대해 더 많이 생각해야하는 이유를 알아 봅니다.
일부 정의
PWA (Progressive Web Applications)는 모바일 장치에서 웹 사이트 성능을 개선하기 위해 원래 Google에서 개발 한 웹 표준 모음입니다. 결과적으로 웹 사이트는 Apple의 App Store 또는 Google Play에서 찾을 수있는 전용 모바일 앱처럼 작동합니다.
또 다른 정의 인도 호텔 체인 Treebo의 개발자: “PWA는 보다 몰입감 있는 기본 경험을 제공하는 기능으로 점진적으로 향상되는 단일 페이지 애플리케이션입니다. »
이를 조금 줄여서 모바일 장치의 PWA를 사용하면 독자와 고객이 사이트의 홈페이지를 빠르게로드하고 기본 앱에서 사용하는 것과 동일한 기능을 모바일 장치에서 사용할 수 있습니다. 장치가 인터넷에 연결되어 있지 않더라도 브라우저 외부에 사이트가 존재할 수 있습니다.
다른 정의
PWA의 핵심 기술 부분은 다음과 같습니다.
근로자 서비스 PWA와 관련된 핵심 기술입니다. 이를 통해 PWA가 네트워크 외부에서 작동 할 수 있습니다.
매니페스트 파일 기기의 앱을 앱에 연결하는 아이콘과 이름을 포함 사이트 웹. 개발자는 여기에 디자인 요소를 추가하여 고객 경험을 향상시킬 수도 있습니다.
푸시 알림 귀하의 사용자와 (허락하에) 의사 소통을하고, 다시 돌아옵니다.
몇 가지 이유
그렇다면 사이트에 PWA가 포함되어야하는 이유는 무엇입니까? 매우 간단합니다.
더 나은 성능-심지어 데스크탑에서도!
당신은 승리할 수 있는 시간이 제한되어 있다는 것을 알고 있습니다. 방문객 처음으로 – 잠재 고객이 떠나서 검색 결과의 다음 사이트를 방문하기 전 3초의 로드 시간입니다. 모바일 사용자는 훨씬 더 참을성이 없습니다. 사이트를 로드하는 데 XNUMX초 이상 걸리면 잠재 사용자의 절반이 떠날 것입니다!
좋은 소식 : 점진적인 웹 응용 프로그램을 만들기 위해 변경하면 사이트 속도가 빨라집니다!
예 : 인도 호텔 회사 인 Treebo는 PWA를 생성하여 모바일 충전 시간을 1,5 초에서 XNUMX 초로 줄였습니다. 이제 사이트가 데스크톱에 잠시로드됩니다! 그들의 기술 팀은 사이트의 검색 순위가 향상되었고 월별 전환율이 두 배 이상 증가했다고보고했습니다!
오프라인 용량
PWA는 인터넷에있을 필요가 없습니다. 사용자는 장치 또는 데스크톱에서 앱의 모든 콘텐츠에 액세스 할 수 있습니다.
사실, PWA의 가장 좋은 점 중 하나는 고객이 사이트를 장치의 홈 페이지에 저장하고 나중에 제품을 구매하거나 더 많은 정보를 얻는 데 사용할 수 있다는 것입니다. .
파 exemple, CNET Tech Today 사이트의 일용 인 기술 관련 뉴스의 일별 요약을 제공합니다. Android 기기에서 Chrome으로 사이트를 열고 화면 하단으로 스크롤하면 다음과 같은 내용이 표시됩니다.
언론 홈 화면에 추가 Tech Today 프로그레시브 웹 앱을 장치에 다운로드하려면 아이콘을 탭하여 현재 상위 10 개 뉴스를로드합니다. 각 이야기를 읽으려면 왼쪽으로 살짝 밉니다. CNET 로고를 탭하여 브라우저에서 CNET 홈 페이지를 엽니 다.
레마르크 : Firefox에서 PWA가있는 사이트는 주소 표시 줄에 직접 "홈 페이지에 추가"아이콘 (작은 상자에 더하기 기호)이 있습니다. PWA가 이미 설치되어있는 경우 주소 표시 줄의 Android 로고가 PWA로 이동합니다.
사이트에 필요하지 않은 한 가지 : "앱 다운로드"위젯은 페이지의 공간을 차지합니다 (일반적으로 사용자의주의를 분산시키는 iTunes 및 Android 로고와 함께). Chrome에서 사용자가 일주일에 여러 번 PWA 사이트를 열었 음을 감지하면 PWA를 추가하라는 메시지가 표시됩니다. 업데이트도 자동입니다.
복잡한 프로그래밍 언어 필요 없음
비즈니스를 위한 기본 모바일 앱을 구축하는 것을 고려했지만 모바일 앱을 구축하는 것은 사이트 웹. 웹 디자인/개발 에이전시와 협력하여 사이트를 유지 관리하는 경우 주류 모바일 공급업체를 위한 앱을 구축할 수 있는 기술이 반드시 필요한 것은 아닙니다.
소프트웨어가 Apple App Store에 표시 되려면 개발자가 Apple Developer Network에 등록하고 Apple Developer Tool (Mac에서만 작동)을 사용해야하며 다음 언어를 알아야합니다. Apple 승인 프로그래밍 : Swift 또는 Objective C.
Android 프로그래밍은 조금 더 쉽지만 (개발자의 승인이 필요하지 않음) 대부분의 Android 앱은 Java로 작성되어 학습하기 어려운 언어 일 수 있습니다.
앱이 Apple 또는 Android 온라인 스토어에 표시 되려면 완성 된 앱이 해당 스토어의 관리자로부터 승인을 받아야합니다.
반대로 점진적 웹 앱은 HTML, CSS (Cascading Style Sheets) 및 JavaScript와 같은 널리 사용되는 웹 언어로 빌드됩니다. 요컨대, 초보자 웹 개발자도 고품질 PWA를 구축 할 수 있습니다.
특히 WordPress 사이트에 PWA를 수행하기 위해 많은 컴퓨터 교육이 필요하지 않습니다. 하위 테마를 사용하여 사이트의 서식을 이미 변경 한 경우 PWA 파일을 만들 수도 있습니다. 다른 기사에서 코딩 문제를 다룰 것입니다.
기술 거인의 지원 증가
표준이 표준이 되려면 오랜 시간이 걸립니다. Google은 2015 년에 처음으로 PWA를 홍보했습니다.
오랫동안 Chrome은 PWA를 지원하는 유일한 브라우저 였지만 곧 바뀔 것입니다. 최근 몇 달 동안 :
- Mozilla는 Firefox 58에서 PWA 지원을 추가했습니다
- 애플은 최근 iOS에서 웹 애플리케이션 지원을 발표했다
- Microsoft는 올해 말 (10)에 제공 될 다음 버전의 Windows 2018에서 PWA를 지원합니다.
마이크로 소프트는 다른 운영 체제 공급 업체를 넘어 "고품질"PWA가 모바일 및 데스크톱의 Windows 10 앱 스토어에 곧 통합 될 것이라고 말했습니다.
WordPress 및 PWAs
WordPress는 아직 기본 앱에서 점진적 웹 앱 빌드를 완전히 지원하지 않습니다. Jetpack 팀은 내년에 PWA 기능을 추가하기 위해 최선을 다하고 있습니다. 이것은 WordPress의 Javascript-ification에 의해 도움이됩니다.
Jetpack은 "PWA 기능이 준비되는대로 점진적으로 도입합니다"라고 개발자는 말합니다. Dan Walmsley, WordPress VIP 블로그 기사 . 개발자는 버전 5.6.0부터 Jetpack의 매니페스트 모듈을 사용하여 매니페스트 파일을 추가 할 수 있으며, 점진적 이미지로드를 도입하여 이미지가 많은 경우에도 사이트로드 속도를 높일 수 있습니다. 그 페이지. 올해 더 많은 기능이 제공 될 예정입니다.
일부 플러그인은 PWA 기능을 추가하려고하지만 많이 채택되지 않았습니다.
- WordPress 최적화 도구는 작동 및 매니페스트 도구를 제공합니다.
- Super Progressive Web Apps는 다른 기능 중에서도 홈 화면에 매니페스트와 추가 버튼을 생성합니다.
- 워드 프레스 모바일 팩은 또한 PWA 기능을 추가합니다
어떻게 PWA를 사용할 건가요?
이 튜토리얼에서는 프로그레시브 웹 앱(Progressive Web Apps)에 대해 조금 배웠고 왜 프로그레시브 웹 앱을 추가해야 하는지 배웠습니다. 사이트 웹 귀하의 회사:
- 모바일 장치 트래픽의 증가하는 물결
- 웹 사이트 성능 향상-모바일 및 데스크톱
- 장치가 오프라인 일 때도 가용성
- HTML, CSS 및 Javascript와 같은 표준 웹 기능을 사용합니다. 구축 비용이 저렴
- 브라우저 및 운영 체제에 대한 지원 증가
이제 WordPress에서 PWA를 수행하는 방법을 알고 싶습니까? 아니면 개발자에게 어떻게하는지 보여줄까요? 이것은 다른 튜토리얼의 주제가 될 것입니다.
