オフライン対応 (PWA)

Methanol は、カスタム Service Worker と自動生成されるプリキャッシュマニフェストを備えた PWA 機能を標準で提供します。インストール時に重要なリソースを優先的にキャッシュし、その他のコンテンツはバックグラウンドで効率的に更新します。

PWA の有効化

PWA 機能を有効にするには、methanol.config.js を以下のように設定します。

export default () => ({
	pwa: true
})

Manifest のカスタマイズ

PWA の Manifest およびプリキャッシュの挙動は、以下のようにカスタマイズ可能です。

export default () => ({
	pwa: {
		manifest: {
			name: 'My Site',
			short_name: 'My Site'
		},
		precache: {
			include: ['**/*.{html,js,css,ico,png,svg,webp,jpg,jpeg,gif,woff,woff2,ttf}'],
			exclude: ['**/*.map', '**/pagefind/**']
		}
	}
})

プリキャッシュ設定の詳細:

• priority: 優先的にキャッシュする glob パターン（マニフェストの先頭に配置されます）。
• limit: プリキャッシュマニフェストに含めるエントリの最大数。
• batchSize: Service Worker がインストールおよびウォームアップ時に同時に取得するリクエスト数。

高度なカスタマイズ

Service Worker の戦略など、PWA のライフサイクルを完全に制御したい場合は、pwa: false に設定し、独自のマニフェストと Service Worker を実装してください。

オフライン専用ページ

pages/offline.mdx を作成することで、オフライン時かつキャッシュが存在しない場合に表示されるフォールバックページをカスタマイズできます。同様に pages/404.mdx で Not Found ページを定義可能です。これらはデフォルトでナビゲーションから除外されます。