# 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
  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

関連記事

Nuxtjs 3 に Ant design Vue を使う
Nuxtjs build WARNING in entrypoint size limit
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
楽天 GOLD に Nuxt で作った HP デプロイ公開した話
web 開発でよく使うリダイレクトと nuxtjs redirect
localStorage is not defined に遭遇した時の対応
vuejs スクロールでナビバー表示非表示
nuxtjs のページごと head の title description 変更
Nuxtjs に iview 4.0 入れた動かしてみた