Facebook PWA: 알아야 할 사항

전 세계적으로 가장 빠르게 성장하는 소셜 미디어 플랫폼이 공식적으로 PWA 변환에 합류했습니다. Facebook PWA에 대한 많은 사람들이 원했던 사례 연구와 함께 최신 기사가 제공됩니다.

Facebook이 PWA로 전환해야 하는 이유와 PWA가 이 거대한 기술 회사에 어떤 결과를 가져왔는지 설명하겠습니다. 바로 들어가 보겠습니다.

페이스북 개요

2004년 Harvard 중퇴자 Mark Zuckerberg는 전 세계의 사람들이 게시물을 통해 연결하고 의견을 공유하고 상호 작용할 수 있는 커뮤니티를 구축하기 위해 Facebook을 설립했습니다. 그리고 나머지는 역사입니다.

오늘날까지도 Facebook은 사람들이 연결 상태를 유지하고, 친구와 가족의 일상 생활 업데이트를 받고, 세상에서 무슨 일이 일어나고 있는지 알 수 있도록 도와줍니다.

현재 지구상에서 가장 큰 소셜 미디어 플랫폼으로 2022년 1분기 데이터에서 약 29억 3천만 명의 월간 활성 사용자가 있습니다.

특정 대상 세그먼트가 있는 LinkedIn 또는 Twitter와 달리 Facebook은 그룹에 국한되지 않고 다양한 미디어 측면을 통합하여 다양한 유형의 요구와 콘텐츠를 수용하고 다양한 사람들에게 다가가기 때문에 크게 성장했습니다.

미래에 PWA의 역할

Facebook이 PWA 버전을 출시했다는 이야기를 들을 때 PWA에 대해 무엇을 알아야 합니까? 첫째, 미래에 PWA의 존재에 관한 것입니다.

여부의 문제가 아니라 웹 사이트 소유자가 PWA를 통합하거나 구축하기 시작할 시기의 문제입니다. 페이스북, 트위터, 우버, 틴더, 스타벅, 알리익스프레스, 알리바바가 모두 디지털 전략에 PWA를 채택한다면 반드시 그래야 하기 때문이다.

둘째, 우리는 PWA가 여전히 상대적으로 신선하기 때문에 기본 앱에 비해 성능이 뒤처질 수 있다는 것을 알고 있습니다. 그러나 Facebook의 기본 기능 중 95%는 PWA용으로 다시 만들 수 있으며 개발자는 이러한 변환에 대해 낙관적입니다.

그것은 내일의 일이라고 예측됩니다. 거의 모든 앱이 이미 PWA에 구축될 수 있습니다. PWA 기능 목록은 해당 기본 앱 등으로 계속 확장됩니다.

유행어와 기괴한 주장과 함께 PWA 주변의 모든 비효율적인 소음을 차단하기 위해 PWA가 세상에 제공하는 가치가 있습니다.

PWA는 웹을 더 나은 시간을 보낼 수 있는 장소로 만들고 중요한 사람들에게 의미를 부여한다는 개념 하에 탄생했습니다.

최종 사용자를 위한 습관을 사용하는 일일 앱에는 큰 경향이 있습니다. 대부분의 사람들은 최대 6개의 앱을 사용하고 매일 2~3개의 앱만 진지하게 상호작용합니다.

따라서 데이터에 따르면 앱에 대한 가장 큰 불만은 너무 많은 저장용량을 소비하는 것으로 나타나므로 사용자는 더 많은 앱이 필요하지 않습니다. 그렇기 때문에 사용자가 하나의 경량 플랫폼에서 어울리고 여전히 지속적인 영향을 미치게 하면 기본 앱이 부족하게 됩니다.

사용자가 PWA를 선호하면 기업과 개발자가 수익성 있는 온라인 입지를 구축하기 위한 노력과 리소스를 절약할 수 있습니다.

2개의 개별 기본 앱과 웹 사이트를 지원해야 하는 것보다 여러 장치에서 하나의 원활한 경험을 갖는 것이 더 합리적입니다.

게다가 브랜드가 이미 기본 앱을 소유하고 있어도 PWA를 구축하는 것은 여전히 ​​작동하지만 유명인에게 적합합니다. 그것은 그들이 PWA 데뷔 중에 가능한 모든 잠재 고객을 유치하는 데 도움이 될 것입니다.

PWA 통합 이전 Facebook의 과제

많은 사람들을 놀라게 하고 기쁘게도 Facebook은 2020년에 모바일 웹 앱 개발을 중단했습니다. 원래 앱은 사용자 친화적이지 않다고 말했고 Facebook은 PWA로 전환할 기회를 찾고 있었습니다.

