"Ng6PwaSample"Angular6에서 만든 PWA 샘플 프로젝트

Ng6PwaSample은 Angular6에서 PWA(Progressive Web Apps)를 실현하고자 하는 개발자를 위한 샘플 프로젝트입니다.

풀 소스 코드,
htps : // 기주 b. 코 m / h h / n g6-p 와사 mp ぇ

비디오 해설 (일본어),
htps: //같다. 베 / X 마 1g ぇ r8

비디오 설명(영어),
htps: //같다. 베 / b1 스오비 1 시아

개요

Ng6PwaSample은 Angular6의 ng add @angular/pwa 명령으로 작성된 PWA의 샘플 프로젝트입니다.

Ng6PwaSample은 Angular Material의 mat-grid, mat-card, mat-menu, mat-icon 등을 사용하고 있습니다.

Ng6PwaSample 는 d3.js(ver4.3) 및 ng6-o2-chart를 이용하고 있습니다.

전제 조건

node.js

Typescript2

Angular6

http-server

설치

이 프로젝트를 설치하려면 다음을 수행합니다.

$ npm install 

프로젝트 빌드

프로덕션 모드에서 프로젝트를 빌드해야 합니다.

$ ng build --prod

로컬 서버 시작

dist 디렉토리가 생성되면, 그 안의 Ng6PwaSample 디렉토리로 이동합니다.
아직 http-server가 설치되어 있지 않은 경우에는 다음과 같이 미리 설치해 두십시오.

$ npm install http-server -g

그런 다음 http-server를 다음과 같이 시작합니다.

$ http-server --port 8080

그런 다음 브라우저에서 http://localhost:8080에 액세스합니다.
다음과 같이 표시됩니다.

첫 페이지

오프라인 모드에서 확인

그런 다음 Chrome에서 control + shift + i 키를 눌러 개발자 도구를 표시합니다.
그런 다음 애플리케이션 탭 페이지에서 서비스 작업자를 엽니다.
여기서 오프라인에 체크를 넣어 오프라인 즉 인터넷에 접속할 수 없는 상태로 합니다.

일반 웹 애플리케이션의 경우 오프라인으로 설정하면 다음과 유사한 오류 메시지가 표시됩니다.



그러나 PWA 기능을 사용하면 오프라인 상태가 되어도 다음과 같이 오류 메시지가 표시되지 않습니다. 이는 서비스 근로자가 오프라인을 감지하고 캐시로 전환하여 표시하기 때문입니다.

버전

Ng6PwaSample : 0.0

Angular6 : 6.0.3

TypeScript : 2.7.2

@angular/material : 6.2.1

@angular/pwa : 0.6.8

@angular/service-worker : 6.0.3

d3.js : 4.3.0

ng6-o2-chart : 0.4.0

참고문헌

"PWA로 무엇을 할 수 있는지",
https://speakerd.s3.amazonaws.com/presentations/c9b547f51eed4304ad1c6aa5f9024c1d/PWA%E3%81%A6%E3%82%99%E4%BD%95%E3%81%8B%E3%82 81%A6%E3%82%99%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82% 8B%E3%81%AE%E3%81%8B.pdf

"PWA 입문 ~iOS Safari에서 PWA를 체험할 때까지 ~ 2018년 6월판",
htps : // 코 m / 우마 미치 / ms / 0 2b4b1c578 7335 ba 20

"Great Progressive Web App Experiences with Angular",
htps //w w. 요츠베. 이 m/와 tch? v=C8KcW1응 j3Mw&후아츠레=샤레

"Angular Service Worker Tutorial",
htps //w w. 요츠베. 이 m/와 tch? v = 5Yt QJ 쿠 31Y & 훗 아츠레 = 샤레

"Build your First Angular PWA from Scratch (Angular 6 PWA Tutorial)",
htps //w w. 요츠베. 이 m/와 tch? v = 오 thfZ0mG 주 & 훗 아츠레 = 샤레

"Schematics",
htps : // 마테리아 l. 앙구 r. 이오 / 구이 / s 치에 마치 CS

"Angular 5, Angular 6 Custom Library: Step-by-step guide",
htps //w w. 우데 my. 코 m / 앙구 r 5-ku s와 m-b et ry- e e-에서 푹신 푹신하고 p by-s 로 p gue /

"Angular 5, Angular 6용 사용자 정의 라이브러리 만들기: 전체 단계별 가이드",
htps //w w. 우데 my. 코 m/앙구 r5-l/

업데이트 로그

2018.8.2 version 0.0 uploaded

Copyright

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)

License

MIT © 주일 오