Twitter PWA: 알아야 할 사항

상위 기업과 하위 기업 간의 기술 격차는 그 어느 때보다 가깝습니다. 프로그레시브 웹 앱의 가장 큰 기여 중 하나는 재정 능력이 크게 감소했다는 것입니다. 서비스 작업자를 반드시 언급해야 하는 웹 앱 기술의 새롭고 고급 사용을 적용함으로써 모든 규모의 회사는 자체 기능적 요구와 예산에 맞게 PWA를 조정할 수 있습니다. 세계의 위대한 PWA 채택에서 영감을 찾고 있다면 Twitter PWA 의 아래 사례 연구를 놓칠 수 없습니다.

PWA 통합 전 트위터 이야기

2017년 4월, 모바일 브라우저에서 사이트를 새롭게 개선한 Twitter Lite가 Google과의 협업을 통해 출시되었습니다. 이름은 더 가볍고, 더 빠르고, 더 유용하게 제작되었다는 사실에서 따왔습니다.

현재까지 트위터는 미국에서 3번째로 인기 있는 소셜 미디어 사이트이며 전 세계적으로 15번째로 인기 있는 소셜 미디어 사이트입니다. 대부분의 사용자 인구 통계가 미국에 있지만 일본과 인도는 트위터 사용자를 합치면 미국 사용자 수를 능가하는 가장 큰 두 트위터 사용자입니다.

Twitter Lite의 역사는 2010년에서 2017년으로 거슬러 올라가야 하며 Twitter는 세계 최고의 소셜 미디어 사이트가 되었습니다.

트위터는 초창기 최대 경쟁자인 페이스북에 비해 출발이 험난했습니다. 그러나 2010년부터 블루버드는 분기별로 일관된 성장을 보이며 차트에서 놀라운 광경을 목격했습니다. 2015년, 2016년, 2017년 사이에 성장률이 둔화되었습니다.

트위터는 미국 밖에서의 가능성을 인식하고 빠르게 국제 시장에 손을 뻗었습니다.

Google이 PWA를 도입하자마자 Twitter는 PWA가 어떻게 확장되고 새로운 사용자를 확보할 수 있는지 알게 되었습니다. Twitter Lite는 네트워크 연결이 불안정한 신흥 국가를 위한 최종 답변이었습니다. 새로운 Twitter PWA는 최적화된 데이터 절약 모드로 실행하는 동안 1MB 미만의 저장 공간을 차지합니다. 사용자가 클릭할 때까지 이미지와 비디오가 흐릿한 미리보기로 표시됩니다.

Twitter Lite용 Google의 엔지니어링 책임자인 Nicolas Gallagher는 다음과 같이 말했습니다. "Twitter Lite는 이제 Twitter를 사용하는 가장 빠르고 저렴하며 가장 안정적인 방법입니다." Twitter Lite의 성공은 PWA에 관한 많은 기사의 헤드라인을 장식했습니다.

세계 최대 PWA 솔루션 – Twitter PWA

PWA 개발에 대한 실제 지식을 지원하기 위해 Twitter PWA 또는 Twitter Lite의 프레임워크에 대한 중요 사항과 주문형 요청에 맞춤화된 혁신적인 방법이 아래에 제공됩니다.

Twitter Lite의 전체 목표는 열악한 인터넷 연결에 관계없이 사용자가 우수한 현장 경험을 갖도록 하여 후속 방문을 유도하고 방문자를 단골 사용자로 전환시키는 것입니다. PWA의 속도, 안정성 및 보안을 강화하는 기능 덕분에 mobile.twitter.com에서 PWA를 경험할 수 있습니다.

건축 아이디어

Twitter Lite의 핵심은 단순하고 적당한 크기의 Node.js 서버이자 클라이언트 측 JavaScript 앱입니다. PWA는 데이터 캐싱 및 저장을 위한 API 빌드를 가능하게 합니다. 서버는 먼저 인증 프로세스를 처리하고 앱의 초기 상태를 조합하고 애플리케이션 셸에서 초기 HTML 렌더링을 통해 웹 코드를 대화형 페이지로 전환합니다.

