Модуль @nuxtjs/pwa в Nuxt

Модуль @nuxtjs/pwa предоставляет простой и удобный способ превратить ваше Nuxt приложение в Progressive Web App (PWA). PWA предлагают пользователям опыт, похожий на нативное приложение, прямо в браузере, с такими функциями, как установка на домашний экран, push-уведомления и работа в офлайн-режиме.

Установка

Для начала установите модуль @nuxtjs/pwa:

npm install --save-dev @nuxtjs/pwa
# или
yarn add -D @nuxtjs/pwa

Затем добавьте @nuxtjs/pwa в секцию modules вашего файла nuxt.config.js:

export default {
  modules: [
    '@nuxtjs/pwa'
  ],
  pwa: {
    // Настройки модуля (см. ниже)
  }
  // ... другие настройки
}

Настройка (nuxt.config.js)

Модуль @nuxtjs/pwa имеет множество опций конфигурации, которые позволяют настроить его под ваши нужды. Некоторые из основных опций включают:

export default {
  modules: [
    '@nuxtjs/pwa'
  ],
  pwa: {
    manifest: {
      name: 'Мое Nuxt PWA',
      short_name: 'Мое PWA',
      description: 'Описание моего Nuxt PWA приложения',
      theme_color: '#ffffff',
      background_color: '#ffffff',
      icons: [
        {
          src: '/icons/icon-72x72.png',
          sizes: '72x72',
          type: 'image/png'
        },
        {
          src: '/icons/icon-144x144.png',
          sizes: '144x144',
          type: 'image/png'
        },
        // ... другие размеры и иконки
      ]
    },
    workbox: {
      // Настройки Workbox (для service worker)
      runtimeCaching: [
        {
          urlPattern: '/api/.*',
          handler: 'NetworkFirst'
        },
        {
          urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'image-cache',
            expiration: {
              maxEntries: 100,
              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 дней
            }
          }
        }
      ]
    },
    meta: {
      // Настройки мета-тегов PWA
      mobileApp: true,
      appleStatusBarStyle: 'black-translucent'
    },
    icon: { // Генерация иконок (рекомендуется отключить, если используются статические иконки)
      source: '/static/icon.png',
      fileName: 'icon.png',
      sizes: [72, 96, 128, 144, 152, 192, 384, 512]
    },
    // ... другие опции
  }
  // ... другие настройки
}

Основные опции:

• manifest: Объект, определяющий манифест веб-приложения. Это JSON-файл, который сообщает браузеру информацию о вашем PWA (имя, иконки, цвет темы и т.д.).
• workbox: Объект с настройками для Workbox, библиотеки Google для создания service workers. runtimeCaching определяет, как обрабатывать запросы к различным ресурсам (например, кэширование статики, стратегия "сначала сеть" для API).
• meta: Объект для настройки мета-тегов, связанных с PWA, таких как mobile-web-app-capable и apple-mobile-web-app-status-bar-style.
• icon: Объект для автоматической генерации иконок разных размеров из одного исходного файла. Рекомендуется использовать статические иконки, подготовленные дизайнером, и настроить их в manifest.icons.
• injectRegister: Определяет, как регистрировать service worker ('auto', 'manual'). По умолчанию 'auto', что означает автоматическую регистрацию.
• registerType: Определяет стратегию регистрации service worker ('autoUpdate', 'prompt'). 'autoUpdate' обновляет service worker в фоновом режиме, а 'prompt' предлагает пользователю обновить приложение при появлении новой версии.

Манифест веб-приложения (manifest)

Манифест - это JSON-файл, который сообщает браузеру, как должно выглядеть и вести себя ваше PWA при установке на устройство пользователя.

Основные поля manifest:

• name: Полное имя вашего приложения.
• short_name: Краткое имя приложения, используемое на рабочем столе или в меню приложений.
• description: Описание вашего приложения.
• theme_color: Цвет темы приложения (может использоваться браузером для оформления).
• background_color: Цвет фона заставки при запуске приложения.
• icons: Массив объектов, описывающих иконки приложения разных размеров и типов.
• start_url: URL, который открывается при запуске приложения.
• display: Режим отображения приложения (standalone, minimal-ui, fullscreen, browser). standalone обеспечивает опыт, похожий на нативное приложение.
• scope: Определяет набор URL-адресов, контролируемых service worker.

Service Worker (workbox)

Service worker - это скрипт, который работает в фоновом режиме в браузере, перехватывая сетевые запросы. Они являются ключевой частью PWA, обеспечивая такие функции, как офлайн-работа и кэширование ресурсов.

Модуль @nuxtjs/pwa использует Workbox для упрощения создания и управления service workers. С помощью опции workbox.runtimeCaching вы можете настроить стратегии кэширования для различных типов ресурсов.

Основные стратегии кэширования Workbox:

• CacheFirst: Сначала проверяет кэш, и если ресурс найден, использует его. Если нет, делает сетевой запрос и кэширует ответ. Подходит для статических ресурсов.
• NetworkFirst: Сначала пытается получить ресурс из сети. Если запрос успешен, использует ответ и кэширует его. Если сеть недоступна, использует ресурс из кэша (если есть). Подходит для динамических ресурсов, где важна актуальность.
• StaleWhileRevalidate: Возвращает ресурс из кэша, если он есть, и одновременно делает сетевой запрос для обновления кэша в фоновом режиме. При следующем запросе будет использоваться обновленный ресурс. Обеспечивает быструю первоначальную загрузку и последующее обновление.
• NetworkOnly: Всегда пытается получить ресурс из сети. Используется, когда кэширование нежелательно.
• CacheOnly: Использует только ресурсы из кэша. Если ресурс не найден в кэше, запрос завершается ошибкой.

Мета-теги (meta)

Опция meta позволяет настроить мета-теги, связанные с PWA:

• mobileApp: Включает или отключает мета-теги для поддержки "веб-приложений" на мобильных устройствах (например, скрытие адресной строки).
• appleStatusBarStyle: Определяет стиль строки состояния на iOS при запуске PWA с домашнего экрана ('default', 'black', 'black-translucent').

Генерация иконок (icon)

Опция icon позволяет автоматически генерировать иконки разных размеров из одного исходного файла. Однако для лучшего контроля и качества рекомендуется предоставить готовые иконки разных размеров в каталоге static/icons/ и настроить их в manifest.icons.

Регистрация Service Worker

Модуль @nuxtjs/pwa автоматически регистрирует service worker, если опция injectRegister установлена в 'auto' (по умолчанию). Вы также можете вручную управлять регистрацией, установив injectRegister в 'manual' и используя компонент <ClientOnly> или хук onMounted для регистрации service worker на стороне клиента.

Тестирование PWA

После настройки модуля @nuxtjs/pwa вы можете протестировать ваше PWA с помощью инструментов разработчика браузера (вкладка "Application" -> "Manifest" и "Service Workers") и онлайн-сервисов, таких как Lighthouse (вкладка "Audits" в Chrome DevTools). Lighthouse проверит ваше приложение на соответствие критериям PWA и даст рекомендации по улучшению.

Заключение

Модуль @nuxtjs/pwa значительно упрощает процесс превращения вашего Nuxt приложения в современное и функциональное PWA. Настройка манифеста, управление service worker с помощью Workbox и оптимизация мета-тегов позволяют создать удобный и производительный опыт для ваших пользователей, даже в условиях нестабильного интернет-соединения.