️ УСТАРЕЛО ️

Nuxt 3 работает на базе Vite, у которого сегодня есть потрясающий плагин PWA с поддержкой Nuxt.

Поскольку появилось лучшее решение, этот модуль больше не будет поддерживаться.

Вместо этого рассмотрите возможность использования Vite PWA для Nuxt 3 с генератором ресурсов Vite PWA.

Как главный сопровождающий (@kevinmarrec), я хочу поблагодарить всех участников и пользователей, которые доверились этому проекту.

Nuxt 3 PWA

Решение PWA с нулевой конфигурацией для Nuxt 3

Состояние официального модуля

Этот модуль является неофициальным , но призван стать следующей версией официального модуля Nuxt PWA.

Настраивать

Добавьте зависимость @kevinmarrec/nuxt-pwa в свой проект:

 # Using Yarn
yarn add -D @kevinmarrec/nuxt-pwa
# Using NPM
npm install -D @kevinmarrec/nuxt-pwa
# Using PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

Отредактируйте файл nuxt.config.ts , чтобы добавить модуль PWA:

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ]
} )

Конфигурация

Поскольку этот модуль пытается быть совместимым с Nuxt 2 PWA для упрощения миграции, вы все равно можете использовать документацию https://pwa.nuxtjs.org для большинства функций.

Если вы хотите, чтобы ваше приложение можно было установить в стадии разработки , вам необходимо установить для параметра pwa.workbox.enabled значение true в вашем nuxt.config , поскольку по умолчанию оно включено только для рабочей среды:

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      enabled : true
    }
  }
} )

Если вам нужен собственный рабочий сервис рабочего ящика, вы можете указать путь к своему рабочему процессу с помощью параметра pwa.workbox.templatePath , вы можете использовать псевдонимы пути, такие как ~ и @ .

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      templatePath : '~/path/to/your/worker.js'
    }
  }
} )

Чтобы настроить его, вы можете проверить настройки этого модуля по умолчанию здесь, а также настройки по умолчанию Nuxt 2 и документацию Workbox.

Композитные предметы

usePWAIcon (размер, параметры)

Вы можете использовать usePWAIcon , чтобы получить URL-адреса значков вашего PWA и использовать их в своем приложении.

 const icon = usePWAIcon ( 512 ) // /assets/icons/512x512.png
const icon = usePWAIcon ( 512 , { maskable : true } ) // /assets/icons/512x512.maskable.png