Angularを使用してプログレッシブWebアプリを構築する方法

投稿日: 2022-04-20 2022-10-13
タグ: Development, javascript

序章

プログレッシブウェブアプリは、ネイティブアプリのように動作させるテクノロジーで構築されたウェブアプリケーションです。プログレッシブウェブアプリの利点は、ネットワークカバレッジの信頼性が低い場合にスムーズに動作できることです。また、ネイティブアプリとは異なり、インストールは必要ありませんが、通常のWebアプリよりも高速です。

この記事では、 Angular を使用してプログレッシブウェブアプリを構築し、Firebaseを使用してデプロイします。

このチュートリアルのコードは、GitHubで入手できます。

注：現在、このプロセスに役立つ @ angle/pwaパッケージがあります。このチュートリアルでは、以前の代替アプローチについて説明します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
ローカルマシンにインストールされているGoogleChrome WebBrowserの最新バージョン。
ChromeにインストールされているLighthouseChrome Extension は、アプリがプログレッシブであるかどうかを後でテストします。
アプリケーションをFirebaseにアップロードする場合はGoogleアカウント。

このチュートリアルは、Nodev14.5.0および npm v6.14.5。

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

AngularCLIを使用して新しいプロジェクトを作成できます。デフォルトでは、Angularはこのチュートリアルのプロジェクトでは使用されないテストファイルを生成します。この生成を防ぐために、 --skip-tests 次のコマンドにフラグを立てて、新しいプロジェクトを作成します。

npx @angular/cli@10.0.0 new ng-pwa --skip-tests

いくつかの構成オプションによってプロンプトが表示されます。

Output
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

これにより、ng-pwaという名前の新しいプロジェクトディレクトリが作成されます。

新しいディレクトリに移動します。

cd ng-pwa

スタータープロジェクトができたので、Webアプリマニフェストの作成に進むことができます。

ステップ2—Webアプリマニフェストを作成する

Webアプリマニフェストは、Webアプリケーションがユーザーのホーム画面に保存できるようにする構成を含むJSONファイルです。また、ホーム画面から起動したときの外観と動作も定義します。 WebアプリマニフェストはプログレッシブWebアプリの基本要件ですが、どのWebサイトでも使用できます。

アプリのウェブアプリマニフェストを作成するには、という名前の新しいファイルが必要です manifest.json のルートで src フォルダ：

nano src/manifest.json

以下のコンテンツをファイルに追加します。

src /manifest.json

