@angular/cli V6.0(코드 포함)을 사용하여 PWA 애플리케이션을 개발하는 실제 사례에 대한 자세한 설명

이번에는 @angular/cli V6.0을 사용하여 PWA 애플리케이션(코드 포함)을 개발한 실제 사례에 대해 자세히 설명하겠습니다. @angular/cli V6.0을 사용하여 PWA를 개발할 때의 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다.

PWA란 무엇입니까

PWA(프로그레시브 웹 앱)는 TLS, 웹 앱 매니페스트 및 서비스 작업자를 활용하여 애플리케이션을 설치하고 오프라인에서 사용할 수 있도록 합니다. 즉, PWA는 휴대폰의 기본 앱과 같지만 HTML5, JavaScript 및 CSS3와 같은 웹 기술을 사용하여 구축되었습니다. 올바르게 구축되면 PWA는 기본 앱과 구별할 수 없습니다.

PWA의 주요 특징은 다음 세 가지를 포함합니다:

• 신뢰성 - 불안정한 네트워크 환경에서도 즉시 로드하고 표시할 수 있습니다.

• 경험 - 빠른 응답, 사용자 작업에 대한 부드러운 애니메이션

• Stickness - 기기의 기본 애플리케이션처럼 사용자가 데스크톱에 추가할 수 있는 몰입형 사용자 경험을 제공합니다.

PWA 자체는 진보성을 강조하며 보안, 성능 및 경험에 대한 모든 요구 사항을 한 번에 충족할 필요가 없습니다. 개발자는 PWA 체크리스트를 통해 기존 기능을 볼 수 있습니다.

Angular는 공식적으로 V6.0을 출시했으며 이미 해당 @angular/cli V6.0을 사용하여 PWA 애플리케이션을 직접 개발할 수 있습니다. 아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

1단계: @angular/cli V6.0 설치

컴퓨터에 이전 버전이 있는 경우 먼저 제거하세요.

터미널을 열고 다음을 실행하세요.

npm install -g @angular/cli

설치가 성공적으로 완료되면 ng -v를 사용하여 버전 번호를 확인하세요.

2단계: 빈 프로젝트 만들기

실행:

ng new test-ng-pwa

성공적으로 생성됨 그런 다음 프로젝트를 살펴보고 다음을 실행합니다.

ng serve --open

브라우저에서 이 인터페이스를 보면 모든 것이 정상임을 의미합니다.

3단계: PWA 지원 추가

프로젝트를 중지하고 엽니다. 터미널 실행:

ng add @angular/pwa

효과는 다음과 같습니다:

--prod가 컴파일될 때 @angular/cli의 내장 서버는 service-worker를 지원하지 않기 때문에 타사 라이트- 공식 문서는 여기에 있습니다: https://npmjs.com/package/lite-server, 실행하십시오:

npm install lite-server --save-dev
npm install lite-server --global

설치 후, 실행:

npx ng build --prod && lite-server --baseDir dist/test-ng-pwa

그런 다음 브라우저를 열어 포트에 액세스하십시오. 3000, 서비스를 볼 수 있습니다. 작업자가 성공적으로 시작되었습니다.

이제 데스크톱에 애플리케이션을 추가할 수 있습니다.

Windows에 미치는 영향은 다음과 같습니다.

믿습니다. 이 기사의 사례를 읽으십시오. 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

node+koa2+mysql+bootstrap 포럼의 프런트엔드와 백엔드 구축

JS에서 이 포인터의 사용 예에 ​​대한 자세한 설명

위 내용은 @angular/cli V6.0(코드 포함)을 사용하여 PWA 애플리케이션을 개발하는 실제 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!