좋은 프로그레시브 웹 앱의 특징은 무엇인가요?

실적은 모든 온라인 비즈니스의 성공에 중요한 역할을 합니다 사용자 참여도와 유지율이 높아지므로 더 높은 실적을 올릴 수 있습니다 사용자 중심의 성능 측정항목에 맞게 최적화하는 데 집중합니다.

이유

속도는 사용자가 앱을 사용하도록 유도하는 데 중요합니다. 실제로 페이지 로드 시간이 1초에서 10초로 증가하면 사용자의 이탈 확률이 123% 증가합니다. 성능이 좋지 않음 load 이벤트로 중지합니다. 사용자가 절대로 사용자 상호작용(예: 버튼 클릭)이 선택할 수 있습니다 스크롤과 애니메이션이 매끄럽게 느껴져야 합니다. 성능이 전반적인 환경에 영향을 주며, 앱이 사용자가 그것을 어떻게 인식하는지에 따라 달라집니다.

모든 애플리케이션의 요구사항은 다르지만 Lighthouse의 성능 감사는 Core Web Vitals를 기반으로 하며 이러한 감사에서 높은 점수를 받으면 사용자가 더 즐거운 경험을 할 가능성이 높아집니다. 또한 PageSpeed Insights나 Chrome 사용자 환경 보고서 웹 앱의 실제 성능 데이터를 가져올 수 있습니다.

방법

빠른 로드 시간에 관한 가이드에 따라 PWA가 빠르게 시작되고 빠르게 유지되도록 하는 방법을 알아보세요.

사용자는 웹 앱이 설치되기 전에 원하는 브라우저를 사용하여 웹 앱에 액세스할 수 있습니다.

이유

프로그레시브 웹 앱은 웹 앱이므로 여러 브라우저에서 작동해야 합니다.

이를 위한 효과적인 방법은 Resilient Web Design의 저자 제레미 키이스의 말을 빌리자면 핵심 기능을 파악하고 가능한 한 가장 간단한 기술을 사용하여 이러한 기능을 제공한 다음 가능한 경우 환경을 개선하는 것입니다. 많은 경우 이것은 단지 HTML을 사용하여 핵심 기능을 만들고 사용자 경험을 향상시키는 데 사용합니다. CSS 및 JavaScript를 사용하여 더 몰입도 높은 환경을 만들 수 있습니다.

양식 제출을 예로 들어보겠습니다. 이를 구현하는 가장 간단한 방법은 POST 요청을 제출하는 HTML 양식을 사용하는 것입니다. 빌드 후 자바스크립트 사용 환경을 개선하여 유효성 검사 및 AJAX를 통해 양식을 제출함으로써 사용자 경험 개선 사용자를 지원할 수 있습니다.

사용자가 다양한 기기와 환경에서 사이트를 경험합니다. 있습니다. 단순히 최상위 스펙트럼을 타겟팅할 수는 없습니다. 기능 감지를 사용하여 아직 존재하지 않는 브라우저와 기기를 사용하는 사용자를 포함하여 최대한 다양한 잠재적 사용자에게 사용 가능한 환경을 제공합니다.

방법

제레미 키스의 Resilient Web Design 는 웹 디자인에 대해 어떻게 생각하는지 설명하는 훌륭한 리소스입니다. 교차 브라우저, 점진적인 방법론을 사용합니다.

추가 자료

• 목록 분리의 점진적 개선 이해하기 이 주제를 이해하는 데 도움이 됩니다
• Smashing 잡지 점진적 개선: 정의와 사용 방법 실용적인 소개와 고급 주제에 대한 링크를 제공합니다.
• MDN의 기능 감지 구현 도움말에서는 기능을 직접 쿼리하여 감지하는 방법을 설명합니다.

사용자는 어떤 화면 크기에서든 PWA를 사용할 수 있으며 모든 콘텐츠는 어떤 뷰포트 크기에서든 사용할 수 있습니다.

이유