{
   "name": "Angular Progressive Web App",
   "short_name": "Ng-PWA",
   "start_url": "./",
   "theme_color": "#008080",
   "background_color": "#008B8B",
   "display": "standalone",
   "description": "A PWA that is built with Angular",
   "icons": [
       {
           "src": "/assets/images/icons/icon-16x16.png",
           "sizes": "16x16",
           "type": "image/png"
       },
       {
            "src": "/assets/images/icons/icon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-150x150.png",
            "sizes": "150x150",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-180x180.png",
            "sizes": "180x180",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
   ]
}

Webアプリのマニフェストでは、 name これは、ユーザーのホーム画面のアプリアイコンと short_name 長すぎる場合は、それが置き換えられます。また、ホーム画面から起動したときのアプリのランディングページを start_url. The theme_color ユーザーが当サイトにアクセスしたときにブラウザのUI（ユーザーインターフェイス）が想定する色を指定します。 The background_color プロパティは、ユーザーがホーム画面からアプリを起動したときにアプリアイコンが表示される背景の色を制御します。と display、ユーザーがサイトにアクセスしたときにブラウザのUIを非表示にするかどうかを指定します。

ユーザーはさまざまな画面サイズのさまざまな種類のデバイスを使用してサイトにアクセスすることを期待しているため、アプリのアイコンを複数の次元で複製する必要があります。

画像アセットの追加が完了したら、に移動します index.html ファイルを作成し、以下をに追加します <head> セクション：

src / index.html

...
<head>
  ...
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#008080">
</head>

Angularに追加するように指示しない限り、Webアプリマニフェストはビルドフォルダーに追加されません。これを行うには、 manifest.json のアセット配列へのファイル apps のセクション .angular-cli.json ファイル：

.angular-cli.json

...
"apps": [
    {
     ...
      "assets": [
       ...
        "manifest.json"
      ],
...

注：アプリケーションがAngular 6以降でビルドされている場合は、編集する必要があります angular.json それ以外の .angular-cli.json:

angle.json

...
"projects": {
  "ng-pwa": {
    ...
    "architect": {
      "build": {
        ...
        "assets": [
          "src/manifest.json"
        ],
...

作成後 manifest.json、変更 index.html、および編集 angular-cli.json （また angular.json）、次のステップの準備が整いました。

ステップ3—サービスワーカーの追加

サービスワーカーは、プログレッシブWebアプリの基盤です。 JavaScriptで記述されており、重要なアセットとファイルをキャッシュするのに役立ちます。これにより、ネットワークカバレッジが利用できない、または信頼できない場合でも、アプリの機能を維持できます。サービスワーカーは、他の状況の中でサーバーからの要求を傍受して応答を管理することもできます。

アプリを本番環境にプッシュする前に、webpackを使用してアプリをビルドする必要があります。サービスワーカーは、ビルドファイルを追跡およびキャッシュできる必要があります。

sw-precache-webpack-pluginを使用 npm パッケージ、パッケージをインストールして構成します。

注：現在、 sw-precache-webpack-plugin workbox-webpack-pluginからGenerateSWを使用することをお勧めします。

次に、ビルドフォルダーにServiceWorkerを自動生成するコマンドを実行できます。

を実行します npm install からのコマンド ng-pwa パッケージをインストールするディレクトリ：

npm install --save-dev sw-precache-webpack-plugin@1.0.0

パッケージがインストールされたら、という名前のファイルを作成します precache-config.js:

nano precache-config.js

以下をファイルに追加します。

precache-config.js

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
    navigateFallback: '/index.html',
    navigateFallbackWhitelist: [],
    stripePrefix: 'dist',
    root: 'dist/',
    plugins:[
        new SWPrecacheWebpackPlugin({
            cacheId: 'ng-pwa',
            filename: 'service-worker.js',
            staticFileGlobs: [
                'dist/index.html',
                'dist/**.js',
                'dist/**.css'
            ],

        })
    ],
    stripePrefix: 'dist/assets',
    mergeStaticsConfig: true
};

The precache-config.js ファイルは sw-precache-webpack-plugin リテラルオブジェクトのキーと値のペアを使用します。

シングルページアプリケーションを構築するためのフロントエンドフレームワークとしてのAngularは、クライアント側のURLルーティングを使用します。これは、自動生成されたServiceWorkerによってキャッシュされない任意のURLを生成できることを意味します。このような状況では、要求されたURLがマップされるHTMLエントリを定義し、 navigateFallback それを処理します。 HTMLエントリは、必要なリソースを提供できる必要があります。私たちのアプリはSPA（シングルページアプリケーション）であるため、 index.html はエントリポイントであり、任意のURLを処理できます。したがって、キャッシュするために選択されたファイルの中にある必要があります。 staticFileGlobs 配列。 navigateFallbackWhitelist 空にすることも、URLのタイプまたはパターンを定義する正規表現を含めることもできます。 navigateFallback に使用されます。

構成方法をより深く理解するため sw-precache-webpack-plugin、そのドキュメントをお読みください。

Service Workerのセットアップを完了するために、カスタムを作成します npm アプリをビルドし、ビルドフォルダーにServiceWorkerファイルを自動生成するために使用されるスクリプトまたはコマンド。に移動します package.json ファイルし、以下を追加します scripts:

package.json

 ...
 "scripts": {
    ...
    "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
  },
 ...

インストール後 sw-precache-webpack-plugin、作成 precache-config.js、および編集 package.json、次のステップの準備が整いました。

ステップ4—ビューを作成する

私たちの主な焦点はAngularを使用してプログレッシブウェブアプリを構築するプロセスであるため、ビューは1つだけです。

編集 app.component.html コンテンツを次のコードに置き換えます。

src / app / app.component.html

<div class="container">
  <h1>
    A Progressive Web App Built with Angular.
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">
  <h2>Get Started With Progressive Web Apps:</h2>
  <ul>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>
    </li>
  </ul>
</div>

このコードは、画像、テキスト、および3つのリンクを含むWebページを生成します。

The rel="noopener アンカー要素の場合、プログレッシブWebアプリでは属性が不可欠です。 target 属性がに設定されている _blank セキュリティとパフォーマンスの理由から。

編集 styles.css コンテンツを次のコードに置き換えます。

src / styles.css

body {
    background-color: teal;
}

.container {
    text-align: center;
}

ul {
    list-style: none;
}

h1, h2, a {
    color: white;
}

このコードは、青緑色の背景色を作成し、テキストを中央に配置し、テキストに白色を与えます。

これでビューが完了し、アプリのデプロイに進むことができます。

ステップ5—アプリをデプロイする

Service Workerは、プログレッシブWebアプリの心臓部です。ただし、Service Workerが正しく機能するには、安全な接続を介してアプリを提供する必要があります。そのため、安全な接続を介してホストするFirebaseにアプリをデプロイします。このステップでは、アプリをFirebaseにデプロイします。

開始するには、firebase.google.comにアクセスしてください。アカウントをまだお持ちでない場合は、コンソールにアクセスできるようにアカウントを作成してください。コンソールから、新しいFirebaseプロジェクトを作成します。

ログインしたら、右上隅にあるコンソールに移動リンクをクリックします。コンソールページで、プロジェクトの作成を選択します。プロジェクトの名前の入力を求められます。また、GoogleAnalyticsを有効にするように求められます。このチュートリアルでは、GoogleAnalyticsは必要ありません。

プロジェクトの作成をクリックして、プロセスが完了するのを待ちます。

プロジェクトが作成されたら、続行をクリックしてプロジェクトダッシュボードに移動できます。このチュートリアルでは、開発セクションとホスティングページに関心があります。

これで、コマンドターミナルに戻ることができます。を実行します npm install インストールするコマンド firebase-tools グローバルにパッケージ化：

npm install -g firebase-tools@8.4.3

The firebase-tools パッケージを使用すると、コマンドターミナルからFirebaseにアプリをテスト実行してデプロイできます。

インストールが完了したら、展開の準備としてアプリをビルドする必要があります。

Angularアプリをビルドし、Service Workerを自動生成するには、次のコマンドを実行します。 ng-pwa ディレクトリ：

npm run pwa

これにより、前に作成したカスタムスクリプトが実行され、アプリが本番環境に対応できるようになります。

次に、Firebaseをアプリに紹介します。次のコマンドを実行して、Firebaseにログインします。

firebase login

この時点で、資格情報の入力を求められます。ターミナルにアカウント情報を入力します。

認証されたら、次のコマンドを実行してプロジェクトのFirebaseを初期化します。

firebase init

次に、次のように質問に答えます。

Are you ready to proceed? (Y/n) = Y
Which Firebase CLI features do you want to setup for this folder? = Hosting
Select a default Firebase project for this directory = Your-Firebase-Project-Name
What do you want to use as your public directory? = dist
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) = Y
File dist/index.html already exists. Overwrite? (y/N) = N

アプリをデプロイする準備が整いました。次のコマンドを実行して、アプリをFirebaseにデプロイします。

firebase deploy

最後に、次のコマンドを実行してアプリを表示します。

firebase open hosting:site

トラブルシューティング

アプリの代わりに「FirebaseHostingSetupComplete」メッセージが表示された場合は、 index.html. で再構築 npm run pwa, firebase init、上書きする場合は必ず「いいえ」を選択してください index.html.

構成によっては、アプリが下に存在する場合があります "ng-pwa" （Angularプロジェクトの名前）。その間 firebase init、パブリックディレクトリを次のように設定できます dist/nw-pwa それ以外の dist これを避けるために。

これで、プログレッシブWebアプリケーションが構築およびデプロイされました。これで、ツールを使用してテストできます。

ステップ6—灯台でのテスト

Lighthouse は、Googleが作成したChrome拡張機能です。他のテストに加えて、プログレッシブWebアプリがプログレッシブWebアプリ標準にどの程度準拠しているかをテストするために使用できます。

最高スコアは100％で、このアプリのPWAスコアは91％です。

PWAをテストするには、GoogleChromeWebブラウザーでホストされているアプリを開きます。 Extensions ボタンをクリックし、Lighthouseを選択します。ウィンドウが表示され、レポートの生成ボタンをクリックするように求められます。ボタンをクリックすると、灯台の結果を待っていますというメッセージが表示された画面が一時的に表示されます。テストが完了すると、テスト結果の画面が表示されます。

結論

この記事では、Angularを使用してプログレッシブウェブアプリを構築し、Firebaseを介してデプロイしました。プログレッシブウェブアプリは、ネイティブアプリと同様のエクスペリエンスをユーザーに提供します。ただし、PWAは軽量で、はるかに柔軟性があります。

getdocs

13036