@vue/cli-plugin-pwa #

Плагин pwa для vue-cli

Добавляемый этим плагином service worker включается только в production окружении (к примеру, только при запуске сборки через npm run build или yarn build). Использование service worker при разработке не рекомендуется, так как может привести к ситуации, когда используются кэшированные ранее ресурсы и не учитываются последние локальные изменения.

Вместо этого в режиме разработки добавляется файл noopServiceWorker.js. Этот файл service worker является эффективным 'no-op', который сбрасывает любые другие service worker, зарегистрированные ранее для такой же комбинации host:port.

При необходимости протестировать service worker локально, соберите приложение и запустите простой HTTP-сервер из каталога сборки. Рекомендуется использовать браузер в инкогнито-режиме для избежания осложнений с кэшем вашего браузера.

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

Конфигурация осуществляется через свойство pwa в файле vue.config.js, или через поле "vue" в файле package.json.

• pwa.workboxPluginMode

  Выбор один из двух режимов, поддерживаемых используемым workbox-webpack-plugin.

  • 'GenerateSW' (по умолчанию) создание нового файла service worker каждый раз при пересборке приложения.

  • 'InjectManifest' использование существующего файла service worker и создание копии этого файла с внедрённым в него «precache manifest».

  Руководство «Какой плагин использовать?» поможет выбрать один из двух режимов.

• pwa.workboxOptions

  Настройки, передаваемые в используемый workbox-webpack-plugin.

  При использовании шаблона App Shell в режиме GenerateSW можно настроить точку входа таким образом, чтобы убедиться, что все страницы загружаются в оффлайне:

  navigateFallback: 'index.html'
  

  Для получения дополнительной информации о поддерживаемых значениях обратитесь к руководству для GenerateSW или для InjectManifest.

• pwa.name

  • По умолчанию: поле "name" в файле package.json

    Используется в качестве значения мета-тега apple-mobile-web-app-title в сгенерированном HTML. Обратите внимание, необходимо отредактировать файл public/manifest.json для соответствия этому значению.

• pwa.themeColor

  • По умолчанию: '#4DBA87'

• pwa.msTileColor

  • По умолчанию: '#000000'

• pwa.appleMobileWebAppCapable

  • По умолчанию: 'no'

    По умолчанию значение 'no', потому что iOS до версии 11.3 не имела надлежащей поддержки PWA. См. эту статью для более подробной информации.

• pwa.appleMobileWebAppStatusBarStyle

  • По умолчанию: 'default'

• pwa.assetsVersion

  • По умолчанию: ''

    Эта опция используется, если необходимо добавить версию к иконкам и манифесту для игнорирования кэша браузера. В результате добавится ?v=<pwa.assetsVersion> к URL-адресам иконок и манифеста.

• pwa.manifestPath

  • По умолчанию: 'manifest.json'

    Путь к манифесту приложения. Если в качестве пути указан URL, то плагин не будет во время сборки генерировать manifest.json в каталоге dist.

• pwa.manifestOptions

  • По умолчанию: {}

    Объект будет использоваться для генерации manifest.json

    Если не определить следующие значения в объекте, то вместо них будут использованы значения опции pwa или значения по умолчанию.

    • name: pwa.name
    • short_name: pwa.name
    • start_url: '.'
    • display: 'standalone'
    • theme_color: pwa.themeColor
    • icons: [ { 'src': './img/icons/android-chrome-192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': './img/icons/android-chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' }, { 'src': './img/icons/android-chrome-maskable-192x192.png', 'sizes': '192x192', 'type': 'image/png', 'purpose': 'maskable' }, { 'src': './img/icons/android-chrome-maskable-512x512.png', 'sizes': '512x512', 'type': 'image/png', 'purpose': 'maskable' } ]

• pwa.manifestCrossorigin

  • По умолчанию: undefined

    Значение атрибута crossorigin в теге ссылки на манифест в сгенерированном HTML. Это значение может потребоваться установить, когда PWA находится за аутентифицированным прокси-сервером. Для более подробной информации смотрите варианты значений cross-origin.

• pwa.iconPaths

  • По умолчанию:

    {
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/msapplication-icon-144x144.png'
    }
    

    Измените эти значения при необходимости использовать различные пути для иконок. Начиная с версии 4.3.0, можно указывать null в качестве значения, чтобы не включать эту иконку.

    ПРИМЕЧАНИЕ: Эти иконки используются только для генерации мета-тегов в <head> HTML-документа. Для изменения пути к иконкам в манифесте используйте pwa.manifestOptions.icons

Пример конфигурации #

// Файл vue.config.js
module.exports = {
  // ...настройки других vue-cli плагинов...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // настройки манифеста
    manifestOptions: {
      display: 'landscape',
      background_color: '#42B883'
      // ...другие настройки манифеста...
    },

    // настройка workbox-плагина
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc необходимо в режиме InjectManifest
      swSrc: 'dev/sw.js',
      // ...другие настройки Workbox...
    }
  }
}

Установка в уже созданный проект #

vue add pwa

Внедряемые правила webpack-chain #

• config.plugin('workbox')