@angular/cli V6.0を使ったPWAアプリケーション開発の実践事例を詳しく解説（コード付き）

今回は @angular/cli V6.0 を使用して PWA アプリケーションを開発する実践例を詳しく説明します (コード付き) @angular/cli V6.0 を使用して PWA を開発する場合の 注意事項 について説明します。以下に実際のケースを見てみましょう。

PWAとは

PWA (Progressive Web App) は、TLS、WebApp マニフェスト、Service Worker を利用して、アプリケーションをインストールしてオフラインで使用できるようにします。 言い換えれば、PWA は携帯電話のネイティブ アプリに似ていますが、HTML5、JavaScript、CSS3 などの Web テクノロジーを使用して構築されています。 正しく構築されていれば、PWA はネイティブ アプリと区別できません。

PWAの主な特徴は以下の3点です:

• 信頼性 - 不安定なネットワーク環境でも瞬時に読み込み、表示可能

• エクスペリエンス - レスポンスが速く、ユーザー操作に応じたアニメーションがスムーズ

• Stickness - デバイス上のネイティブ アプリケーションと同様に、ユーザーがデスクトップに追加できる没入型のユーザー エクスペリエンスを備えています

PWA 自体は進歩性を重視しており、セキュリティ、パフォーマンス、エクスペリエンスのすべての要件を一度に満たす必要はありません。開発者は、PWA チェックリストを通じて既存の機能を確認できます。

Angular は V6.0 を正式にリリースしており、対応する @angular/cli V6.0 を使用して PWA アプリケーションを直接開発できるようになりました。以下では多くを語る必要はありません。詳細な紹介を見てみましょう。

ステップ 1: @angular/cli V6.0 をインストールします

マシンに古いバージョンがある場合は、最初にアンインストールしてください。

ターミナルを開いて実行します:

npm install -g @angular/cli

インストールが成功したら、ng -v を使用してバージョン番号を確認します:

ステップ 2: 空のプロジェクトを新規作成します

実行:

ng new test-ng-pwa

作成に成功しましたその後、プロジェクトを見て実行します:

ng serve --open

ブラウザにこのインターフェースが表示されるということは、すべてがOKであることを意味します:

ステップ 3: PWA サポートを追加します

プロジェクトを停止してから開きますターミナルでの実行:

ng add @angular/pwa

効果は次のとおりです:

@angular/cli の組み込みサーバーは --prod がコンパイルされるときにサービスワーカーをサポートしないため、サードパーティのライト-公式ドキュメントはここにあります: https://npmjs.com/package/lite-server、次を実行してください:

npm install lite-server --save-dev
npm install lite-server --global

インストール後、次を実行してください:

npx ng build --prod && lite-server --baseDir dist/test-ng-pwa

次に、ブラウザを開いてポートにアクセスします。 3000、サービスが表示されます。ワーカーは正常に開始されました:

これで、アプリケーションをデスクトップに追加できます:

これは Windows での効果です:

この記事でその事例を読んでください。あなたはこの方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書: フォーラムのフロントエンドとバックエンドを構築するための

node+koa2+mysql+bootstrap

JS でのこのポインターの使用例の詳細な説明

以上が@angular/cli V6.0を使ったPWAアプリケーション開発の実践事例を詳しく解説（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。