두 개의 분할된 상황은 브라우저에서 실행되는 PWA의 앱과 같은 경험에 의해 곧 종료되었습니다. 그것은 추진력으로 진화하고 있으며 최근 몇 년 동안 많은 네이티브 앱에 대한 실행 가능한 대안이 되었습니다.

Facebook은 또한 이 기술이 특히 전자 상거래에서 디지털 환경을 지배하는 길에 있다고 말할 수 있습니다. 그러나 웹 앱으로서 PWA는 여전히 새롭고 기능에 대한 추가 작업이 필요합니다.

페이스북 PWA의 결과

디자인 정보

홈 화면에 나타날 때 Facebook PWA 및 non-PWA의 로고 디자인에 약간의 조정이 있습니다. 바탕 화면에서 일반 앱은 하단에 Chrome 북마크와 함께 표시되고 PWA는 기본 앱 아이콘처럼 보입니다.

비 PWA를 사용하면 메뉴 표시줄과 상위 주소가 있는 오래된 새 탭 보기를 얻을 수 있습니다. 실제 사이트가 앱처럼 나타나 로드를 시작하기 전에 시작 화면이 표시되는 PWA의 경험은 다릅니다. 작업을 처리하는 것은 여전히 ​​장치의 브라우저이지만 상단 표시줄이 없는 앱과 더 유사한 방식으로 나타납니다.

Facebook PWA는 이전 비즈니스를 계속할 수 있도록 개요 스위처에서 독립적으로 실행됩니다. 그 외에는 내용이나 레이아웃에서 큰 차이가 없습니다.

사용자 경험 정보

• 로딩 속도: 빠르고 부드러움
• 페이지와 요소 간의 전환: 즉각적인 출현으로 반응
• 전반적인 경험: 쉽고 간단하며 빠름

Facebook과 같은 PWA를 구축하는 7가지 팁

KISS 원칙(간단하고 어리석게 유지)

모바일 화면은 데스크톱보다 훨씬 작고 데이터와 전력을 훨씬 덜 소모합니다. 이는 개발자가 작업할 콘텐츠가 적다는 것을 의미합니다.

따라서 간단하고 필수적이며 유용하게 유지하십시오. 디자인에 압도되지 않도록 특정 공간에 여유를 두십시오. A/B 테스트를 통해 불필요한 요소를 제거하여 참여 포인트를 낮춥니다.

복잡한 글꼴을 사용하면 사이트를 로드하는 데 많은 전력이 소모되어 프로세스가 느려질 수 있습니다. 경험상 가능한 한 기본 글꼴의 우선 순위를 지정하는 것입니다.

Facebook은 브랜드 아이덴티티 요소를 잃지 않고 사람들의 게시물에 주의를 끌 수 있도록 좋은 오래된 Helvetica 글꼴로 이것을 못박았습니다.

원활한 탐색 보장

사전에 좋은 우선 순위는 머리글이나 바닥글과 같은 모든 웹 기반 상호 작용 요소를 한 번에 피하는 것입니다. 앱이나 모바일 브라우저에서 Facebook을 사용하면 모든 것이 원하는 위치에 그대로 유지된다는 것을 알게 될 것입니다.

브라우저 기능 대신 가장자리 없는 모드로 오버플로하고 PWA를 기본 앱을 빌드하는 것과 같은 방식으로 처리하세요.

터치 제스처는 스페어와 ​​함께 사용해야 하지만 실행하기 어렵기 때문에 꼭 필요한 것은 아닙니다.

브라우저 간 기능

각 브라우저의 PWA 기능을 고려하여 설계 단계에서 호환성을 평가하는 것이 좋습니다.

Chrome과 Firefox는 PWA 기능을 가장 많이 지원하는 두 브라우저이지만 Safari는 여전히 PWA에서 서비스 작업자 지원을 완전히 거부합니다.

이 PWA 핵심 기술의 부재로 인해 푸시 알림 및 오프라인 검색과 같은 기본 기능이 부족하게 되었습니다. 모든 Apple 제품에서 여전히 Facebook PWA를 볼 수 있지만 다른 브라우저처럼 최적화되어 있지 않습니다.

오프라인 모드 스눕 유지

우리 모두는 인터넷 연결이 꺼져 있는 이유에 대해 우리를 바쁘게 만들고 즐겁게 하는 악명 높은 Google 공룡을 기억합니다. 콘텐츠를 로드하는 데 시간이 조금 더 필요한 경우에도 동일한 트릭을 적용할 수 있습니다.

