ServiceWorker과 PWA(Progressive Web App)

# PWA란?

•  Web App을 만드는 접근방식 중 하나
• 어떤 기술을 지칭하는 것이 아니라 웹 어플리케이션의 구현 방법에 가깝습니다. 그렇기 때문에 본인의 상황에 맞추어서 PWA로 구현하면 됨
• PWA의 핵심 기술인 Service Worker와 Web App Manifest에 대해 배우게 됩니다. 또한 Service Worker를 통해 Offline 모드를 어떻게 지원할 수 있음

# PWA나온 이유

• 앱의 가장 큰 장점은 오프라인에서도 사용할 수 있다는 점입니다.
• 사용자들이 이미 필요한 자원을 로컬에 이미 설치해두었기 때문에 일부 로컬에 남아있는 데이터들을 통해 오프라인 모드를 지원할 수 있습니다. 
• 웹은 접속할 때마다 HTTP 리퀘스트를 날리고 리소스를 다운받아야하기 때문에 오프라인 모드 지원이 어렵습니다.
• PWA는 웹의 장점과 앱의 장점을 적절히 녹여냈습니다. 
• 사용자들은 PWA를 검색할 수 있고, 브라우저에서 PWA에 접근하여 PWA를 충분히 탐색하다가, 본인이 원한다면 홈스크린에 추가할 수 있고 
• 홈스크린에 추가한 아이콘을 통해 PWA를 실행할 수 있습니다. 
• 또한 원한다면 필수 리소스를 로컬에 캐싱하여 오프라인 모드를 지원할 수도 있습니다.

# ServiceWorker란?

• 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로,
• 웹페이지와는 별개로 작동하며, 
• 웹페이지 또는 사용자 상호작용(UI)이 필요하지 않은 기능에 대해 문호를 개방합니다.
• 서비스 워커는 자바스크립트 Worker이므로, DOM에 직접 액세스할 수 없습니다

# ServiceWorker의 장점

• 오프라인 상황에서 브라우저가 뭘 해야될지 개발자가 제어할 수 있도록 한 것이고, 
• 주기적 백그라운드 동기화, 
• Q.백그라운드 동기화란? 오프라인으로 인해서 특정 처리가 완료가 되지 못했을 때, 온라인 상태가 되면 자동으로 처리가 완료되는 것

• 푸시 알림(일반적으로 원시 애플리케이션을 요구하는 기능) 가능하도록 한 것

# ServiceWorker의 단점

• 표준이 아님
• https 가 적용되어 있어야 한다. 또는 localhost로 접속해야함
• promise 를 사용법을 알아야 한다.
• 모든 브라우저를 지원하지 않는다. (사용전 확인 로직이 필요하다)

# Angular에서 ServiceWorker 생성하기

1. 프로젝트에 service worker 추가하기 : ng add @angular/pwa --project *project-name*
1. @angular/service-worker package를 프로젝트에 추가
2. Cli 상에서 service worker build가 지원가능하게 한다.(http-server 패키지를 설치?)
3. app.module.ts 상에서 service-worker를 import하고, json파일을 매핑해준다. Ex. ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
4. index.html 상에서 theme-color 태그를 추가해준다. ex. <meta name="theme-color" content="#387ef5">
5. index.html 상에서 menifest.json 파일 경로를 추가해준다 ex. <link rel="manifest" href="manifest.json”>
6. PWA를 제공하기 위해, 여러가지 icon 파일들을 생성한다.
7. ngsw-config.json라고 불리는 service worker 설정 파일을 작성한다.(캐시 행동, 기타 설정 정의)
2. Service worker와 함께 프로젝트 실행
1. http-server 패키지 설치(ng serve는 serviceworker와 함꼐 동작하지 않음)
2. ng build —prod //수정 후 , build 수행
3. http-server  -p 8080 -c-1 dist/<project-name>
3. Service worker 잘 작동하는지 체크하기
1. Localhost:8080 상에서, Network tab 이동, offline check
2. Size 컬럼에 from serviceworker라고 표시되어 있으면, 온라인이 아닌 오프라인 경우에, 리소스들을 serviceworker의 cache에서 가져오고 있다고 생각하면 된다.
4. Service worker에 cache될수 있는 대상들 : ngsw-config.json에 정의됨
1. index.html
2. favicon.ico
3. Build artifacts (JS and CSS bundles).
4. Anything under assets