최신 프로그레시브 웹 앱 개발의 모든 측면을 분석하는 과정입니다.
이 과정에서는 프로그레시브 웹 앱 개발의 기본 사항을 이해하기 쉬운 내용으로 다룹니다. 다음 모듈에서는 프로그레시브 웹 앱의 정의, 웹 콘텐츠를 만들거나 기존 웹 콘텐츠를 업그레이드하는 방법, 설치 가능한 오프라인 앱에 필요한 요소를 모두 추가하는 방법을 배웁니다. 메뉴 창을 사용하여 모듈을 탐색하세요. (메뉴는 데스크톱에서는 왼쪽에, 모바일에서는 햄버거 메뉴 뒤에 표시됩니다.)
웹 앱 매니페스트, 서비스 워커, 앱을 염두에 두고 설계하는 방법, 기타 도구를 사용하여 PWA를 테스트하고 디버그하는 방법 등 PWA 기본 사항을 알아봅니다. 이러한 기본사항이 끝나면 플랫폼 및 운영체제와의 통합, PWA의 설치 및 사용 환경을 개선하는 방법, 오프라인 환경을 제공하는 방법을 알아봅니다.
각 모듈에는 지식을 테스트할 수 있는 대화형 데모와 자가 진단이 포함되어 있습니다. 코드를 다루면서 휴대전화, 태블릿, 노트북에서 데모를 테스트하고 시험해 보면서 프로그레시브 웹 앱의 기본 사항을 이해할 수 있습니다.
이 과정은 초보 및 고급 웹 개발자 모두를 위해 만들어졌습니다. 시리즈를 처음부터 끝까지 진행하여 PWA에 관한 일반적인 내용을 처음부터 끝까지 살펴보거나 특정 주제에 관한 참고 자료로 사용할 수 있습니다. 웹 개발이 처음인 경우 따라할 수 있는 HTML, CSS 및 JavaScript에 대한 기초가 필요합니다. MDN에서 CSS 알아보기 및 HTML 및 JavaScript 과정을 확인하세요.
학습할 내용은 다음과 같습니다.
시작하기
프로그레시브 웹 앱을 빌드하려는 경우, 어디서부터 시작해야 할지, 처음부터 시작하지 않고 웹사이트를 PWA로 업그레이드할 수 있는지, 플랫폼별 앱에서 PWA로 이동하는 방법이 궁금할 수 있습니다. 이 도움말은 이러한 질문에 답변하는 데 도움이 됩니다.
기초
모든 프로그레시브 웹 앱은 핵심이며 최신 웹사이트이므로 웹사이트가 반응형 디자인, 모바일 및 모든 것을 최우선으로 하며, 내장 디자인 및 웹 성능 측면에서 견고한 기반을 갖추는 것이 중요합니다.
앱 디자인
프로그레시브 웹 앱과 기존 웹사이트 및 웹 앱의 주요 차이점 중 하나는 설치 가능 여부입니다. 이렇게 하면 플랫폼 및 운영체제에 더욱 통합된 독립형 환경이 만들어집니다. Google은 콘텐츠 내용에 대한 브라우저 사용자 인터페이스를 사용하지 않으므로 설치를 통해 유연성과 새로운 책임을 다하게 됩니다.
애셋 및 데이터
프로그레시브 웹 앱은 웹사이트입니다. 모든 애셋이 웹에 있는 것과 동일하지만 이러한 애셋이 온라인일 때는 빠르게 로드되고 오프라인에서도 사용할 수 있게 해주는 새로운 도구가 있습니다.
서비스 워커
서비스 워커는 PWA의 기본 부분입니다. 빠른 로드 (네트워크와 무관), 오프라인 액세스, 푸시 알림 및 기타 기능을 지원합니다.
캐싱
Cache Storage API를 사용하여 기기의 애셋을 다운로드, 저장, 삭제 또는 업데이트할 수 있습니다. 그러면 이러한 애셋을 네트워크 요청 없이 기기에서 제공할 수 있습니다.
제공
서비스 워커의 가져오기 이벤트를 사용하면 네트워크 요청을 가로채고 다양한 기술을 사용하여 응답을 제공할 수 있습니다.
작업 상자
Workbox는 라우팅 및 캐싱과 같은 일반적인 서비스 워커 상호작용을 간소화하는 모듈 집합입니다. 각 모듈은 서비스 워커 개발의 특정 측면을 다룹니다. Workbox는 서비스 워커를 최대한 쉽게 사용하는 동시에 필요에 따라 복잡한 애플리케이션 요구사항을 유연하게 수용할 수 있도록 하는 것을 목표로 합니다.
오프라인 데이터
오프라인 환경을 안정적으로 구축하려면 스토리지 관리를 구현해야 합니다. IndexedDB, Cache, Storage Manager, Persistent Storage, Content Indexing과 같은 도구가 도움이 될 수 있습니다.
설치
설치된 앱은 쉽게 액세스할 수 있으며 OS와의 긴밀한 통합을 활용할 수 있습니다. PWA를 설치할 수 있도록 하고 이러한 이점을 얻는 방법에 대해 알아보세요.
웹 앱 매니페스트
웹 앱 매니페스트는 운영체제 내의 디자인과 기본 동작을 포함하여 PWA를 설치된 애플리케이션으로 취급하는 방법을 정의하는 JSON 파일입니다.
설치 메시지
PWA 설치 기준을 충족하는 사이트의 경우 브라우저에서 이벤트를 트리거하여 사용자에게 설치를 요청합니다. 다행히 이 이벤트를 사용하여 메시지를 맞춤설정하고 사용자가 앱을 설치하도록 초대할 수 있습니다.
업데이트
PWA를 업데이트해야 할 수 있습니다. 이 장에서는 애셋에서 메타데이터에 이르기까지 PWA의 여러 부분을 업데이트할 수 있는 도구를 제공합니다.
개선사항
사용자는 만족스러운 경험을 기대합니다. 이 장에서는 스플래시 화면, 앱 바로가기, 세션 작동 방식을 사용하여 PWA를 개선하는 방법을 알아봅니다.
감지
사용자가 앱과 상호작용하는 방식을 파악하면 사용자 환경을 맞춤설정하고 개선하는 데 유용합니다. 예를 들어 앱이 사용자 기기에 이미 설치되어 있는지 확인하고 브라우저에서 독립형 앱으로 탐색을 전송하는 등의 기능을 구현할 수 있습니다.
OS 통합
이제 PWA가 브라우저 외부에서 작동합니다. 이 장에서는 사용자가 앱을 설치한 후 운영체제와 추가로 통합하는 방법을 설명합니다.
창 관리
브라우저 외부의 PWA는 자체 창을 관리합니다. 이 장에서는 운영체제 내의 창을 관리하기 위한 API와 기능을 이해합니다.
실험 기능
아직 준비 중인 PWA 기능이 있으며, 이 기능의 개발에 참여할 수 있습니다. 이 장에서는 Fugu 프로젝트, 오리진 트라이얼 가입 방법, 실험용 API 사용 방법을 알아봅니다.
도구 및 디버그
프로그레시브 웹 앱을 개발, 디버그 및 테스트하는 데 사용할 수 있는 도구를 살펴봅니다.
아키텍처
PWA를 개발할 때는 단일 페이지 애플리케이션을 만들지, 다중 페이지 애플리케이션을 만들지, 도메인의 루트 또는 폴더 내에서 호스팅할지 등 몇 가지 사항을 결정해야 합니다.
복잡성 관리
웹 앱을 단순하게 유지하는 일은 놀라울 정도로 복잡할 수 있습니다. 이 모듈에서는 웹 API가 스레딩과 작동하는 방식과 상태 관리와 같은 일반적인 PWA 패턴에 웹 API를 사용하는 방법을 알아봅니다.
기능
PWA는 화면에만 국한되지 않습니다. 이 장에서는 하드웨어, 센서 및 플랫폼 사용과 관련하여 현재 PWA가 사용할 수 있는 기능에 대해 설명합니다.
결론
다음 단계 및 리소스
이제 PWA를 학습할 준비가 되셨나요?