Building Your First Angular PWA with Ignite UI for Angular

Building Your First Angular PWA with Ignite UI for Angular

AngularプログレッシブWebアプリは、オフラインアクセスやバックグラウンド同期などのネイティブ機能を備えたウェブアプリケーションです。そしてこのブログ記事では、その作り方をご紹介します。

7min read

同じ速度と体験をほんのわずかな時間で提供できるのに、何週間もかけて個別のネイティブアプリを作る必要があるでしょうか?現代の開発チームはもはやゆっくりビルドする余裕はありません。Angular PWAはウェブのリーチとネイティブアプリの性能・性能を組み合わせることでゲームチェンジを成し遂げます。これらのアプリは高速でインストール可能でオフラインで動作するため、ユーザーはブラウザから直接アプリのような体験を得られます。Angularと組み合わせることで、単一のコードベースでデバイス間で信頼性が高く応答性の高い体験を提供できます。

Angularはサービスワーカーやキャッシュのサポートを組み込み、PWA作成を簡素化しますが、Ignite UI for Angularさらに進めて、速度、アクセシビリティ、視覚的一貫性を重視した、あらかじめ構築された高性能UIコンポーネントの完全なスイートを提供しています。

この記事では、Ignite UIを活用して開発を加速し、優れたユーザー体験を提供するために、最初のAngularプログレッシブWebアプリをステップバイステップで構築する方法を学びます。

AngularにおけるPWAとは何ですか?

AngularプログレッシブWebアプリは、オフラインアクセス、バックグラウンド同期、キャッシュ、インストール可能性などのネイティブに似た機能を備えたウェブアプリケーションです。Angularでは、PWAはService Workersによって駆動されており、アプリケーションファイルをローカルで保存・提供することで、ネットワーク接続なしでも即時の読み込みを実現します。

AngularプロジェクトにPWAサポートを追加すると、フレームワークが必要なファイルやレジストレーションロジックを自動的に設定してくれます。これは単一のCLIコマンドで行えます:

ng add @angular/pwa

このコマンドは自動的に:

  • アプリ名、アイコン、テーマカラーを定義するmanifest.webmanifestファイルを追加します。
  • サービスワーカーを登録する。
  • ngsw-config.jsonでキャッシュルールの設定。
  • デスクトップとモバイルの両方でアプリをインストールできるようにします。

舞台裏では、AngularのService WorkerがJavaScriptのバンドル、画像、CSSファイルなどの静的資産をキャッシュしています。また、ngsw-config.jsonで定義したカスタムルールに基づいてAPI応答をキャッシュすることも可能です。これにより、繰り返し訪問してもアプリが即座に開き、オフラインでも安定して機能するように感じられます。

Angularの内蔵ツールはこのプロセスを劇的に簡素化します。キャッシュロジックやマニフェスト設定を手動で管理する必要はありません。すべてが自動的に支えられ最適化されているため、アプリの機能やデザインに専念できます。

Setting Up Your Angular PWA 

ステップ1:新しいAngularプロジェクトを作成する 

ng new angular-pwa-demo 
cd angular-pwa-demo

オプションとして、当社のローコードApp Builder ™を使ってプロジェクトを再起動し、即座にAngularコードを生成することも可能です。その場合はステップ3を飛ばして、アプリをダウンロードしたらnpmインストールを実行するだけです。

Step 2: Add PWA Support 

ng add @angular/pwa

Step 3: Install Ignite UI for Angular 

ng add igniteui-angular

App Builderでプロジェクトを作成しているなら、このステップを省略できます。

Step 4: Start 

実際のPWA(キャッシュとオフラインサポート付き)としてアプリをテストする準備ができたら:

ng build --configuration production 
npm install -g angular-http-server 
angular-http-server --path dist/angular-pwa-demo/browser -p 3200

Ignite UIはデータグリッドやチャートからナビゲーションや入力制御まで、100以上のUIコンポーネントを提供しており、エンタープライズ向けのアプリケーションに対応しています。必要なら、このはじめきガイドに従って正しく運用できます。

あなたのアプリは今やインストール可能で、PWA対応が可能になりました。

Ignite UI for AngularでUIを構築する方法

Ignite UI for Angularをインストールしたら、必要なコンポーネントをインポートしてテンプレートに直接使い、PWAのユーザーインターフェースを構築し始められます。

Example: 

Angular PWA with Ignite UI import code

HTML内のコンポーネントは次のように使えます:

Angular Progressive Web App

 Add a Navbar: 

<igx-navbar title="PWA Dashboard"></igx-navbar>

グリッドを用いたデータの表示: 

<igx-grid [data]="northwindEmployees" primaryKey="employeeID" [allowFiltering]="true" filterMode="excelStyleFilter" class="grid"> 
          <igx-column field="employeeID" dataType="number" header="employeeID" [filterable]="true" [sortable]="true" [selectable]="false"></igx-column> 
          <igx-column field="lastName" dataType="string" header="lastName" [filterable]="true" [sortable]="true" [selectable]="false"></igx-column> 
          <igx-column field="firstName" dataType="string" header="firstName" [filterable]="true" [sortable]="true" [selectable]="false"></igx-column> 
        </igx-grid>

Add a Chart: 

<igx-pie-chart [dataSource]="northwindEmployees" labelMemberPath="title" valueMemberPath="employeeID" class="pie-chart"></igx-pie-chart>

これらの例は簡略化していますが、Ignite UI for AngularでレスポンシブでアクセスしやすいUIを構築することがいかに簡単かを示しています。これらのコンポーネントはモバイル、タッチ、パフォーマンスに最適化されており、これらは現代Angular PWAの重要な特性です。CSSを忘れないでください。

パフォーマンスとオフライン体験の最適化

パフォーマンスと信頼性は、高品質なプログレッシブWebアプリ(PWA)を提供する鍵です。アプリのAngular性能向上ガイドをご覧いただき、そこに示されたベストプラクティスに従って、アプリケーションが高速に読み込まれ、オフラインでシームレスに動作するようにしてください。

1. 現在のパフォーマンスを監査する 

​C hrome DevTools → Lighthouse を使ってパフォーマンスとPWA準備度を測定してください。
​パフォーマンスとパワーアリーの両方で90点以上のスコアを目指してください。

Angular PWA auditing performance

2. レイジーローディングの実装 

必要な時だけモジュールやルートを読み込むことで、アプリの初期バンドルサイズを減らしましょう。

Example: 

Angular PWA lazy-load

3. キャッシュとオフライン戦略の最適化 

AngularのService Worker(ngsw-config.json)を設定し、オフライン使用のために重要な資産やAPIデータをキャッシュできるようにします。Chrome DevTools→ Network → Offerで、ネットワーク接続なしでアプリが正常に読み込まれるか確認してください。

Angular PWA dashboard

4. Leverage Ignite UI’s Optimization 

市場で最高のAngularグリッドのようなIgnite UIコンポーネントは、仮想化と軽量レンダリングを用いて大規模データセットを効率的に表示します。この方法はメモリ使用を最小限に抑え、フレームドロップを減らし、モバイルデバイス上のPWAにとって重要な滑らかなスクロールを実現します。

Here’s an Angular PWA example project: Angular PWA Dashboard 

Ignite UIを使ったシンプルなAngularプログレッシブウェブアプリの例には以下のようなものが含まれていることに注意が必要です:

  • A responsive navbar for navigation. 
  • データを表示するためのIgxGridです。
  • トレンドを可視化するためのIgxCategoryChart。
  • A registered Service Worker for offline support. 

インストール可能でオフライン対応のPWA Angular、本番環境で実行すれば展開できます:

それを見ると、サービスワーカーが登録されてページを管理している証拠です。

まとめ...

Angularでプログレッシブウェブアプリを構築するのは必ずしも複雑である必要はありません。Angularキャッシュ、オフラインモード、マニフェスト設定を担当し、Ignite UI for Angularは使いやすさを向上させ、視覚的な一貫性を維持し、パフォーマンスを最大化する堅牢な最新のUIコンポーネント群を提供します。

これら2つの技術を組み合わせることで、ネイティブモバイル体験に匹敵する速度と応答性でインストール可能な高性能なウェブアプリを作成できます。

AngularとIgnite UIで構築されたPWAは、開発チームの市場投入までの時間を短縮し、すべてのデバイスで優れた性能を提供します。分析ダッシュボード、社内ビジネスツール、顧客向けアプリケーションなど、どのような組み合わせであっても、一貫した品質、保守性、シームレスなユーザー体験を実現します。

今日から最初のAngular PWAの構築を始め、アプリのようなパフォーマンスをウェブに届けましょうIgnite UI for Angular。

Angular How To
デモを予約