title | emoji | type | topics | published | |||
---|---|---|---|---|---|---|---|
Nuxt.jsでiOSのPWAアイコン&スプラッシュ対応 |
💦 |
tech |
|
true |
- こちらのNuxt.jsプロジェクトでiOSのPWAアイコン&スプラッシュを対応した際の覚書
- Nuxt.jsのnuxt/pwaモジュールは導入済み
- プロジェクトを作成した時点では、nuxtのアイコンが適用されている
- 一番簡単なのは同じサイズでアイコン画像を用意し、
static/icon.png
として上書き保存する- そうすると各種必要(※iOS以外にもいろいろ)なサイズのアイコンをnuxt側で自動生成してくれる
- ただしキャッシュが残っていて、nuxtのアイコンから変わってくれない場合がある。その際は
node_modules/.cache/pwa/icon
を削除すると良い。
-
スプラッシュはこういうやつ。アプリを起動した際に一瞬表示される画面。
-
Androidは
manifest.json
を用意して適切な内容を記載しておけば対応してくれるようだが(当方実機未検証)、iOSの場合はスプラッシュ画面を用意して、それをhead
内にlink
で記載する必要がある。画像は画面サイズごとに用意する必要あり。 → 面倒…。 -
そこで
pwacompact
というモジュールを利用する。アイコンとアプリ名を使っていい感じのスプラッシュを表示してくれる。用意するのはアイコンのみ!
- CDNでの使用が推奨されている。
- ただし読み込み時間削減のため可能であれば必要な環境(iOS)だけに配信したい。
- そこで
head
内に下記スクリプトを仕込む。
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
- Nuxtで上記をやりたい場合、どう指定すればよいかは下記の記事が大変参考になります。
https://qiita.com/ToshioAkaneya/items/17fa689734971171a86d
- 上記を指定する以外のポイントは下記の通り
- nuxt/pwa の中で
meta
モジュールのmobileAppIOS
オプションはデフォルトのfalseのままにしたほうが良さそう。trueにすると本記事前半に記載したようにスプラッシュ用画像を生成し、その表示設定までnuxtが行ってくれるが、今回それは使いたくない。 - その上で、
nuxt.config.js
の中に下記内容を追記しておく。(必ず必要かどうかは未検証)
- nuxt/pwa の中で
export default {
head: {
meta: [
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'apple-mobile-web-app-title', content: 'YourSiteTitle' },
]
}
}