기기는 다양한 크기로 제공되며 사용자는 애플리케이션을 다음에서 사용할 수 있습니다. 동일한 기기에서도 다양한 크기로 생성할 수 있습니다 따라서 콘텐츠가 표시 영역에 맞을 뿐만 아니라 사이트의 기능과 콘텐츠가 모든 표시 영역 크기에서 사용할 수 있습니다.

사용자가 완료하고자 하는 작업과 액세스하려는 콘텐츠 변경되지 않습니다. 내 콘텐츠를 다시 정렬하여 한 방향으로 또는 한 방향으로만 배치해야 하고 있습니다. 실제로 루크 워블레프스키가 모바일 우선이라는 저서에서 언급했듯이, 작게 시작하여 더 큰 화면에 맞게 디자인을 조정하면 사이트 디자인을 개선할 수 있습니다.

휴대기기의 경우 소프트웨어 개발팀이 애플리케이션에서 가장 중요한 데이터와 작업에만 집중해야 합니다. 간단히 320x480픽셀 화면에 불필요하거나 요소 우선순위를 두어야 합니다.

방법

다음을 비롯하여 반응형 디자인에 대한 여러 리소스가 있습니다. 원본 기사 <ph type="x-smartling-placeholder"></ph> 중요한 개념 모음 방대한 양의 책과 대담도 있습니다. 이 논의를 반응형 디자인의 콘텐츠 측면으로 좁히려면 콘텐츠 중심 디자인 및 콘텐츠 아웃 반응형 레이아웃을 참고하세요. 마지막으로 모바일에 중점을 두고 있지만 조시 클라크의 Seven Deadly Mobile Myths에 나온 내용은 반응형 사이트의 소형 뷰와도 관련이 있습니다.

사용자가 오프라인 상태일 때 PWA에 유지하면 기본 브라우저 오프라인 페이지로 돌아가는 것보다 더 원활한 환경을 제공할 수 있습니다.

이유

사용자는 설치된 앱이 연결 상태에 관계없이 작동하기를 기대합니다. 있습니다. 플랫폼별 앱은 PWA에 브라우저 기본 오프라인 페이지가 표시되면 안 됩니다. 사용자가 캐시되지 않은 URL로 이동할 때와 사용자가 연결이 필요한 기능을 사용하려고 할 때 모두 맞춤 오프라인 환경을 제공하면 웹 환경이 실행 중인 기기의 일부처럼 느껴질 수 있습니다.

방법

서비스 워커의 install 이벤트 중에 사전 캐시할 수 있습니다. 사용자가 오프라인 상태가 될 때 표시할 맞춤 오프라인 페이지 직접 구현하는 방법을 알아보려면 오프라인 대체 페이지 만들기를 참고하세요. 제공되지 않은 경우 Chrome에는 기본 오프라인 페이지가 표시됩니다.

기기에 앱을 설치하거나 추가하는 사용자는 확인할 수 있습니다.

이유

프로그레시브 웹 앱을 설치하면 다른 모든 설치된 앱과 같은 모양, 느낌, 동작을 갖게 됩니다. 사용자가 다른 앱을 실행하는 것과 동일한 위치에서 실행됩니다. 브라우저와 별개로 자체 앱 창에서 실행되며 다른 앱과 마찬가지로 할 일 목록에 표시됩니다.

기기별 앱과 마찬가지로 앱을 설치하는 사용자가 참여도가 높은 잠재고객 집단을 대상으로 하며, 앱과 동일한 참여도 측정항목을 보유하는 경우가 많습니다. 모바일 기기 사용자 이러한 측정항목에는 사이트에 머문 시간이 길고 전환율이 평균보다 더 높습니다. 있습니다.

방법

설치 가능한 가이드 따르기 을 참고하세요.

연결이 반드시 필요하지 않은 경우 앱이 동일하게 작동합니다. 온라인에서와 마찬가지로 오프라인에서도 작동합니다

이유

