💦

Nuxt.jsでiOSのPWAアイコン＆スプラッシュ対応

2021/05/26に公開

この記事は何

こちらのNuxt.jsプロジェクトでiOSのPWAアイコン＆スプラッシュを対応した際の覚書

前提

Nuxt.jsのnuxt/pwaモジュールは導入済み

nuxt/pwaのデフォルト設定に加えて必要な処置

アイコン

プロジェクトを作成した時点では、nuxtのアイコンが適用されている
一番簡単なのは同じサイズでアイコン画像を用意し、static/icon.pngとして上書き保存する
- そうすると各種必要（※iOS以外にもいろいろ）なサイズのアイコンをnuxt側で自動生成してくれる
- ただしキャッシュが残っていて、nuxtのアイコンから変わってくれない場合がある。その際はnode_modules/.cache/pwa/iconを削除すると良い。

スプラッシュ

スプラッシュはこういうやつ。アプリを起動した際に一瞬表示される画面。
- いらないと言えばいらないけど、初期ロード時間を長く感じさせないためにあっても良い。
Androidはmanifest.jsonを用意して適切な内容を記載しておけば対応してくれるようだが(当方実機未検証)、iOSの場合はスプラッシュ画面を用意して、それをhead内にlinkで記載する必要がある。画像は画面サイズごとに用意する必要あり。　→　面倒…。
そこでpwacompactというモジュールを利用する。アイコンとアプリ名を使っていい感じのスプラッシュを表示してくれる。用意するのはアイコンのみ！

pwacompactの使い方

CDNでの使用が推奨されている。
ただし読み込み時間削減のため可能であれば必要な環境(iOS)だけに配信したい。
そこでhead内に下記スクリプトを仕込む。

if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
}

Nuxtで上記をやりたい場合、どう指定すればよいかは下記の記事が大変参考になります。

上記を指定する以外のポイントは下記の通り
- nuxt/pwa の中で metaモジュールのmobileAppIOSオプションはデフォルトのfalseのままにしたほうが良さそう。trueにすると本記事前半に記載したようにスプラッシュ用画像を生成し、その表示設定までnuxtが行ってくれるが、今回それは使いたくない。
- その上で、nuxt.config.jsの中に下記内容を追記しておく。（必ず必要かどうかは未検証）

export default {
  head: {
    meta: [
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-title', content: 'YourSiteTitle' },
    ]
  }
}

GitHubで編集を提案

Discussion