Перейти к основному содержанию

Конфиг плагина PWA

Около 2 минКонфигPWAКонфигурация плагинаКонфиг темы

Введение

Плагин vuepress-plugin-pwa2 обеспечивает прогрессивную поддержку веб-приложений.

vuepress-theme-hope передает plugins.pwa в параметрах темы в качестве параметров плагина для плагина vuepress-plugin-pwa2.

Быстрое включение

Чтобы просто включить эту функцию, вы можете установить pwa: true. Быстрое включение не рекомендуется

Инфо

Подробности смотрите в документации плагина pwa2open in new window.

Опции плагина

showInstall

  • Тип: boolean
  • По умолчанию: true

Отображать ли кнопку установки при первой успешной регистрации Service Worker.

manifest

  • Тип: ManifestOption
  • Обязательный: Нет

Вы можете заполнить объект, который будет проанализирован в manifest.webmanifest.

Совет

Некоторые параметры имеют запасной вариант, если вы их не установите.

  • name: siteConfig.title || siteConfig.locales['/'].title || "Site"

  • short_name: siteConfig.title || siteConfig.locales['/'].title || "Site"

  • description: siteConfig.description || siteConfig.locales['/'].description || "A site built with vuepress"

  • lang: siteConfig.locales['/'].lang || "en-US"

  • start_url: context.base

  • scope: context.base

  • display: "standalone"

  • theme_color: "#46bd87"

  • background_color: "#ffffff"

  • orientation: "portrait-primary"

  • prefer_related_applications: false

Более

Документы по манифесту смотрите в Манифесте W3Copen in new window

favicon

  • Тип: string
  • Обязательный: Нет

Путь favicon.ico с абсолютным путем.

Примечание

Мы рекомендуем вам установить favicon для вашего сайта

themeColor

  • Тип: string
  • По умолчанию: "#46bd87"

Цвет темы, по умолчанию тема зеленая.

maxSize

  • Тип: number
  • По умолчанию: 2048

Максимальный размер, который позволяет кэшировать, с единицей КБ

Примечание

Этот параметр имеет наивысший приоритет, и любые файлы, превышающие это значение, будут исключены.

Поэтому, если вы создаете очень большие файлы HTML или JS, рассмотрите возможность увеличения этого значения, иначе ваше PWA может не работать нормально в автономном режиме.

cacheHTML

  • Тип: boolean
  • По умолчанию: false

Кэшировать ли файлы HTML, кроме домашней страницы и страницы 404.

cachePic

  • Тип: boolean
  • По умолчанию: false

Кешировать ли картинки.

maxPicSize

  • Тип: number
  • По умолчанию: 1024

Максимальный размер изображения, который позволяет кэшировать, с единицей КБ.

update

  • Тип: "disabled" | "available" | "hint" | "force"
  • По умолчанию: "available"

Логика управления при обнаружении нового контента.

  • "disabled": Ничего не делать, даже когда доступен новый service worker. После успешной установки новой службы и начала ожидания она будет контролировать страницу и предоставлять новый контент при следующем посещении

  • "available": Отображать всплывающее окно обновления только тогда, когда доступен новый service worker

  • "hint": Отображать подсказку, позволяющую пользователю выбрать немедленное обновление

    Это удобно, если вы хотите, чтобы пользователи сразу же увидели новые документации.

    Заметка

    Если пользователи выберут обновление, текущий сервисный работник будет отменен, и запрос начнет поступать в сеть. Позже новый service worker начнет установку и будет контролировать текущую страницу после установки.

  • "force": немедленно отмените регистрацию текущего сервисного работника, затем обновите его, чтобы получить новый контент

    Предупреждение

    Хотя это гарантирует, что пользователи посещают новейший контент, но это может повлиять на впечатления от посещения.

Примечание

То, как обновляются документы, контролируется предыдущей версией, поэтому текущий параметр влияет только на следующее обновление этой версии.

apple

Специальные настройки для Apple

Если не хотите производить детальные настройки, можете смело проигнорировать; если вы не хотите, чтобы ваш сайт был совместим с Safari на Apple, установите для него значение false.

apple.icon

  • Тип: string
  • Обязательный: Нет

Введите адрес иконки, используемый Apple, рекомендуемый размер 152×152.

apple.statusBarColor

  • Тип: "black" | "white"
  • По умолчанию: "black"

Цвет строки состояния Apple

apple.maskIcon

  • Тип: string
  • Обязательный: Нет

Иконка маски сафари.

msTile

Специальные настройки для плиток Microsoft

Если не хотите производить детальные настройки, можете смело проигнорировать; если вы не хотите, чтобы ваш сайт был совместим с Windows, установите для него значение false.

msTile.image

  • Тип: string
  • Обязательный: Нет

Иконка плитки.

msTile.color

  • Тип: string
  • Значение по умолчанию: themeColor

Цвет плитки автоматически вернется к themeColor, если вы его не установите.

hintComponent

  • Тип: string
  • По умолчанию: "SWHintPopup"

Вы можете указать путь к компоненту всплывающей подсказки.

updateComponent

  • Тип: string
  • По умолчанию: "SWUpdatePopup"

Вы можете заполнить собственный путь к компоненту всплывающего окна обновления.

appendBase

  • Тип: boolean
  • По умолчанию: false

Добавлять ли базу ко всем абсолютным ссылкам.

generateSwConfig

Параметры, переданные в workbox-build, подробнее смотрите в документации Workboxopen in new window

locales

  • Тип: PWALocaleConfig

    interface PWALocaleData {
  /**
   * Install button text
   */
  install: string;

  /**
   * iOS install hint text
   */
  iOSInstall: string;

  /**
   * Cancel button text
   */
  cancel: string;

  /**
   * Close button text
   */
  close: string;

  /**
   * Previous image text
   */
  prevImage: string;

  /**
   * Next image text
   */
  nextImage: string;

  /**
   * Install explain text
   */
  explain: string;

  /**
   * Description label text
   */
  desc: string;

  /**
   * Feature label text
   */
  feature: string;

  /**
   * Update hint text
   */
  hint: string;

  /**
   * Update available text
   */
  update: string;
}

interface PWALocaleConfig {
  [localePath: string]: PWALocaleData;
}

  • Обязательный: Нет

Конфигурация локалей для плагина pwa.

MIT Licensed | Copyright © 2019-present Mr.Hope