Angularを使用してプログレッシブWebアプリを構築する方法
序章
プログレッシブウェブアプリは、ネイティブアプリのように動作させるテクノロジーで構築されたウェブアプリケーションです。 プログレッシブウェブアプリの利点は、ネットワークカバレッジの信頼性が低い場合にスムーズに動作できることです。 また、ネイティブアプリとは異なり、インストールは必要ありませんが、通常のWebアプリよりも高速です。
この記事では、 Angular を使用してプログレッシブウェブアプリを構築し、Firebaseを使用してデプロイします。
このチュートリアルのコードは、GitHubで入手できます。
注：現在、このプロセスに役立つ @ angle/pwaパッケージがあります。 このチュートリアルでは、以前の代替アプローチについて説明します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- ローカルマシンにインストールされているGoogleChrome WebBrowserの最新バージョン。
- ChromeにインストールされているLighthouseChrome Extension は、アプリがプログレッシブであるかどうかを後でテストします。
- アプリケーションをFirebaseにアップロードする場合はGoogleアカウント。
このチュートリアルは、ノードv14.5.0およびnpmv6.14.5で検証されました。
ステップ1—新しいAngularプロジェクトを作成する
AngularCLIを使用して新しいプロジェクトを作成できます。 デフォルトでは、Angularはこのチュートリアルのプロジェクトでは使用されないテストファイルを生成します。 この生成を防ぐために、次のコマンドに--skip-testsフラグを追加して、新しいプロジェクトを作成します。
npx @angular/[email protected] 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サイトでも使用できます。
アプリのウェブアプリマニフェストを作成するには、srcフォルダーのルートにmanifest.jsonという名前の新しいファイルが必要です。
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を使用してホーム画面から起動した場合の、アプリのランディングページも指定しました。 theme_colorは、ユーザーが当社のサイトにアクセスしたときにブラウザーUI（ユーザーインターフェイス）が想定する色を指定します。 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アプリマニフェストはビルドフォルダーに追加されません。 これを行うには、.angular-cli.jsonファイルのappsセクションのアセット配列にmanifest.jsonファイルを追加します。
.angular-cli.json
...
"apps": [
{
...
"assets": [
...
"manifest.json"
],
...
注：アプリケーションがAngular 6以降でビルドされている場合は、.angular-cli.jsonではなくangular.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を自動生成するコマンドを実行できます。
ng-pwaディレクトリからnpm installコマンドを実行して、パッケージをインストールします。
npm install --save-dev [email protected]
パッケージがインストールされたら、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
};
precache-config.jsファイルは、リテラルオブジェクトのキーと値のペアを使用してsw-precache-webpack-pluginを構成します。
シングルページアプリケーションを構築するためのフロントエンドフレームワークとしてのAngularは、クライアント側のURLルーティングを使用します。 これは、自動生成されたServiceWorkerによってキャッシュされない任意のURLを生成できることを意味します。 このような状況では、要求されたURLがマップされるHTMLエントリを定義し、navigateFallbackがそれを処理します。 HTMLエントリは、必要なリソースを提供できる必要があります。 このアプリはSPA（シングルページアプリケーション）であり、index.htmlがエントリポイントであるため（任意のURLを処理できます）、staticFileGlobsにキャッシュするために選択したファイルの中にある必要があります。配列。 navigateFallbackWhitelistは空にすることも、navigateFallbackが使用されるURLのタイプまたはパターンを定義する正規表現を含めることもできます。
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ページを生成します。
rel="noopener属性は、セキュリティとパフォーマンスの理由からアンカー要素のtarget属性が_blankに設定されている場合、プログレッシブWebアプリで不可欠です。
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 [email protected]
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ではなくdist/nw-pwaに設定できます。
これで、プログレッシブWebアプリケーションが構築およびデプロイされました。 これで、ツールを使用してテストできます。
ステップ6—灯台でのテスト
Lighthouse は、Googleが作成したChrome拡張機能です。 他のテストに加えて、プログレッシブWebアプリがプログレッシブWebアプリ標準にどの程度準拠しているかをテストするために使用できます。
最高スコアは100％で、このアプリのPWAスコアは91％です。
PWAをテストするには、GoogleChromeWebブラウザーでホストされているアプリを開きます。 Extensions ボタンをクリックし、Lighthouseを選択します。 ウィンドウが表示され、レポートの生成ボタンをクリックするように求められます。 ボタンをクリックすると、灯台の結果を待っていますというメッセージが表示された画面が一時的に表示されます。 テストが完了すると、テスト結果の画面が表示されます。
結論
この記事では、Angularを使用してプログレッシブウェブアプリを構築し、Firebaseを介してデプロイしました。 プログレッシブウェブアプリは、ネイティブアプリと同様のエクスペリエンスをユーザーに提供します。 ただし、PWAは軽量で、はるかに柔軟性があります。
