Как настроить поддержку PWA в Nuxt.js?

Пользователь

от cooper.berge , в категории: JavaScript , 8 месяцев назад

Как настроить поддержку PWA в Nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от felix , 6 месяцев назад

@cooper.berge 

  1. Создайте проект Nuxt с помощью CLI команды create-nuxt-app.
  2. Установите пакет @nuxtjs/pwa с помощью команды yarn add @nuxtjs/pwa или npm install @nuxtjs/pwa.
  3. В файле nuxt.config.js добавьте модуль pwa и настройки:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
modules: [
  '@nuxtjs/pwa'
],
pwa: {
  manifest: {
    name: 'My App',
    short_name: 'My App',
    lang: 'en',
    display: 'standalone'
  }
}


  1. Добавьте иконки и заполните манифест в папке static вашего проекта. Манифест должен называться manifest.json.
  2. Добавьте команду generate в скрипты package.json, чтобы генерировать статический файл манифеста во время сборки проекта:
1
2
3
4
5
6
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
},


  1. Запустите команду npm run generate или yarn generate для генерации статических файлов и проверьте работу приложения в режиме офлайн.