# Angular 6へのPWA導入 --- ## 自己紹介 * 角　友博 * html5j鹿児島/富士通鹿児島インフォネット * 主にAngularでのフロント開発（＋Cordovaとか） --- ## Angularについて * Google主導のフロントエンドフレームワーク * コンポーネント指向 * フルスタックが売り * 最近Service Workerのサポートを始めた（Ver5~） --- ## バージョンについて * Angular**JS**(1.x)とAngular(2~)は別物です * Angular 2以降は互換性あり(破壊的変更は半年間猶予期間) * 半年毎にメジャーバージョンアップ -> 現在はAngular 6 * 基本的に最新版を使ってください。 --- ## モジュール 機能毎にモジュール分割されているので、必要なものだけ追加して使えます。 [npmjs.org @angular/***](https://www.npmjs.com/search?q=%40angular) メジャーバージョンは統一されている。（統一されてないものはまだ安定してない） --- ## 開発環境 Angular CLI ``` $ npm i -g @angular/cli ``` * プロジェクト生成 * コンポーネント雛形生成 * ビルド * テスト/Lint * モジュール追加/アップデート * etc... --- ## PWAに関するモジュール |モジュール| | |---|---| |@angular/pwa|PWA関連のファイルを生成するためのテンプレート定義| |@angular/service-worker|ビルド時にService Workerを生成してくれる| |@angular/platform-server|Node.jsでのサーバーサイドレンダリングをサポート。Web App Shell生成に（今日はやりません）| --- ## AngularをPWA化する手順 1. プロジェクト生成 2. PWAモジュールの追加 3. ビルド --- ### プロジェクト生成 ``` $ ng new ngPwaDemo ``` ちょっと重い --- ### PWAモジュールの追加 ``` $ ng add @angular/pwa ``` --- ### ビルド ``` $ ng build --prod ``` --- ## デプロイ 今回はAzureにDeployしてみます。 https://ngpwa-demo.azurewebsites.net  --- ## 細かい説明 すいません、勉強中ですm(_ _)m Service Workerは自分で書けないけど機能追加はどうするのか？ --- ## まとめ * AngularでPWAをセットアップするのはとても簡単です。 * 実用的に使うにはまだ早いかも -> 勉強するなら今がチャンス！