PWA

プログレッシブウェブアプリ

PWA（プログレッシブウェブアプリ）を分かりやすく？

PWA（プログレッシブウェブアプリ）は、ウェブアプリケーションをネイティブアプリのような体験に近づける技術です。オフラインでも動作したり、プッシュ通知を受け取ることができるなど、ネイティブアプリに近い機能をウェブアプリで実現できます。Next.js と TypeScript を使って PWA を構築する方法について解説します。

Next.js で PWA を構築する

Next.js で PWA を構築するには、主に以下の 3 つの要素が必要です。

サービスワーカーの登録
マニフェストファイルの作成
HTTPS の適用（本番環境）

サービスワーカーの登録

サービスワーカーは、バックグラウンドで動作し、オフライン時のキャッシュやプッシュ通知などの機能を実現します。Next.js では、next-pwa というプラグインを使って簡単にサービスワーカーを登録できます。

まず、next-pwa をインストールします。

npm install next-pwa

次に、next.config.js ファイルを作成し、next-pwa を設定します。

// next.config.js
const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
})

この設定で、ビルド時にサービスワーカーが生成され、登録されます。

マニフェストファイルの作成

マニフェストファイルは、PWA のアイコンやホーム画面に追加時の表示名など、アプリのメタ情報を定義します。public ディレクトリに manifest.json ファイルを作成し、以下のような内容を記述します。

{
  "name": "Your App Name",
  "short_name": "App",
  "description": "An example of a Progressive Web App built with Next.js and TypeScript.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

上記の例では、アプリの名前、説明、表示設定、アイコンなどを定義しています。icons 配列には、アプリのアイコン画像の情報を含めます。適切なサイズのアイコン画像を public/icons ディレクトリに配置しておきます。

次に、_document.tsx ファイルを作成し、<html> タグ内にマニフェストファイルへのリンクを追加します。

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
          <meta name="theme-color" content="#000000" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

これにより、マニフェストファイルが適用され、PWA として認識されるようになります。

HTTPS の適用（本番環境）

PWA は、セキュリティ上の理由から HTTPS が必須です。Next.js で構築したアプリケーションをデプロイする際は、HTTPS を適用する必要があります。Vercel などのホスティングサービスを利用すれば、簡単に HTTPS を適用できます。

Next.js と TypeScript で PWA を構築する利点

Next.js と TypeScript を使って PWA を構築することにより、以下のような利点があります。

静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）を利用して、高速なページ遷移を実現できます。
TypeScript の型安全性により、開発効率やコードの品質が向上します。
Next.js のプラグインやミドルウェアを活用して、独自の機能やカスタマイズを容易に追加できます。

Next.js を学ぶ一覧へ

PWA

プログレッシブ ウェブ アプリ