Next.js でプログレッシブウェブアプリケーション (PWA) を構築する方法
プログレッシブウェブアプリケーション (PWA) は、ウェブアプリケーションのリーチとアクセシビリティを、ネイティブモバイルアプリの機能とユーザーエクスペリエンスと組み合わせて提供します。Next.js を使用すると、複数のコードベースやアプリストアの承認を必要とせずに、すべてのプラットフォームでシームレスなアプリのようなエクスペリエンスを提供する PWA を作成できます。
PWA を使用すると、次のことが可能になります。
- アプリストアの承認を待たずに、更新を即座にデプロイできます
- 単一のコードベースでクロスプラットフォームアプリケーションを作成できます
- ホーム画面へのインストールやプッシュ通知などの、ネイティブアプリのような機能を提供できます
Next.js で PWA を作成する
1. Web App Manifest の作成
Next.js は、App Router を使用して Web App Manifest を作成するための組み込みサポートを提供します。静的または動的なマニフェストファイルを作成できます。
たとえば、app/manifest.ts または app/manifest.json ファイルを作成します。
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Next.js PWA',
short_name: 'NextPWA',
description: 'A Progressive Web App built with Next.js',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
theme_color: '#000000',
icons: [
{
src: '/icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
}
}このファイルには、名前、アイコン、およびユーザーのデバイスでアイコンとしてどのように表示されるかに関する情報が含まれている必要があります。これにより、ユーザーは PWA をホーム画面にインストールでき、ネイティブアプリのようなエクスペリエンスを提供できるようになります。
public/ フォルダに生成されたファイルを配置し、さまざまなアイコンセットを作成するには、ファビコンジェネレーター のようなツールを使用できます。
2. Web Push 通知の実装
Web Push 通知は、以下を含むすべての最新ブラウザでサポートされています。
- ホーム画面にインストールされたアプリケーションの iOS 16.4+
- macOS 13 以降の Safari 16
- Chromium ベースのブラウザ
- Firefox
これにより、PWA はネイティブアプリの実行可能な代替手段となります。特に、オフラインサポートがなくてもインストールプロンプトをトリガーできます。
Web Push 通知を使用すると、ユーザーがアプリを積極的に使用していない場合でも、ユーザーを再エンゲージできます。Next.js アプリケーションに実装する方法は次のとおりです。
まず、app/page.tsx にメインページコンポーネントを作成します。理解を深めるために、これを小さな部分に分割します。まず、必要なインポートとユーティリティの一部を追加します。参照されている Server Actions がまだ存在しないことは問題ありません。
'use client'
import { useState, useEffect } from 'react'
import { subscribeUser, unsubscribeUser, sendNotification } from './actions'
function urlBase64ToUint8Array(base64String: string) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
const rawData = window.atob(base64)
const outputArray = new Uint8Array(rawData.length)
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i)
}
return outputArray
}次に、プッシュ通知の登録、登録解除、および送信を管理するコンポーネントを追加しましょう。
function PushNotificationManager() {
const [isSupported, setIsSupported] = useState(false)
const [subscription, setSubscription] = useState<PushSubscription | null>(
null
)
const [message, setMessage] = useState('')
useEffect(() => {
if ('serviceWorker' in navigator && 'PushManager' in window) {
setIsSupported(true)
registerServiceWorker()
}
}, [])
async function registerServiceWorker() {
const registration = await navigator.serviceWorker.register('/sw.js', {
scope: '/',
updateViaCache: 'none',
})
const sub = await registration.pushManager.getSubscription()
setSubscription(sub)
}
async function subscribeToPush() {
const registration = await navigator.serviceWorker.ready
const sub = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!
),
})
setSubscription(sub)
const serializedSub = JSON.parse(JSON.stringify(sub))
await subscribeUser(serializedSub)
}
async function unsubscribeFromPush() {
await subscription?.unsubscribe()
setSubscription(null)
await unsubscribeUser()
}
async function sendTestNotification() {
if (subscription) {
await sendNotification(message)
setMessage('')
}
}
if (!isSupported) {
return <p>Push notifications are not supported in this browser.</p>
}
return (
<div>
<h3>Push Notifications</h3>
{subscription ? (
<>
<p>You are subscribed to push notifications.</p>
<button onClick={unsubscribeFromPush}>Unsubscribe</button>
<input
type="text"
placeholder="Enter notification message"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendTestNotification}>Send Test</button>
</>
) : (
<>
<p>You are not subscribed to push notifications.</p>
<button onClick={subscribeToPush}>Subscribe</button>
</>
)}
</div>
)
}最後に、iOS デバイスにホーム画面にインストールするように指示するメッセージを表示するコンポーネントを作成します。これは、アプリがまだインストールされていない場合にのみ表示されます。
function InstallPrompt() {
const [isIOS, setIsIOS] = useState(false)
const [isStandalone, setIsStandalone] = useState(false)
useEffect(() => {
setIsIOS(
/iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
)
setIsStandalone(window.matchMedia('(display-mode: standalone)').matches)
}, [])
if (isStandalone) {
return null // Don't show install button if already installed
}
return (
<div>
<h3>Install App</h3>
<button>Add to Home Screen</button>
{isIOS && (
<p>
To install this app on your iOS device, tap the share button
<span role="img" aria-label="share icon">
{' '}
⎋{' '}
</span>
and then "Add to Home Screen"
<span role="img" aria-label="plus icon">
{' '}
➕{' '}
</span>
.
</p>
)}
</div>
)
}
export default function Page() {
return (
<div>
<PushNotificationManager />
<InstallPrompt />
</div>
)
}次に、このファイルが呼び出す Server Actions を作成しましょう。
3. Server Actions の実装
アクションを格納する新しいファイル app/actions.ts を作成します。このファイルは、サブスクリプションの作成、サブスクリプションの削除、および通知の送信を処理します。
'use server'
import webpush from 'web-push'
webpush.setVapidDetails(
'<mailto:your-email@example.com>',
process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
process.env.VAPID_PRIVATE_KEY!
)
let subscription: PushSubscription | null = null
export async function subscribeUser(sub: PushSubscription) {
subscription = sub
// In a production environment, you would want to store the subscription in a database
// For example: await db.subscriptions.create({ data: sub })
return { success: true }
}
export async function unsubscribeUser() {
subscription = null
// In a production environment, you would want to remove the subscription from the database
// For example: await db.subscriptions.delete({ where: { ... } })
return { success: true }
}
export async function sendNotification(message: string) {
if (!subscription) {
throw new Error('No subscription available')
}
try {
await webpush.sendNotification(
subscription,
JSON.stringify({
title: 'Test Notification',
body: message,
icon: '/icon.png',
})
)
return { success: true }
} catch (error) {
console.error('Error sending push notification:', error)
return { success: false, error: 'Failed to send notification' }
}
}通知の送信は、ステップ 5 で作成したサービスワーカーによって処理されます。
本番環境では、サーバーの再起動にわたって永続化するために、および複数のユーザーのサブスクリプションを管理するために、サブスクリプションをデータベースに保存したいと考えるでしょう。
4. VAPID キーの生成
Web Push API を使用するには、VAPID キーを生成する必要があります。最も簡単な方法は、web-push CLI を直接使用することです。
まず、web-push をグローバルにインストールします。
npm install -g web-push次のコマンドを実行して VAPID キーを生成します。
web-push generate-vapid-keys出力をコピーし、キーを .env ファイルに貼り付けます。
NEXT_PUBLIC_VAPID_PUBLIC_KEY=your_public_key_here
VAPID_PRIVATE_KEY=your_private_key_here
5. Service Worker の作成
サービスワーカー用の public/sw.js ファイルを作成します。
self.addEventListener('push', function (event) {
if (event.data) {
const data = event.data.json()
const options = {
body: data.body,
icon: data.icon || '/icon.png',
badge: '/badge.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: '2',
},
}
event.waitUntil(self.registration.showNotification(data.title, options))
}
})
self.addEventListener('notificationclick', function (event) {
console.log('Notification click received.')
event.notification.close()
event.waitUntil(clients.openWindow('<https://your-website.com>'))
})このサービスワーカーは、カスタム画像と通知をサポートしています。受信したプッシュイベントと通知クリックを処理します。
iconおよびbadgeプロパティを使用して、通知にカスタムアイコンを設定できます。vibrateパターンを調整して、サポートされているデバイスでカスタム振動アラートを作成できます。dataプロパティを使用して、通知に追加のデータを添付できます。
サービスワーカーがさまざまなデバイスやブラウザで期待どおりに動作することを確認するために、徹底的にテストしてください。また、notificationclick イベントリスナーの 'https://your-website.com' リンクを、アプリケーションの適切な URL に更新してください。
6. ホーム画面への追加
ステップ 2 で定義された InstallPrompt コンポーネントは、iOS デバイスにホーム画面へのインストールを指示するメッセージを表示します。
アプリケーションをモバイルホーム画面にインストールできるようにするには、次のものが必要です。
- 有効な Web App Manifest (ステップ 1 で作成)
- HTTPS 経由で提供されるウェブサイト
最新のブラウザは、これらの条件が満たされると、ユーザーに自動的にインストールプロンプトを表示します。カスタムインストールボタンは beforeinstallprompt を使用して提供できますが、これはクロスブラウザおよびクロスプラットフォームではない (Safari iOS で動作しない) ため、推奨しません。
7. ローカルでのテスト
ローカルで通知を表示できるようにするには、次のことを確認してください。
- HTTPS でローカル実行している
- テストには
next dev --experimental-httpsを使用します。
- テストには
- ブラウザ (Chrome, Safari, Firefox) で通知が有効になっている
- ローカルでプロンプトが表示されたら、通知の使用許可を承認してください。
- ブラウザ全体で通知が無効になっていないことを確認してください。
- それでも通知が表示されない場合は、別のブラウザでデバッグしてみてください。
8. アプリケーションのセキュリティ
セキュリティは、特に PWA であるウェブアプリケーションの重要な側面です。Next.js では、next.config.js ファイルを使用してセキュリティヘッダーを構成できます。たとえば、次のようになります。
module.exports = {
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
key: 'X-Frame-Options',
value: 'DENY',
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin',
},
],
},
{
source: '/sw.js',
headers: [
{
key: 'Content-Type',
value: 'application/javascript; charset=utf-8',
},
{
key: 'Cache-Control',
value: 'no-cache, no-store, must-revalidate',
},
{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self'",
},
],
},
]
},
}これらのオプションをそれぞれ見ていきましょう。
- グローバルヘッダー (すべてのルートに適用)
X-Content-Type-Options: nosniff: MIME タイプのスニッフィングを防ぎ、悪意のあるファイルアップロードのリスクを軽減します。X-Frame-Options: DENY: サイトが iframe に埋め込まれるのを防ぐことで、クリックジャッキング攻撃から保護します。Referrer-Policy: strict-origin-when-cross-origin: リクエストに含まれるリファラー情報を制御し、セキュリティと機能性のバランスを取ります。
- サービスワーカー固有のヘッダー
Content-Type: application/javascript; charset=utf-8: サービスワーカーが JavaScript として正しく解釈されるようにします。Cache-Control: no-cache, no-store, must-revalidate: サービスワーカーのキャッシュを防ぎ、ユーザーが常に最新バージョンを取得できるようにします。Content-Security-Policy: default-src 'self'; script-src 'self': サービスワーカーに厳格なコンテンツセキュリティポリシーを実装し、同じオリジンからのスクリプトのみを許可します。
Next.js で コンテンツセキュリティポリシー を定義する方法については、こちらをご覧ください。
PWA の拡張
- PWA 機能の探索: PWA はさまざまな Web API を活用して高度な機能を提供できます。バックグラウンド同期、定期的なバックグラウンド同期、または File System Access API などの機能を探索して、アプリケーションを強化することを検討してください。インスピレーションと PWA 機能に関する最新情報については、What PWA Can Do Today のようなリソースを参照してください。
- 静的エクスポート: サーバーを実行せずに、ファイルの静的エクスポートを使用する必要がある場合は、Next.js の構成を更新してこの変更を有効にすることができます。詳細については、Next.js 静的エクスポートドキュメント を参照してください。ただし、Server Actions から外部 API の呼び出しに移行し、定義済みのヘッダーをプロキシに移動する必要があります。
- オフラインサポート: オフライン機能を提供するには、1 つの方法として、Next.js で Serwist を使用できます。Serwist と Next.js を統合する方法の例は、ドキュメント にあります。注: このプラグインは現在 webpack 構成を必要とします。
- セキュリティに関する考慮事項: サービスワーカーが適切に保護されていることを確認してください。これには、HTTPS の使用、プッシュメッセージの送信元の検証、および適切なエラー処理の実装が含まれます。
- ユーザーエクスペリエンス: 一部の PWA 機能がユーザーのブラウザでサポートされていない場合でも、アプリが正常に動作するように、プログレッシブエンハンスメント技術を実装することを検討してください。
役に立ちましたか？