Angular で作られたプロジェクトをPWAにしてみよう。（中編）PWA化の実施

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

前編（Angular 7 から 8 へのアップデート）の続きです。
今回は、実際にPWA化を行って行きます。
既にPWA化作業が終わっていて、正しくPWA化されているかを確認したい方は、
後編（正しくPWA化されているか確認する）をご覧ください。

では、早速PWA化を行って行きましょう。

（１）PWAパッケージの追加

前編で、Angular8にアップデートしたプロジェクトを使用します。
そのプロジェクトにPWAパッケージを追加します。

追加のコマンドは「ng add @angular/pwa」です。

$ng add @angular/pwa
+ @angular/pwa@0.803.5
added 5 packages from 2 contributors and audited 22482 packages in 22.952s
Installed packages for tooling via npm.
Could not read file (/src/@app/app.module.ts).

エラーになりました。「app.module.ts」が読めないと言っていますね・・・。

「app.module.ts」をimportしているのは、確か「main.ts」なので、そちらを見てみましょう。

import { AppModule } from '@app/app.module';

「@app」になっているのが駄目なのでしょうね。
（でも、元々これはAngular CLIが勝手に作ったような・・・）

とりあえず、

import { AppModule } from './app/app.module';

に修正しました。

では、再度、「ng add @angular/pwa」を実行します。

$ng add @angular/pwa
CREATE ngsw-config.json (620 bytes)
CREATE src/manifest.webmanifest (1119 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (5936 bytes)
UPDATE package.json (2638 bytes)
UPDATE src/app/app.module.ts (1597 bytes)
UPDATE src/index.html (542 bytes)

無事に完了したようですね。（*1）
*1）警告が出る場合、「npm audit fix」しておきましょう

では、自動作成・更新されたファイルについて、エラーが出ていないか確認しておきましょう。

私が試したプロジェクトだと、「app.module.ts」がエラーになっていました。

import { environment } from '@environment/environment'; // ←元々

import { ServiceWorkerModule } from '@angular/service-worker'; // ←追加された行
import { environment } from '../environments/environment'; // ←追加された行

元々の表記が「@environment」だったので、別パスと判断して、新たな「environment」を追加したのですかね。
（でも、元々これはAngular CLIが勝手に作ったような・・・（２回目））

まあ、ここは、追加された行を残して、元々の行を削除しようと思います。

（２）App Shellの導入

続いて、App Shellを導入します。
App Shellは、簡単言うと、画面のキャッシュを行う機構の一つです。
詳細は、この辺を参照してください。

Angularに導入するには、以下のコマンドを実行します。

ng generate app-shell --client-project my-app --universal-project server-app

・my-app はクライアントアプリケーションの名前です。
・server-app はユニバーサル (またはサーバー) アプリケーションの名前です。

と言う事で、今回は、以下のコマンドを実行します。

ng generate app-shell --client-project koma-system-pwa --universal-project koma-system-pwa

エラーになりました。

Could not find /src/app/@app/core/containers/app/app.component.ts.

先程までと同じ、「@app」問題ですね。
（でも、元々これはAngular CLIが勝手に作ったような・・・（３回目））

先程と同じように、

import { AppComponent } from '@app/core/containers/app/app.component';

上記を下記のように書き換えます。

import { AppComponent } from './core/containers/app/app.component';

弊社のプロジェクトの場合、ちょっと特殊な場所に「app.component」を配置しているので、それぞれ環境にあったパスに修正してください。

それでは、再度、実行してみます。

$ng generate app-shell --client-project koma-system-pwa --universal-project koma-system-pwa
CREATE src/main.server.ts (220 bytes)
CREATE src/app/app.server.module.ts (590 bytes)
CREATE src/tsconfig.server.json (270 bytes)
CREATE src/app/app-shell/app-shell.component.css (0 bytes)
CREATE src/app/app-shell/app-shell.component.html (24 bytes)
CREATE src/app/app-shell/app-shell.component.spec.ts (643 bytes)
CREATE src/app/app-shell/app-shell.component.ts (280 bytes)
UPDATE package.json (2679 bytes)
UPDATE angular.json (7231 bytes)
UPDATE src/main.ts (469 bytes)
UPDATE src/app/app.module.ts (1650 bytes)

これでPWA化は完了となります。簡単ですね。

後は、自動生成された画像（src/assets/icons）をそれぞれのプロジェクト用で置き換えてください。

では、次回で最後、Chrome デベロッパーツールのAuditsで、正しくPWA化されている事を確認するところまでやって行きます

次回：Angular で作られたプロジェクトをPWAにしてみよう。（後編）正しくPWA化されているか確認する

Angular , PWA