Angular CLI v10으로 PWA를 만들어 보자!

2020/06/29 Angular CLI v10에 대응

2018년의 ng-japan에서도 PWA(Progressive Web App 1 )가 다루어졌습니다!
대응 브라우저도 늘어나고, PWA는 최근 꽤 주목받고 있다고 생각합니다.

Angular CLI를 사용하면 비교적 쉽게 PWA를 만들 수 있습니다. 빨리 해보자!



※ 본 기사는 「 Angular CLI 1.6에서 PWA를 만들어 보자! 」를 가필 수정한 것입니다
※ 기사중의 소스 및 커맨드는 Angular CLI v10계를 대상으로 하고 있습니다.
※ 최종 결과물은 여기 → htps : // 기주 b. 코 m / Puku 0x / Angu r-p wasa mp ぇ

Angular CLI 설치

최신 Angular CLI는 Node.js v10 이상에서만 지원됩니다.

Node.js 버전이 v10보다 오래되거나 설치되지 않은 경우 위의 페이지를 방문하여 설치하십시오 (nvm 및 nodebrew와 같은 도구를 사용해도 괜찮습니다).

Node.js를 설치한 후 아래 명령을 사용하여 Angular CLI를 설치합니다.

$ npm i -g @angular/cli

새 프로젝트를 만듭니다.

$ ng new my-app --routing --style=scss

프로젝트가 완료되면 다음 단계로 작업 디렉토리로 이동합니다.

$ cd my-app

Service Worker 통합

다음 명령을 실행하여 Service Worker를 통합합니다.

ng add @angular/pwa

프로젝트가 여러 개 있는 경우 다음과 같이 지정합니다.

ng add @angular/pwa --project=my-app

@angular/pwa를 추가하면 Service Worker 외에도 manifest.webmanifest 및 아이콘과 같은 PWA로 작동하는 데 필요한 파일 집합이 만들어집니다.

App Shell 포함(선택 사항)

App Shell 은 UI가 작동하는 데 필요한 최소한의 HTML/CSS/JavaScript입니다. 앱 로드 중에 표시하는 자리 표시자로 사용하면 앱이 시작될 때까지의 체감 속도를 높일 수 있습니다.

아래 명령을 실행하면 App Shell이 ​​생성됩니다.

$ ng g app-shell --client-project=my-app

경로는 디폴트로 /shell 하지만, --route 옵션으로 변경 가능합니다.

경로를 변경하는 경우

$ ng g app-shell --client-project=my-app --route=my-path 

앱 빌드

ng run 에서 빌드합니다.

$ ng run my-app:app-shell --configuration=production

브라우저에서 표시

만든 앱을 확인해 봅시다.

$ npx node-static ./dist/my-app/browser --spa --port=9000

서버가 시작되면 브라우저에서 localhost:9000를 열면 표시됩니다.

비교

표시 속도가 얼마나 향상되었는지 살펴 보겠습니다 ( 여기에서 미리 볼 수 있습니다). Chrome의 개발자 툴 등으로 회선 속도를 Fast 3G 등으로 설정하면 비교하기 쉬워진다고 생각합니다.

PWA화전은↓ 이런 느낌입니다. [ 출처 ]



툴바가 표시되는(First Paint)까지 약 2000ms 같은 곳입니까?

App Shell을 통합하면,



약 1500ms로 단축됩니다.

또한 Service Worker가 등록되어 캐시가 활성화되면,



아이콘이 표시되는(First Meaningful Paint)까지 포함해 약 500ms가 됩니다.

꽤 빨라졌습니다

결론

최신 Angular CLI에서는 PWA 구현이 매우 간단해졌습니다.
@angular/service-worker 에 대해서는 이번은 캐시 용도만이었습니다만, 앱의 갱신 감시나 푸시 통지등도 있으므로 향후 활용해 가고 싶은 곳입니다.

여러분도 이것을 계기에 Angular로 PWA를 만들어 봅시다!

참고

htps // 앙구 r. 이오/구이데/세 rゔぃ세 r r r
htps // 앙구 r. 이오 / 구이 / 아 p ぇ l
htps : // 기주 b. 코 m / Puku 0x / Angu r-p wasa mp ぇ



웹 앱에 네이티브 앱 수준의 UX를 제공하는 것. 구글이 제창하고 있다. ↩