#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-capableapple-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
  1. nuxt.config.jsファイルにモジュール追加
{
    modules: [
        '@nuxtjs/pwa',
    ],
    wpa: {
    manifest: {
      name: "hapicodeのnuxtjs wpa設定",
      lang: "ja"
    }
  }
}
  1. staticディレクトリの直下にicon.pngを置く

512x512px 以上のサイズが必要

以上!

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

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

2020-04-30
  • nuxtjs