@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 サイトの他の関連記事に注目してください。

推奨読書:

vueで個人情報を表示しパスワードを変更する方法

JSでよく発生するバグやエラーについて

以上が@angular/cli V6.0 を使用して PWA アプリケーションを直接開発する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。