앵귤러 라이브러리 - Angular PWA

앵귤러는 서비스 워커 등을 활용하여 Progressive Web App (PWA)을 구현할 수 있도록 해줍니다.

 

앵귤러 서비스 워커는 User Experience를 향상하기 위해 아래와 같은 규제를 따릅니다.

• 애플리케이션은 한 단위의 캐시로 저장되어 업데이트 시 애플리케이션의 모든 파일이 업데이트됨
• 애플리케이션은 새로고침 (reloading)이 있기 전까지 새로운 버전의 캐시가 생성되더라도 이전 버전으로 계속 구동됨
• 애플리케이션의 업데이트 작업은 뒤에서 이루어지며 완료되어야만 업데이트된 버전으로 구동됨
• 필요한 자원은 변화가 있는 경우만 다운로드됨

위와 같은 기능을 지원하기 위해 ngse.json이라는 manifest 파일을 통해 모든 내용물의 캐시 및 해시 정보가 저장, 정보의 변화 인지하고 이를 서비스 워커에게 알려줍니다. 참고로 manifest 파일은 ngsw-config.json라는 CLI 구성 파일을 통해 생성됩니다. 

 

주의할 점은 HTTP에서는 보안문제로 앵귤러 서비스 워커가 지원되지 않기 때문에 앵귤러 서비스 워커를 사용하기 위해서는 반드시 'HTTPS' 프로토콜을 사용해야 합니다 (다만, 로컬환경에서는 적용되지 않습니다).

캐시 되는 데이터들

• index.html
• favicon.ico
• JS and CSS bundles (build artifacts)
• assets 폴더에 포함된 모든 파일
• outputPath (./dist/<project-name>/) 또는 resourcesOutputPath에 바로 하위에 위치한 이미지나 폰트

여기서 주의할 점은 구성 파일이 생성된 후 outputPath나 resourcesOutputPath의 경로가 변경된 경우 ngsw-config-json 파일에서 직접 변경된 경로를 반영해 주어야 합니다.

앵귤러 PWA 사용하기

프로젝트에 서비스 워커 추가하기. 아래 코멘트 실행 시 package추가, CLI 빌드 서포트, 모듈에 추가, icon 파일 추가 및 ngsw-config.json 파일 추가 등 필요한 설정이 자동으로 완료되고. index.html 파일에 manifest.webmanifest 파일 링크와 theme-color 메타태그가 추가됩니다.

ng add @angular/pwa --project <project-name>

변경된 사항을 반영하기 

ng build

---

참고

Angular