nuxtjs の wpa を実装した時のメモ
wpa とは
そもそも WPA ってなに?って説明からします。WPS ではなく WPA ね。情報処理試験受けたことある人なら wifi の通信暗号化保護技術のことね WPA2 もあるでしょうと即答するはずだが、ここな wifi のことではなく web サイトと関連する話!wep wpa ではなく web wpa!技術的に wifi の wpa が先に出ているので、web wpa でググってもどうしても wifi の方が先に出ます。
==web の wpa は web progressive app (opens new window) の略!==説明はグーグル先生にたくさんあります。簡単にいうと、web の技術使って携帯アプリみたいのアプリ作る技術!
nuxtjs とは。。。
js とは。。。
切りがないかもしれません。グーグル先生は何でもしている!
nuxt wpa モジュールができること
- 各サイズのアイコン設定は画像一枚でできる
pwa 設定するなら、各端末の各種アイコンを自前で用意しないといけないが、nuxt pwa モジュール使うことで、アイコン 512px 以上の画像一枚用意するだけで OK!残りの画像全部自動コンパイルしてくれます。 - workbox オフラインの設定が簡単
いちいちソース書く必要が減る、設定すればいろいろがすぐにできる - モバイルアプリのサポートしてくれる
アップルの IOS メタサポートapple-mobile-web-app-capable
apple-touch-icon
などは自動対応 - theme_color は自動的に loading バーのカラーに設定される
- プッシュ通知も oneSignal 設定するだけですぐにできる
nuxt wpa モジュール不足だと思う点
- 動的プラッシュ画像(アプリ起動待ち画面)
- 見つからない。。。
nuxt wpa ってどうやって使う
- インストール
nuxt.config.js
ファイルにモジュール追加
static
ディレクトリの直下にicon.png
を置く
512x512px 以上のサイズが必要
以上!
Manifest does not contain a suitable icon - PNG,SVG or WebP fromatof at least 144px is required
run dev では wpa の確認はできない!アイコン生成されていないので、ワーニングエラーできます。