Add offline fallback page for PWA
All checks were successful
build-and-deploy / build (push) Successful in 53s
build-and-deploy / deploy (push) Successful in 3s

- Create offline.html with user-friendly offline message
- Auto-redirect when connection is restored
- Use offline.html as navigateFallback instead of root
- Include offline.html in PWA assets for precaching

This ensures users see a proper offline page when opening the app without connection, instead of a browser error.
This commit is contained in:
2025-10-13 02:37:34 -06:00
parent ec9ccece61
commit 496ff7630b
2 changed files with 128 additions and 2 deletions

View File

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
pwa: {
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'icon.svg'],
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'icon.svg', 'offline.html'],
manifest: {
name: 'Plantilla Nuxt + Authentik',
short_name: 'NuxtAuth',
@@ -72,7 +72,7 @@ export default defineNuxtConfig({
]
},
workbox: {
navigateFallback: '/',
navigateFallback: '/offline.html',
navigateFallbackDenylist: [/^\/api\//, /^\/authentik\//],
globPatterns: ['**/*.{js,css,html,png,svg,ico,json}'],
cleanupOutdatedCaches: true,