# 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 モジュールができること

1. 各サイズのアイコン設定は画像一枚でできる
   pwa 設定するなら、各端末の各種アイコンを自前で用意しないといけないが、nuxt pwa モジュール使うことで、アイコン 512px 以上の画像一枚用意するだけで OK！残りの画像全部自動コンパイルしてくれます。
2. workbox オフラインの設定が簡単
   いちいちソース書く必要が減る、設定すればいろいろがすぐにできる
3. モバイルアプリのサポートしてくれる
   アップルの IOS メタサポートapple-mobile-web-app-capable apple-touch-iconなどは自動対応
4. theme_color は自動的に loading バーのカラーに設定される
5. プッシュ通知も oneSignal 設定するだけですぐにできる

# nuxt wpa モジュール不足だと思う点

1. 動的プラッシュ画像（アプリ起動待ち画面）
2. 見つからない。。。

# nuxt wpa ってどうやって使う

1. インストール

# yarn
yarn add @nuxtjs/pwa

# npm
npm i @nuxtjs/pwa

2. nuxt.config.jsファイルにモジュール追加

{
    modules: [
        '@nuxtjs/pwa',
    ],
    wpa: {
    manifest: {
      name: "hapicodeのnuxtjs wpa設定",
      lang: "ja"
    }
  }
}

3. staticディレクトリの直下にicon.pngを置く

512x512px 以上のサイズが必要

以上！

# Manifest does not contain a suitable icon - PNG,SVG or WebP fromatof at least 144px is required

run dev では wpa の確認はできない！アイコン生成されていないので、ワーニングエラーできます。