PWA Kit 개요
이 개요에서는 Progressive Web App(PWA) Kit 아키텍처의 주요 부분을 간략하게 소개하고 제품 설명서의 나머지 부분을 이해하는 데 유용한 컨텍스트를 제공합니다.
Retail React App은 이커머스에 최적화된 서버 측 렌더링 React 앱입니다. 다음과 같은 주요 기능이 사전에 포함된 스토어프런트를 구축하기 위한 출발점을 제공합니다.
- 코드 번들링, 코드 분할 및 변환
- 테마를 지원하는 구성요소 라이브리
- JavaScript 기반 스타일링 시스템(JS의 CSS)
- 일상적인 개발 작업을 자동화하기 위한 스크립트
- Progressive Web App(PWA) 기능의 서비스 작업자 및 매니페스트
- 테스트군
Retail React App의 스토어프런트에는 제품 목록 페이지(PLP), 제품 세부 정보 페이지(PDP), 카트 및 체크아웃과 같은 표준 이커머스 페이지와 기능이 포함되어 있습니다. 스토어프런트의 모든 측면은 자체 코드로 개선하고 확장할 수 있도록 설계되었습니다.
자세한 내용은 pwa-kit.mobify-storefront.com에서 Retail React App 데모를 참조하거나 Retail React App에 대한 자세한 아키텍처 가이드를 참조하십시오.
PWA Kit를 사용하여 만든 사이트는 다음 웹 브라우저와 호환됩니다.
| 운영 체제 | 브라우저 |
|---|---|
| Android 8+ | Chrome 53+ |
| Android 8+ | Samsung Internet |
| iOS 10+ | Chrome 53+ |
| iOS 10+ | Safari 10+ |
| 운영 체제 | 브라우저 |
|---|---|
| Android 8+ | Chrome 53+ |
| Android 8+ | Samsung Internet |
| iOS 10+ | Chrome 53+ |
| iOS 10+ | Safari 10+ |
| 운영 체제 | 브라우저 |
|---|---|
| macOS 10.10+ | Safari 10+ |
| macOS 10.10+ | Firefox 49+ |
| Windows 8.1+ | Chrome 53+ |
| Windows 8.1+ | Edge 14+ |
| Windows 8.1+ | Firefox 49+ |
최상의 구매자 경험을 구현하기 위해 PWA Kit 스토어프론트는 서버 측과 클라이언트 측의 두 가지 다른 컨텍스트에서 동일한 소스 코드를 실행하는 렌더링 및 라우팅 시스템을 사용합니다. 서버 측 렌더링은 초기 페이지 로드 속도를 최적화하고, 클라이언트 측 렌더링은 응답 성능이 뛰어난 사용자 인터페이스와 원활한 페이지 전환을 지원합니다.
렌더링 및 라우팅 시스템은 Retail React App에서 Express 서버 구성과 React 구성요소의 계층을 사용하여 구축됩니다. 이 시스템에서는 다음을 수행할 수 있습니다.
- 새 페이지 구성요소를 추가하고 기존 페이지 구성요소를 수정
- API 요청 또는 사용자 상호 작용을 통해 얻은 데이터를 페이지 구성요소에 제공
- 페이지 구성요소로 URL 요청을 라우팅하기 위한 패턴 정의
- 모든 페이지의 출력 맞춤화
자세히 알아보려면 렌더링 및 라우팅의 자세한 아키텍처 가이드를 참조하십시오.
PWA Kit 스토어프런트는 Einstein Activity를 사용하여 사용자 경험을 개선하고 Reports & Dashboards에서 보고 데이터를 제공합니다.
Report & Dashboards에서 Einstein Activity 기반 보고 기능을 활성화하려면 Business Manager에서 해당 기능을 활성화해야 합니다.
PWA Kit는 GitHub에서 호스팅되는 오픈 소스 프로젝트입니다.
PWA Kit용 GitHub 리포지토리는 라이브러리, 프로젝트 템플릿, SDK, 기타 도구 등 여러 패키지가 포함된 모노리포로 설정됩니다.
이 리포지토리를 손쉽게 탐색할 수 있도록 포함된 각 패키지의 개요를 정리해 드리겠습니다.
| 패키지 | 설명 |
|---|---|
| pwa-kit-create-app | 프로젝트 템플릿을 기반으로 PWA Kit 프로젝트를 생성합니다. |
| pwa-kit-dev | PWA Kit 프로젝트를 개발, 빌드, 배포하는 명령줄 도구입니다. |
| pwa-kit-runtime | Node.js 애플리케이션이 Managed Runtime에서 실행될 수 있도록 합니다. |
| pwa-kit-react-sdk | 렌더링 파이프라인을 지원하는 유틸리티입니다. |
| commerce-sdk-react | Salesforce B2C Commerce API와 상호 작용하기 위한 React 후크입니다. |
| template-retail-react-app | 프로젝트를 시작하기 위한 기본 템플릿입니다. |
| template-typescript-minimal | TypeScript 애플리케이션에 대한 제로 구성 프로젝트 템플릿입니다. |
| template-express-minimal | Managed Runtime에서 실행되는 앱에 대한 기본 프로젝트 템플릿입니다. |
보안 패치는 PWA Kit SDK의 메이저 버전(1.0, 2.0 등)이 정식 출시된 후 24개월 동안 제공됩니다.
PWA Kit는 야간 주기로 야간 빌드를 릴리스하여, 향후 기능에 대한 가시성을 높이고 코드 통합을 테스트할 수 있는 기회를 제공합니다.
PWA Kit 패키지의 야간 릴리스는 nightly-next라는 배포 태그를 사용하여 npm에 릴리스됩니다. 최신 nightly-next 태그는 npm에서 확인할 수 있습니다.
이 패키지는 다음을 실행하여 설치합니다.
npm install <package-name>@nightly-next
예를 들어 PWA Kit 프로젝트에 @salesforce/commerce-sdk-react의 최신 야간 빌드를 설치하려면 다음을 실행합니다.
npm install @salesforce/commerce-sdk-react@nightly-next
미리보기 버전을 프로덕션 환경에 사용하지 마십시오.
이러한 빌드는 테스트되지 않고 지원되지 않습니다. 야간 빌드에 포함된 일부 기능은 최종 PWA Kit 릴리스에 포함되지 않을 수 있습니다. 이러한 릴리스되지 않은 빌드는 로드되지도 않을 수 있으며, 문서화되지 않은 기능, 알려진 결함 및 기타 여러 문제가 있을 수 있습니다. 이러한 빌드는 계획된 PWA Kit 기능을 조기에 이용하고자 하는 개발자 및 기타 사용자가 사용할 수 있습니다.