백그라운드에서 로드되면 Twitter API에서 직접 데이터가 요청됩니다. 이 아키텍처의 단순성은 Twitter PWA가 규모의 규모에서도 효율성 면에서 탁월하고 안정적인 서비스를 제공하는 데 도움이 됩니다.

성능 설계

사용하기 쉬운 것은 Twitter Lite의 최우선 순위 중 하나입니다. 수백만은 아니더라도 수백만 명의 사용자가 매달 이 소셜 네트워크에 액세스합니다. 따라서 그들은 모든 연결 환경에서 매우 유용한 사용자 여정을 만들고자 합니다.

개발자는 일련의 증분 성능 활용인 PRPL 패턴을 최신 브라우저의 최신 업데이트와 결합하여 Service Worker, 웹 푸시 알림, IndexedDB 및 웹 앱 설치 배너를 구축했습니다. 그들은 모두 인상적인 로딩 속도와 연결로부터의 독립성의 일부였습니다.

데이터 사용

데이터 저장 모드와 함께 더 작은 데이터를 미리 제공하기 위해 캐싱된 리소스에 의존하는 Twitter Lite는 본질적으로 데이터 사용을 최소화하도록 설정되어 타임라인 페이지에서 40% 공제가 발생합니다. 요청 시 최적화된 이미지를 로드하기 위해 버튼 클릭으로 크기를 표시하도록 HEAD 요청이 수행됩니다.

점진적 로딩

초기 HTML 응답을 브라우저에 붓고 나면 서버가 대화형 상태를 조합하는 데 중요한 리소스를 미리 로드하라는 지침이 전송됩니다. 스크립트는 요청이 있을 때만 로드하기 위해 webpack을 사용하여 미세한 조각으로 쪼개집니다.

즉, Twitter Lite의 초기 로드는 보이는 보기에 대한 필요성만 수행되기 때문에 매우 빠르며 서비스 작업자는 향후 상호 작용에서 거의 즉각적인 모양과 원활한 전환을 가능하게 하기 위해 추가 리소스를 미리 캐시합니다.

오프라인 가용성

서비스 워커는 기본 앱과 마찬가지로 임시 오프라인 사용을 가능하게 합니다. 이전에 로드된 모든 페이지는 HTML 앱 셸의 캐싱, 정적 자산 및 가장 일반적인 이모티콘을 통해 즉시 다시 열립니다.

"재시도" 버튼은 문제가 처리될 수 있도록 데이터 또는 스크립트 로드에 오류가 있는 경우 제공됩니다. 단순히 오프라인 브라우징을 활성화하면 시작 및 후속 방문의 로딩 속도가 훨씬 향상됩니다.

표현

값비싼 렌더링 작업은 잊어버리십시오. Twitter Lite는 구성 요소 렌더링에 최적화되었습니다. 그러나 더 큰 문제는 추가 성능에 대한 요구 사항이 무한한 목록이 있는 트윗의 복잡성에 있습니다.

그런 다음 그들은 위에 제시된 보기에 대해 콘텐츠를 표시하고 화면을 스크롤할 수 있도록 보존하는 가상화된 목록 구성 요소를 생각했습니다. 또 다른 업데이트는 중요하지 않은 렌더링을 비활성 모드로 연기하고 requestIdleCallback API로 데이터 소비를 줄이는 것입니다.

시스템 및 복제 속도

Twitter Lite는 앱이 모든 모양 요청을 준수할 수 있도록 구성 요소 세부 정보를 기반으로 구축된 반응형 디자인 시스템입니다. UI 구성 요소로 작업하면 빠른 반복과 확립된 빌딩 블록의 재사용을 위한 공간이 확보되었습니다. 또한 flexbox는 레이아웃 디자인, 색상, 글꼴 크기 및 길이에 고정된 제한된 수에 크게 의존한다는 점을 언급할 가치가 있습니다.

