"Ng6PwaSample"  Angular6で作成したPWAのサンプルプロジェクト


_Ng6PwaSample_は、Angular6でPWA（Progressive Web Apps）を実現したいと考えている開発者のためのサンプルプロジェクトです。

_フルソースコード_,
<https://github.com/Ohtsu/ng6-pwa-sample>

_ビデオ解説 (日本語)_,
<https://youtu.be/XMA1gyyYEr8>

_ビデオ解説 (英語)_,
<https://youtu.be/b1SUOBI1CiA>


## 概要 
   - _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


## インストール

このプロジェクトをインストールするには、以下を実行します。

```bash
$ npm install 
```

## プロジェクトのビルド

プロダクションモードでプロジェクトをビルドする必要があります。 

```bash
$ ng build --prod
```

## ローカルサーバーの起動

`dist`ディレクトリが生成されましたら、その中の`Ng6PwaSample`ディレクトリに移ります。
まだ、_http-server_をインストールされていない場合には、以下のように事前にインストールしておいてください。

```bash
$ npm install http-server -g
```

次に_http-server_を以下のように起動します。

```bash
$ http-server --port 8080
```

そしてブラウザで _http://localhost:8080_ にアクセスします。
以下のように表示されます。

  - ***First Page*** 

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng6-pwa/dashboard01.png" width= "640" >


## オフラインモードでのチェック

次にChromeにおいて、`control + shift + i`キーを押して、デベロッパー・ツールを表示します。
そしてアプリケーション・タブページの中のサービスワーカーを開きます。
ここでオフラインにチェックを入れ、オフラインすなわちインターネットに接続できない状態にします。

通常のWebアプリケーションの場合、オフラインにすると、以下のようなエラーメッセージが表示されてしまいます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng6-pwa/offline01.png" width= "640" >

しかしながら、PWAの機能を利用すると、オフラインになっても以下のようにエラーメッセージは表示されません。これはサービスワーカーがオフラインを検知し、キャッシュに切り替えて表示しているからです。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng6-pwa/offline_ok01.png" width= "640" >

## バージョン

   - 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%99%E3%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月版", 
<https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20>

- "Great Progressive Web App Experiences with Angular", 
<https://www.youtube.com/watch?v=C8KcW1Nj3Mw&feature=share>

- "Angular Service Worker Tutorial", 
<https://www.youtube.com/watch?v=5YtNQJQu31Y&feature=share>

- "Build your First Angular PWA from Scratch (Angular 6 PWA Tutorial)", 
<https://www.youtube.com/watch?v=othhfZ0mGjU&feature=share>

- "Schematics", 
<https://material.angular.io/guide/schematics>

- "Angular 5, Angular 6 Custom Library: Step-by-step guide", 
<https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/>


- "Angular 5, Angular 6用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", 
<https://www.udemy.com/angular5-l/>

 
## 更新ログ

 - 2018.8.2 version 0.0 uploaded 

## Copyright

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)


## License

MIT © [Shuichi Ohtsu](ohtsu@digipub-net.com)