로딩 스피너를 덜 실망스러운 것으로 교체하면 로드를 잊어버리게 하여 사이트가 현재보다 더 빠르다고 생각할 수 있습니다.

로딩을 훨씬 짧게 보이게 하는 또 다른 훌륭한 용도는 사용자에게 무엇을 기대하고 무엇을 기대하지 않아야 하는지 살짝 엿볼 수 있게 하는 동시에 페이지의 각 관심 지점으로 안내하는 스켈레톤 화면입니다. 그러나 사이트에서 사용자 생성 데이터를 저장하고 인터넷 연결 없이 적절하게 캐시할 수 있도록 하는 서비스 워커를 제외하지 마십시오.

SEO 최적화

Google이 알고리즘을 업데이트할 때 검색 엔진에서 순위를 매기기 위해 따라야 할 새로운 규칙 세트가 있습니다. 따라서 머신 크롤링과 화면 뒤의 실제 방문자 모두를 위해 페이지를 디자인하십시오. 각각은 URL을 통해 사용할 수 있어야 합니다.

PWA의 도움 없이 Facebook 게시물은 관련 키워드에 대한 모든 검색 엔진에 거의 표시되지 않습니다. 그들은 가장 높은 위치에 높은 위치에 표시되는 경향이 있습니다.

다음은 SEO 친화적인 사이트에서 주의해야 할 몇 가지 사항입니다.

• 서버 측 렌더링 콘텐츠는 초기 인덱싱 웨이브에 필요하며 가능한 한 항상 사용합니다. 그렇지 않은 경우 타사에서 제공하는 동적 렌더링 서비스에 의존할 수 있습니다.
• 각 페이지의 표준 태그로 표준 URL을 지정합니다.
• 검색 봇에 의한 클로킹이나 동일한 콘텐츠 제공을 피하세요.
• 사이트가 5초 이내에 빠르게 로드되어 온 페이지 시간이 늘어나고 보안이 강화되었는지 확인하십시오.

다양한 유형의 입력과 함께 작동

호버 효과와 상호 작용하도록 트리거를 디자인하려는 경우 사용자가 클릭하거나 터치하여 활성화해야 합니다. 정확한 의미론적 요소와 의미론적이지 않은 HTML을 사용하는 것을 잊지 마십시오.

또 다른 것은 PWA가 가로 보기에 있을 때 일반적으로 나타나는 메시지 공간에서 키보드 영역을 멀리 유지하는 것입니다. Facebook PWA는 사용자가 다양한 장치에서 정확한 상호 작용을 수신하도록 하는 환상적인 작업을 수행했습니다.

Google의 Lighthouse 도구로 PWA 검증

제작 과정 중이나 출시 후 PWA의 성능을 평가해야 하는 경우 Google의 오픈 소스 도구 감사 웹사이트인 Lighthouse를 사용할 수 있습니다. Lighthouse는 1에서 100까지의 척도에서 5가지 매개변수를 기반으로 웹사이트의 순위를 매깁니다.

큰 이름은 모든 것이 포함되도록 개발이 진행되는 동안 항상 테스트합니다. PWA는 웹 사이트가 PWA인지 여부를 분류하는 데 사용되는 요소이기도 합니다.

그리고 확실하다면 PWA는 속도, 보안, 반응형 디자인, 캐싱, 오프라인 성능, 인덱싱, 푸시 알림 및 사용자 경험의 다양한 측면에서 측정됩니다.

주요 내용

두 세계의 장점을 최대한 활용하기 위해 웹 사이트에 최고의 기본 앱을 채택하여 가까운 장래에 PWA를 큰 이점으로 만들 수 있습니다. 온라인 환경의 미래는 PWA의 영향을 손상시킵니다.

Facebook PWA의 선구자적 역할은 확실히 PWA 혁명을 가속화하는 동시에 인터넷 연결 용량의 차이에도 불구하고 전 세계 사용자가 대화에 참여할 수 있는 가벼운 경험과 강력한 플랫폼을 다시 제공했습니다.

PWA 변환을 처리하는 데 도움이 되는 완전한 신뢰성을 제공하는 전문가 이름을 찾고 있다면 Tigren이 필요한 것입니다.

합리적인 가격으로 제공되는 고품질 프리미엄 전자 상거래 PWA 서비스에 대해 오늘 이야기하십시오. 지금 더 빨리 수익을 창출하고 ROI를 높이십시오.