2019年12月16日月曜日

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


オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。

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

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

(1)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が勝手に作ったような・・・(2回目))

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

(2)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が勝手に作ったような・・・(3回目))

先程と同じように、
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化されているか確認する

,

0 件のコメント:

コメントを投稿