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

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

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

概要

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を利用しています。

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

$ 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キーを押して、デベロッパー・ツールを表示します。
そしてアプリケーション・タブページの中のサービスワーカーを開きます。
ここでオフラインにチェックを入れ、オフラインすなわちインターネットに接続できない状態にします。

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

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