Progressive Web Apps (PWA) — это мощный инструмент для создания веб-приложений, которые работают даже без интернета. В этой статье разберём, как превратить Nuxt-приложение в полноценный PWA с оффлайн-доступом.
📌 Что такое PWA и зачем это нужно?
PWA — это веб-приложения, которые:
✅ Работают оффлайн (или при плохом соединении)
✅ Загружаются мгновенно благодаря кешированию
✅ Могут быть установлены на устройство (как нативное приложение)
✅ Поддерживают push-уведомления
Для Nuxt.js есть отличный модуль @vite-pwa/nuxt
(ранее @nuxtjs/pwa
), который упрощает интеграцию PWA.
🛠 Настройка PWA в Nuxt 3
1. Установка модуля
npm install @vite-pwa/nuxt --save-dev
# или
yarn add -D @vite-pwa/nuxt
2. Добавление модуля в nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vite-pwa/nuxt'],
pwa: {
registerType: 'autoUpdate',
manifest: {
name: 'Мой оффлайн-сайт',
short_name: 'OfflineApp',
theme_color: '#ffffff',
icons: [
{
src: '/pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
workbox: {
globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
},
devOptions: {
enabled: true, // Включает PWA в development-режиме
type: 'module',
},
},
});
3. Создание манифеста и иконок
Файл manifest.json
описывает метаданные PWA. Иконки можно сгенерировать с помощью RealFaviconGenerator.
4. Настройка Service Worker для оффлайн-работы
Модуль @vite-pwa/nuxt
автоматически генерирует Service Worker, но можно кастомизировать кеширование:
pwa: {
workbox: {
runtimeCaching: [
{
urlPattern: /^https:\/\/api\.example\.com\/.*/i,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24, // 1 день
},
},
},
],
},
},
🔄 Как проверить работу PWA?
- Локально:
- Запустите
npm run dev
и откройте DevTools → вкладка Application → Service Workers. - Проверьте, зарегистрирован ли Service Worker.
- Оффлайн-режим:
- В Chrome DevTools (F12) → вкладка Network → выберите Offline.
- Обновите страницу — контент должен остаться доступным.
- Установка PWA:
- В Chrome нажмите «Установить» в правом верхнем углу адресной строки.
🚀 Продвинутые возможности
🔔 Push-уведомления
Используйте Firebase Cloud Messaging или Web Push API.
📦 Стратегии кеширования
- Cache First — для статики (CSS, JS, изображения).
- Network First — для API-запросов.
- Stale-While-Revalidate — для часто обновляемых данных.
🔄 Фоновая синхронизация
Позволяет откладывать действия (например, отправку формы) до восстановления соединения.
🏆 Вывод
Nuxt + PWA = мощное оффлайн-приложение с минимальными усилиями. Главные преимущества:
✔️ Быстрая загрузка даже при медленном интернете
✔️ Возможность работы без сети
✔️ Улучшенный пользовательский опыт
Попробуйте внедрить PWA в свой проект и оцените разницу! 🚀
**А вы уже используете PWA? Делитесь опытом в комментари
Добавить комментарий