사용자는 맞춤 오프라인 페이지를 제공할 뿐만 아니라 오프라인 사용 가능 예를 들어 여행 및 항공 앱에는 여행 정보가 있어야 합니다. 세부 정보와 탑승권을 오프라인에서 쉽게 사용할 수 있도록 했습니다. 음악, 팟캐스팅 앱에서는 오프라인 재생을 허용해야 합니다 소셜 및 뉴스 앱은 사용자가 오프라인에서 읽을 수 있도록 최근 콘텐츠를 캐시해야 합니다. 또한 사용자는 오프라인 상태에서도 인증 상태가 유지되기를 기대하므로 오프라인 인증을 설계하세요. 오프라인 PWA는 사용자에게 진정한 앱과 같은 환경을 제공합니다.

방법

사용자가 오프라인에서 작동할 것으로 예상되는 기능을 결정한 후에는 콘텐츠를 오프라인에서 사용할 수 있도록 하고 조정 가능하도록 만들어야 합니다. 있습니다. 색인을 생성할 수 있는 IndexedDB, 브라우저 기반 NoSQL 스토리지 시스템으로, 데이터를 저장 및 검색하며 백그라운드 동기화 사용자가 오프라인일 때도 작업을 수행할 수 있도록 지원하고 서버 통신을 지연시킵니다. 사용자가 다시 안정적으로 연결될 때까지 기다려야 합니다 또한 서비스 다른 종류의 콘텐츠(예: 이미지, 동영상 파일, 오디오 파일과 오디오 파일을 오프라인에서 사용할 수 있으며 안전하고 오래 지속되는 세션 사용자 인증 상태를 유지합니다 사용자 경험 관점에서 로드하는 동안 사용자에게 속도와 콘텐츠에 대한 인식을 제공하는 해골 화면을 사용하면 필요에 따라 캐시된 콘텐츠 또는 오프라인 표시기로 대체할 수 있습니다.

모든 사용자 상호작용은 WCAG 2.0을 통과합니다. 접근성 요구사항

이유

대부분의 사용자는 인생의 특정 시점에 다음과 같은 방식으로 PWA를 사용하고 싶어 합니다. WCAG 2.0이 적용됨 접근성 요구사항 인간 다른 사람들과 상호 작용하고 PWA가 스펙트럼에 존재하고 필요한 것이 일시적이거나 영구적입니다. PWA의 접근성을 높이면 모든 사용자가 사용할 수 있습니다.

방법

W3C의 웹 접근성 소개를 참고하세요. 대부분의 접근성 테스트는 수동으로 실행해야 합니다. Lighthouse의 접근성 감사, axe, 접근성 통계와 같은 도구를 사용하면 일부 접근성 테스트를 자동화할 수 있습니다. 또한 요소를 다시 생성하는 대신 의미상 올바른 요소 사용 직접(예: a 및 button) 요소 이렇게 하면 고급 기능을 빌드해야 할 때 접근성 기대치가 충족됩니다(예: 화살표와 탭 중 어느 쪽을 사용할지). A11Y 영양 카드의 경우 이에 대한 조언을 얻을 수 있습니다.

PWA는 검색을 통해 쉽게 발견할 수 있습니다.

이유

웹의 가장 큰 장점 중 하나는 검색을 통해 사이트와 앱을 찾을 수 있다는 것입니다. 실제로 절반 이상 전체 웹사이트 트래픽 중 자연 검색에서 발생한 비율 검색엔진이 사이트의 색인을 생성할 수 있는지 잠재 사용자가 PWA를 찾을 수 있도록 하는 데 매우 중요합니다. 이것은 클라이언트 측 렌더링을 채택할 때 특히 그렇습니다.

방법

먼저 각 URL에 고유하고 설명적인 제목과 메타 설명이 있는지 확인합니다. 그런 다음 Google Search Console 및 Lighthouse의 검색엔진 최적화 감사를 사용하여 PWA의 검색 가능성 문제를 디버그하고 수정할 수 있습니다. 나 Bing의 또는 Yandex의 사이트 사이트 소유자 도구를 구조화된 데이터는 PWA에 있는 Schema.org의 스키마

PWA는 마우스, 키보드, 스타일러스, 터치 등 다양한 방식으로 사용할 수 있습니다.

이유

기기에서는 다양한 입력 방법을 제공하며, 사용자는 애플리케이션을 사용하는 동안 이러한 입력 방법 간에 원활하게 전환할 수 있어야 합니다. 마찬가지로 입력 방법은 화면 크기에 종속되어서는 안 됩니다. 즉, 큰 뷰포트는 터치를 지원해야 하고 작은 뷰포트는 키보드와 마우스를 지원해야 합니다. 애플리케이션과 모든 기능이 사용자가 선택할 수 있는 모든 입력 방법의 사용을 최대한 지원하도록 합니다. 적절한 경우 풀-투-리프레시와 같은 입력별 컨트롤도 허용하도록 환경을 개선합니다.

방법

포인터 이벤트 API는 다양한 입력 옵션을 사용하는 통합 인터페이스를 제공하며 스타일러스 지원을 추가하는 데 특히 유용합니다. 터치와 키보드를 모두 지원하려면 올바른 시맨틱 요소(앵커, 버튼, 양식 컨트롤 등)를 사용하고 시맨틱이 아닌 HTML로 다시 빌드하지 않아야 합니다. 마우스 오버 시 활성화되는 상호작용을 포함하는 경우 클릭이나 탭 시에도 활성화될 수 있는지 확인합니다.

강력한 API 사용 권한을 요청할 때는 컨텍스트를 제공하고 API가 필요할 때만

이유

권한 메시지를 트리거하는 API(예: 알림, 위치정보, 사용자의 서비스 이용에 지장을 주도록 의도적으로 설계된 것은 선택이 필요한 강력한 기능과 관련이 있는 경우가 많기 때문입니다. 페이지 로드와 같이 추가 컨텍스트 없이 이러한 메시지를 트리거하면 사용자가 이러한 권한을 수락할 가능성이 줄어들고 향후 이러한 권한을 신뢰하지 않을 가능성이 커집니다. 대신 이러한 프롬프트는 해당 작업이 필요한 이유에 대한 컨텍스트 내 근거를 사용자에게 제공 권한을 부여했는지 확인합니다.

방법

권한 UX 도움말과 UX Planet의 사용자에게 권한을 요청하는 올바른 방법은 모바일에 중점을 두면서도 모든 PWA에 적용되는 권한 메시지를 디자인하는 방법을 이해하는 데 도움이 되는 리소스입니다.

코드베이스를 정상 상태로 유지하면 목표를 더 쉽게 달성하고 새로운 기능을 제공합니다

이유

최신 웹 애플리케이션을 빌드하는 데는 많은 노력이 필요합니다. 유지 코드베이스를 정상 상태로 사용하면 애플리케이션을 최신 상태로 유지하고 다음에 나와 있는 다른 목표를 충족하는 새로운 기능을 제공할 수 있도록 이 체크리스트를 확인해 보세요.

방법

정상 상태를 보장하기 위해 우선순위가 높은 검사가 여러 가지 있습니다. codebase:

• 알려진 취약점이 있는 라이브러리는 사용하지 마세요.
• 지원 중단된 API를 사용하고 있지 않은지 확인합니다.
• 코드베이스에서 안전하지 않은 코딩 관행(예: document.write() 사용 또는 비패시브 스크롤 이벤트 리스너 사용)을 삭제합니다.
• 분석 또는 기타 서드 파티 라이브러리가 로드되지 않아도 PWA가 중단되지 않도록 방어적으로 코딩할 수도 있습니다.
• 린팅과 같은 정적 코드 분석과 여러 브라우저 및 출시 채널에서의 자동 테스트를 요구하는 것이 좋습니다. 이러한 오류가 프로덕션에 들어가기 전에 포착하는 데 도움이 될 수 있습니다.