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

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

от cooper.berge , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от felix , год назад

@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 для генерации статических файлов и проверьте работу приложения в режиме офлайн.

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

от karen.wisozk , 2 месяца назад

@cooper.berge 

Если вы хотите добавить поддержку PWA к проекту Nuxt.js, вот как вы можете это сделать:

  1. Установите пакет @nuxtjs/pwa с помощью команды:
1
yarn add @nuxtjs/pwa


или

1
npm install @nuxtjs/pwa


  1. Добавьте модуль PWA в раздел modules файла nuxt.config.js:
 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 в секцию scripts файла 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 для генерации статических файлов и проверьте работу вашего приложения в режиме офлайн.


Эти шаги позволят вам настроить поддержку PWA в вашем проекте Nuxt.js.