트위터 PWA의 결과

모바일 및 데스크탑 사이트

Twitter PWA는 3G 네트워크를 사용하는 대부분의 장치에서 5초 이내에 상호작용할 수 있다고 주장합니다. Lite 버전은 30% 더 빠르게 로드하고 최대 70%의 데이터 사용량을 절약하는 동시에 대화형 지연 시간을 25% 이상 줄입니다.

이전 기본 앱과 비교할 때 Twitter PWA는 크기의 최대 3%만 차지합니다. 이는 장치 저장 공간의 일부입니다. 그러나 그것은 심오하고 강력하게 기능합니다. 가장 복잡한 기능 중 하나인 타임라인은 Redux 모듈을 React 구성 요소, 혼합 콘텐츠에 연결하면서 제한된 30개의 코드 구성 라인으로 구성할 수 있습니다.

PWA는 일반 피드, 푸시 알림 팝업, 다이렉트 메시징 및 검색 탭과 같은 표준 기능으로 기본 앱과 매우 유사하게 작동합니다. 전환은 페이지와 요소 전반에 걸쳐 반응하지만 터치 응답은 기본 앱보다 현저히 느린 것으로 보고됩니다. 개발자는 향후 릴리스에서 사용성과 책임을 강화하기 위해 계속 노력하고 있습니다.

Mac과 Windows 모두에서 이전에 무시되었던 Twitter 공식 앱과 비교하여 좁은 창에서 잘 작동하는 데스크탑 버전에서는 모든 것이 상당히 유리합니다. 전체 경험은 상대적으로 가볍고 사용하기에 편안합니다.

Twitter Lite는 현재 최대 42개 언어를 지원하며 현지인에게 맞는 숫자, 날짜 및 메시지를 표시하기 위해 Globalize 기능이 만들어졌습니다.

숫자로 보는 결과

• 세션당 페이지 수 65% 증가
• 전송된 트윗 수 75% 증가
• 이탈률 20% 감소

Twitter PWA는 어떻게 가장 빠른 PWA 중 하나가 되었습니까?

서비스 작업자에 대한 기존 지식의 기능적 조정과 더 적은 데이터 소비를 위한 최적화를 통해 PWA는 더 빠른 로딩 속도를 처리하고 여행을 시작하는 동안과 여행 중에 후속 방문에 거의 즉시 표시되도록 고정되어 있습니다.

속도 최적화는 하루 이틀이 아니라 테스트, 추적, 측정, 왜 발생하는지 이해하려고 노력하고 가능한 솔루션을 적용하는 반복적인 프로세스가 될 것입니다. 성과에 대한 작업은 여기저기서 보고, 측정하고, 개선하는 악순환입니다.

즉, Twitter Lite는 첫 페이지 로드, React 구성 요소 렌더링, 재렌더링 방지 등에 대한 작은 개선 및 업데이트의 축적입니다. 각각은 전반적으로 성능 향상에 부합하고 현재 우리가 보고 있는 것과 같은 작은 노력으로 세계에서 가장 크고 가장 빠른 PWA 채택 중 하나입니다.

물론, 그 타이틀을 유지하기 위해 개발자는 모든 것이 통제되고 있는지 확인하기 위해 끊임없이 노력해야 하며 기회가 있다면 더 나은 프로세스로 프로세스를 발전시켜야 합니다.

Twitter PWA 및 PWA에 대해 자주 묻는 질문

트위터가 PWA인가요?

전적으로. Twitter는 2017년 Google 개발자와 협력하여 새로운 프로그레시브 웹 앱 버전을 출시했습니다. Twitter PWA의 이름은 Twitter Lite이며 빌드는 미국에 비해 종종 불안정한 연결을 경험할 수 있는 해외 사용자에게 서비스를 제공하는 데 중점을 둡니다.

Twitter PWA와 같은 PWA를 구축하는 데 비용이 많이 듭니까?

