<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の記事はこのサイトをPWAにしたよと報告と<br>Next.jsでのPWAの仕方を書いていきます。</p><h2 id="hc4fc4a6bbf">PWAとは</h2><p><span style="color:#333333">P</span>WAはプログレッシブウェブアプリ(Progressive web apps)の略で、<br>ウェブアプリをネイティブアプリのように使えるようにする仕組みのことです。</p><h2 id="h467bf686e0">実際にやっていく</h2><p>以下のコマンドを用いて、<a href="https://www.npmjs.com/package/next-pwa" target="_blank" rel="noopener noreferrer">next-pwa</a>をインストールします。</p><pre><code>$ npm install next-pwa</code></pre><p><br>インストール後、<code>next.config.js</code>に以下を記述。</p><pre><code>const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
  },
});</code></pre><p><br>PWA実装に必要なものは</p><ul><li>アイコン</li><li>App Manifest（manifest.json）</li><li>Service Worker</li></ul><p>他にもWEBサイトのURLが<code>https</code>でないといけないなど様々な条件があります。詳しくは<a href="https://flxy.jp/article/628" target="_blank" rel="noopener noreferrer">こちら</a>。<br><br>そこで便利なのがこちらの<a href="https://ao-system.net/favicongenerator/" target="_blank" rel="noopener noreferrer">様々なファビコンを一括生成。favicon generator</a><br>こちらでアイコンとApp Manifestなどが作られるので、全て<code>publicディレクトリ</code><br> に格納してください。<br><br>格納後、manifest.jsonを編集します。<br>※下記マニフェストはこのサイトでのマニフェストです。</p><pre><code>{
  "name": "Watataku's ブログ",
  "short_name": "ブログ",
  "description": "",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#fff",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}</code></pre><p><br>編集後、src/pagesディレクトリに<code>_document.tsx</code>を作成し、<br>以下のように<code>Head</code>のなかでアイコン、manifest.jsonなどを読み込んでいきます。</p><pre><code>import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";

class MyDocument extends Document {
  render() {
    return (
      &lt;Html lang="ja-JP" dir="ltr"&gt;
        &lt;Head&gt;
          {/* windows */}
          &lt;meta
            name="msapplication-square70x70logo"
            content="/site-tile-70x70.png"
          /&gt;
          &lt;meta
            name="msapplication-square150x150logo"
            content="/site-tile-150x150.png"
          /&gt;
          &lt;meta
            name="msapplication-wide310x150logo"
            content="/site-tile-310x150.png"
          /&gt;
          &lt;meta
            name="msapplication-square310x310logo"
            content="/site-tile-310x310.png"
          /&gt;
          &lt;meta name="msapplication-TileColor" content="#000" /&gt;


          {/* safari */}
          &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
          &lt;meta name="apple-mobile-web-app-status-bar-style" content="#000" /&gt;
          &lt;meta name="apple-mobile-web-app-title" content="myapp" /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon-180x180.png"
          /&gt;
          {/* 一般 */}
          &lt;meta name="application-name" content="myapp" /&gt;
          &lt;meta name="theme-color" content="#000" /&gt;
          &lt;link rel="icon" sizes="192x192" href="/icon-192x192.png" /&gt;
          &lt;link rel="icon" href="/favicon.ico" /&gt;
          &lt;link rel="manifest" href="/manifest.json" /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    );
  }
}

export default MyDocument;</code></pre><p><br></p><h2 id="h6fd83e2648">PWAの確認</h2><p>localhostで開き、デベロッパーツールを見るとServiceWorkerが登録されていることがわかります。<br>一回読み込んでしまえば、オフラインにして再読み込みしてもちゃんと読み込まれます。これでオフラインで動作する事は確認はできました！<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0b9672f5988e442996efd52a44599be5/Watataku_s_%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99-3.png" alt=""><br>また、右上に以下のダウンロードボタンも確認できます。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0449632c209e4c12a7f703963bcccd4d/Watataku_s_%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99-2.png" alt=""></p><h2 id="he88af0846d">追記(2022.01.27)</h2><p>PWAになっていない問題。<br><a href="https://qiita.com/take_3/items/fe178568498d4589453b" target="_blank" rel="noopener noreferrer">この記事</a>で解決できました。</p><h2 id="hdd6c10bcaf">追記(2023.06.11)</h2><p><code>next-pwa</code>の設定が方法が<strong>5.6</strong>から変わっていました。<br>下記のように<code>next.config.js</code>を書き換えてください。出ないとエラりますw</p><pre><code> /** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public'
})

module.exports = withPWA({
  reactStrictMode: true
});</code></pre><h2 id="ha214098e44">まとめ</h2><p>以上がNext.jsでのPWAの仕方です。<br>もし、Next.jsのPWAの仕方がわからない方へのご参考になればと思います。<br><br></p>