[ 目次 ]

• はじめに
• "@nuxtjs/pwa"のインストール
• nuxt.config.jsの設定変更
• icon.pngを用意
• 確認
• 最後に
• 参考記事

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNuxt.jsで構築された本ブログをPWA対応していきたいと思います。

"@nuxtjs/pwa"のインストール

■ npmを利用する場合

$ npm install @nuxtjs/pwa --save

■ yarnを利用する場合

$ yarn add @nuxtjs/pwa

nuxt.config.jsの設定変更

modules に @nuxtjs/pwa を追加します。
また、manifestの設定を追加しましょう

module.exports = {
  ・・・
  modules: [
    '@nuxtjs/pwa'
  ],
  manifest: {
    name: "なかむ🇭🇰エンジニアブログ",
    lang: 'ja'
  }
  ・・・
};

icon.pngを用意

icon.pngは 512px × 512px が推奨です。staticフォルダ直下に配置します。
今回はfaviconで利用していた画像をicon.pngとして配置しました。

確認

Netlifyを利用してブログ運用をしていますので、githubにpushしNetlifyにデプロイしてから確認を進めます。

iphone + safariで確認していきます。

1. safariでブログを開きます。
2. safariの下部にある"共有"アイコンを押し、"ホーム画面に追加"からホーム画面にアプリを追加していきます
   → アイコンは"icon.png"の画像が利用されます
3. ホーム画面のアイコンからアプリを開きます。専用アプリとして開くことを確認してください。
   →PWA対応していないアプリの場合はsafariでWEBページが開きます。

※ オフラインのキャッシュ表示を試してみたのですが、上手くいきませんでした・・・。ContentfulのAPIにリクエストを投げていてエラーになっているのかなと思っているのですが、引き続き調査したいと思います。

最後に

PWA対応していきましたが、正直深掘りしてないので知識が浅いです。
まだNuxt.js・Vue.jsも初心者同然なので本ブログを通して手が出せる内容からノウハウを蓄積して業務に繋げていきたいと思います。

参考記事

• Nuxt.js で作った静的サイトを PWA 化する