Ionic4でPWA対応してみたので、注意点を２つ述べる #Angular

この記事は、Ionic Frameworkアドベントカレンダー3日目の記事です。

個人でIonicを使って開発している、Googleカレンダーと連携する日程調整アプリ「アイテマス」をPWA対応しました。その際に、はまったり忘れがちな設定が２つあるので、それらについてまとめます。
Ionicのバージョンは下記のとおりです。

Ionic CLI : 5.4.5 (***)
Ionic Framework : @ionic/angular 4.11.2

基本的に公式のドキュメント通りに行えばとりあえずPWA化します。その他の細かい調整はGoogle Chromeの開発者ツールを使って行ったらOKです（Lighthouseというよさげなツールもあるみたいですね）。

スプラッシュスクリーン対応

こういうGeneratorを使っておけば問題なくいけると思いきや、iOSで表示されませんでした。どうやらしっかりとorientationパラメータなどもセットしないといけないようです。

PWAのSprach Screen対応メモ

スプラッシュスクリーンがないと、PWAとしてホーム画面に設置し、しばらくしてからアプリを起動したときなど、画面全体が白い状態がしばらく続いて不具合のようにみえてしまいます。体感速度を上げるためにも、必ずスプラッシュスクリーンを設定して、きちんと表示されているか確認しましょう。

更新検知の仕組み

僕の設定がおかしいのかもしれませんが、PWAとしてホーム画面に設置したアプリはかなり強力なキャッシュが作られるので、サーバーに再ビルドしたPWAアプリを設置してもなかなか更新されません。さらに、ホーム画面に設置するとブラウザの更新ボタンも押すことができなくなるので、ユーザーに手動更新してもらうのも難しいです。

というわけで、サーバー側のコードが更新されたらPWAの方で更新通知アラートを表示し、それをタップしたらプログラム側から強制的に更新処理が走るようにします。

具体的にはこの記事を参考に、下記のようなserviceを作って、app.module.tsのprovidersに設定しておけばOKです。

pwa-update.service.ts

import { Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

import {
  AlertController
} from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class PwaUpdateService {

  constructor(
    private swUpdate: SwUpdate,
    private alertCtrl: AlertController,
  ) {
    this.swUpdate.available.subscribe(evt => {
      // an update is available, add some logic here.
      this.showUpdateToast();
    });
  }

  async showUpdateToast() {
    const alert = await this.alertCtrl.create({
      header: 'アプリの更新通知',
      message: 'アプリの新バージョンがあります。ページを更新してください。',
      buttons: [{
        text: '更新する',
        handler: () => {
          window.location.reload();
          return true;
        }
      }]
    });
    await alert.present();
  }
}

このコードによって、サーバー側でPWA用のソースコードが更新されたら、「アプリの新バージョンがあります。ページを更新してください。」といったアラートが表示されるようになります。

以上になります。
これらのふるまいは、Googleカレンダーと連携する日程調整アプリ「アイテマス」で確認できると思うのでぜひお試しください。