オフライン対応 (PWA)

サイトにオフラインアクセスの機能を追加したい場合は、vite-plugin-pwa を利用することで簡単に実現できます。

導入手順

まず、必要なプラグインをインストールします。

npm install vite-plugin-pwa -D

設定方法

methanol.config.js の Vite 設定にプラグインを追加します。

import { VitePWA } from 'vite-plugin-pwa'

export default () => ({
	vite: {
		plugins: [
			VitePWA({
				injectRegister: 'auto',
				registerType: 'autoUpdate',
				workbox: {
					globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
					navigateFallback: '/404.html',
					ignoreURLParametersMatching: [/./]
				}
			})
		]
	}
})

この設定により、標準的なウェブアセットが自動的にキャッシュされ、ネットワーク接続がない場合でもサイトの閲覧が可能になります。また、存在しないパスへのアクセスは自動的に 404 ページにリダイレクトされます。