Angularのプロジェクトを作成
Angularプロジェクトの作成を作成します｡以下のページを参考にしてください｡
第1回 Angular Material 徹底解説！- 環境構築
キジ(@kiji)です｡みなさんは､Webアプリケーション開発のときにどのフレームワークを使っていますか?React､Vue､最近ではFlutterも候補にあがるでしょうか｡ 私はというと､ずっとAngularを使ってきました｡Angula
www.libetech.info
PWAのパッケージをインストール
$ cd {project名}
$ ng add @angular/pwa
次に､プロジェクトをビルドするのですが､app-scriptの有無で､ビルド､起動方法が変わります｡ app-scriptがあることで､読み込みが早くなる利点があります｡それぞれについて解説します｡
PAWのビルド(app-scripなし)
ビルド
$ ng build
PWAの起動
$ npx node-static ./dist/{project名} --spa --port:{port番号}
PAWのビルド(app-scripあり)
PWAのビルド
$ ng g app-shell
$ ng run {project名}:app-shell --configularion={development | production}
PWAの起動
$ npx node-static ./dist/{project名}/browser --spa --port={port番号}
PWAの起動について
pwaを使う場合､ng serveでは起動できないことが､公式に記載されています｡
ng serveはService Workerと連携しないので、プロジェクトをローカルでテストするためには、別のHTTPサーバーを使用する必要があります。任意のHTTPサーバーを使用できます。次の例では、npmからhttp-serverパッケージを使用しています。競合する可能性を減らし、古いコンテンツを配信することを避けるために、専用ポートでテストし、キャッシュを無効化してください。
参考サイト
Angular 日本語版
モダンなアプリを構築するためのウェブ開発フレームワーク
angular.jp
コメント