Twitter PWA는 모든 Twitter 관리 중 가장 저렴한 버전이지만 다양한 브라우저에서 훌륭하게 작동하며 기본 앱의 가장 큰 기능과도 유사합니다.

Twitter PWA는 뛰어난 성능 최적화와 PWA의 최신 기술을 세계적 수준의 응용 프로그램으로 결합한 것입니다. 즉, Twitter Lite와 같은 뛰어난 PWA를 구축하는 것은 고용하거나 아웃소싱하는 개발 팀에 따라 크게 달라집니다.

PWA는 기본 앱에 대한 최상의 대안이며 웹사이트의 미래를 널리 예측했습니다. 따라서 온라인 비즈니스가 현장 고객 여정을 개선하여 전환율을 활용할 수 있는 방법을 찾고 있다면 무겁고 값비싼 기본 앱을 버리고 대신 PWA를 찾으십시오.

귀하의 비즈니스의 PWA 개발을 어디서 시작해야합니까?

글쎄, 그것은 모두 당신의 비즈니스가 어디에 있는지, 무엇이 필요한지, 그리고 당신이 원하는 위치에서 시작해야 합니다. 말이 됩니까? 관련 없는 일에 돈과 소중한 시간을 낭비하고 싶지 않기 때문이겠죠?

다음으로 중요한 단계는 PWA가 비즈니스 전략에 적합한지 여부를 결정하는 것입니다. 거의 모든 사람이 사이트 트래픽을 늘리거나, 전환율을 높이거나, 단위 가치를 활용할 수 있는 방법을 찾고 있습니다. 그리고 PWA 개발 에이전시가 이 모든 것을 도와드릴 수 있습니다.

사이트에서 성능이 낮은 영역에서 문제를 감지하는 데 도움이 될 수 있습니다. 최적의 솔루션을 찾을 수 없는 경우 상담 또는 검사 서비스에 문의하십시오.

그리고 그 때 우리는 다음 단계에 도달했습니다. 신뢰할 수 있는 PWA 개발 서비스 제공업체를 선택하십시오. 수년간의 전문 지식, 고객을 위해 최선을 다하는 역동적인 개발자 팀, 그리고 기능이 풍부하고 기능이 풍부한 PWA를 만드는 데 필요한 뛰어난 지식과 기술을 갖춘 이름이 필요합니다.

Tigren은 수천 개의 글로벌 SMB가 지난 10년 동안 신뢰해 온 세계 최고의 아웃소싱 대행사입니다. 우리는 젊고 야심 차고 헌신적인 개인으로 구성된 팀으로, 해당 업계에서 가장 높은 성취를 이룬 사람들 중에서 선택됩니다.

우리는 특히 Magento 및 PWA 개발 서비스를 통해 전자상거래 개발을 전문으로 합니다. 우리는 당신이 다른 곳에서 찾을 수 없는 최고의 거래를 제공하고 끝까지 당신을 돕고 당신이 우리에게 오는 목표를 달성하기를 원합니다.

다음에 대한 효과적이고 비용 효율적인 솔루션이 필요한 경우 당사를 신뢰할 수 있습니다.

• 처음부터 완전히 전자 상거래 PWA 개발
• 부분적으로 전자 상거래 PWA 개발
• 기존 전자 상거래 PWA에 대한 기본 제공 솔루션 및 개선 사항
• 바로 사용할 수 있는 프리미엄 전자 상거래 PWA 테마/플러그인/확장

주요 내용

새로운 Twitter PWA는 둔하고 반응이 없는 모바일 웹 세계에 신선한 공기를 불어넣습니다. Twitter와 Google 간의 강력한 파트너십은 PWA의 잠재력에 대한 모든 우려와 의심을 깨고 혁신적인 채택으로 명성을 얻었습니다. 너무 늦기 전에 지금 바로 성공적인 PWA 얼리 어답터가 되어 온라인 사용자를 만족시키고 Tigren으로 ROI를 높이십시오.