Angular 2
봉사 노동자

소개

앱에 서비스 워커 추가

먼저 mobile.angular.io와 상담 할 경우 --mobile이 더 이상 작동하지 않습니다.

그래서 우리는 각진 cli를 가진 정상적인 프로젝트를 만들 수 있습니다.

ng new serviceWorking-example
cd serviceWorking-example

중요한 것은, 우리가해야 할 봉사 인력을 이용하기를 원한다는 것입니다.

ng sets apps.0.serviceWorker = true로 설정하십시오.

어떤 이유로 든 @ angular / service-worker가 설치되어 있지 않으면 다음 메시지가 표시됩니다.

프로젝트가 serviceWorker = true로 구성되었지만 @ angular / service-worker가 설치되어 있지 않습니다. npm install --save-dev @angular/service-worker 실행하고 다시 시도하거나 .angular-cli.json에서 ng set apps.0.serviceWorker=false 를 실행하십시오.

.angular-cli.json을 확인하면 다음과 같이 표시됩니다. "serviceWorker": true

이 플래그가 true이면 생산 작업자와 서비스 빌드가 설정됩니다.

ngsw-manifest.json 파일이 생성 될 것입니다 (또는 프로젝트의 루트에 ngsw-manifest.json을 작성한 경우이를 보완하기 위해 일반적으로 라우팅을 지정하기 위해 수행됩니다. 미래에는 자동으로 수행됩니다) dist / root에 복사하면 서비스 작업자 스크립트가 거기에 복사됩니다. 서비스 근로자를 등록하려면 index.html에 간단한 스크립트가 추가됩니다.

이제 프로덕션 모드에서 앱을 빌드하면 ng build --prod

dist / 폴더를 확인하십시오.

거기에 세 개의 새 파일이 표시됩니다.

• worker-basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

또한 index.html에는 이제 우리를위한 각도 서비스 작업자 (ASW)를 등록하는 sw-register 스크립트가 포함되어 있습니다.

브라우저에서 페이지를 새로 고침합니다 (Chrome 용 Web Server에서 제공).

개발자 도구를 엽니 다. 응용 프로그램 -> 서비스 근로자로 이동하십시오.

서비스 근로자가 잘 운영되고 있습니다.

이제 애플리케이션이 더 빨리로드되어야하며 앱을 오프라인에서 사용할 수 있어야합니다.

이제 크롬 콘솔에서 오프라인 모드를 사용하도록 설정하면 http : // localhost : 4200 / index.html 의 앱이 인터넷에 연결하지 않고 작동하는 것을 볼 수 있습니다.

하지만 http : // localhost : 4200 / 에 문제가있어서로드하지 않습니다. 정적 컨텐츠 캐시는 매니페스트에 나열된 파일 만 제공하기 때문에 발생합니다.

예를 들어 매니페스트가 /index.html의 URL을 선언하면 /index.html에 대한 요청에 캐시가 응답하지만 / 또는 / some / route에 대한 요청은 네트워크로 전달됩니다.

경로 리디렉션 플러그인이 들어오는 곳입니다. 매니페스트에서 라우팅 구성을 읽고 구성된 경로를 지정된 인덱스 경로로 리디렉션합니다.

현재이 구성 섹션은 직접 작성해야합니다 (19-7-2017). 결국, 그것은 응용 프로그램 소스에있는 라우트 구성에서 생성됩니다.

이제 프로젝트의 루트에 ngsw-manifest.json을 만들면

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

그리고 앱을 다시 빌드합니다. 이제 http : // localhost : 4200 / 으로 이동하면 http : // localhost : 4200 / index.html 로 리디렉션되어야합니다.

라우팅에 대한 자세한 내용은 공식 문서를 읽으 십시오.

여기에서 서비스 작업자에 대한 추가 문서를 찾을 수 있습니다.

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

SW precache 라이브러리를 사용하여 서비스를 구현하는 다른 방법을 볼 수 있습니다.

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers