メインコンテンツへスキップ
バージョン：v8

AngularにおけるProgressive Web Apps

AngularアプリをPWAにする​

PWAの2つの主要な要件は、サービスワーカーとWebマニフェストです。これらを手動でアプリに追加することもできますが、Angularチームはこれを自動化するために使用できる@angular/pwaパッケージを提供しています。

@angular/pwaパッケージは、サービスワーカーとアプリマニフェストをアプリに自動的に追加します。このパッケージをアプリに追加するには、以下のコマンドを実行します。

ng add @angular/pwa

このパッケージの追加後、ionic build --prodを実行すると、wwwディレクトリがPWAとしてデプロイできるようになります。

注記

デフォルトでは、@angular/pwaパッケージにはアプリアイコンとしてAngularロゴが付属しています。アプリ名を使用するようにマニフェストを更新し、アイコンも置き換えるようにしてください。

注記

サービスワーカーや多くのJavaScript API（位置情報など）のような機能は、アプリがセキュアなコンテキストでホストされている必要があります。ホスティングサービスを通じてアプリをデプロイする場合は、サービスワーカーを最大限に活用するためにHTTPSが必要であることに注意してください。

サービスワーカーの設定​

@angular/pwaを追加した後、プロジェクトのルートに新しいngsw-config.jsonファイルが作成されます。このファイルは、Angularのサービスワーカーメカニズムがアセットのキャッシュをどのように処理するかを設定する役割を果たします。デフォルトでは、以下が提供されます。

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

ここに2つのセクションがあります。1つはアプリ固有のリソース（JS、CSS、HTML）用で、もう1つはアプリがオンデマンドでロードするアセット用です。アプリに応じて、これらのオプションをカスタマイズできます。詳細なガイドについては、Angularチームの公式ガイドを参照してください。

デプロイ​

Firebase​

Firebaseホスティングは、CDNによる高速な応答時間、デフォルトで有効になっているHTTPS、HTTP/2プッシュのサポートなど、Progressive Web Appsに多くのメリットをもたらします。

まず、まだない場合は、Firebaseでプロジェクトを作成します。

次に、ターミナルでFirebase CLIをインストールします。

npm install -g firebase-tools
注記

firebase-toolsを初めて使用する場合は、firebase loginコマンドでGoogleアカウントにログインしてください。

Firebase CLIがインストールされたら、Ionicプロジェクト内でfirebase initを実行します。CLIは以下のようにプロンプトを表示します。

「このフォルダに設定するFirebase CLI機能を選択してください。」 「ホスティング：Firebaseホスティングのファイルを設定し（オプションで）GitHub Actionsデプロイを設定します」を選択します。

新しいFirebaseプロジェクトを作成するか、既存のプロジェクトを選択します。

「このディレクトリのデフォルトのFirebaseプロジェクトを選択してください。」 Firebaseウェブサイトで作成したプロジェクトを選択します。

「公開ディレクトリとして何を使用しますか？」 「www」と入力します。

注記

次の質問に答えることで、アプリでのルーティング、ハードリロード、ディープリンクが機能するようになります。

「シングルページアプリとして設定しますか（すべてのURLを/index.htmlに書き換えますか）？」 「はい」と入力します。

「ファイルbuild/index.htmlは既に存在します。上書きしますか？」 「いいえ」と入力します。

GitHubで自動ビルドとデプロイを設定しますか？ 「はい」と入力します。

どのGitHubリポジトリにGitHubワークフローを設定しますか？ プロジェクト名を入力します。

すべてのデプロイの前にビルドスクリプトを実行するワークフローを設定しますか？ 「はい」と入力します。

すべてのデプロイの前に実行するスクリプトは？ npm ci && npm run buildと入力します。

PRがマージされたときにサイトのライブチャンネルに自動的にデプロイを設定しますか？ 「はい」と入力します。

サイトのライブチャンネルに関連付けられたget hookedブランチの名前は何ですか？ プロジェクトのメインブランチ名を入力します。

firebase.json設定ファイルが生成され、アプリのデプロイが設定されます。

最後に、キャッシュヘッダーが正しく設定されていることを確認する必要があります。これを行うには、firebase.jsonファイルにheadersスニペットを追加します。完全なfirebase.jsonは次のようになります。

{
  "hosting": {
    "public": "www",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "ngsw-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

firebase.jsonのプロパティの詳細については、Firebaseドキュメントを参照してください。

次に、以下のコマンドを実行して、最適化されたバージョンのアプリをビルドします。

ionic build --prod

最後に、以下のコマンドを実行してアプリをデプロイします。

firebase deploy

これが完了すると、アプリがライブになります。

目次

このページを編集する