Config

Mr.Hope ... 2020-10-22 About 2 min

# showInstall

Type: boolean
Default: true

Whether display install button when Service Worker is first registered successfully.

# manifest

Type: ManifestOption
Required: No

You can fill with an object which will be parsed to manifest.webmanifest.

Tips

Some options have their fallback if you donot set them.

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

For docs of Manifest, please see W3C Manifest (opens new window)

# favicon

Type: string
Required: No

Path of favico.ico with absolute path.

Note

We recommend you to set favicon for your site

# themeColor

类型: string
默认值: "#46bd87"

Theme Color, default is theme green

# maxSize

Type: number
Default: 2048

Max size which allows to cache, with KB unit

Note

This option has the highest priority, and any files exceeding this value will be excluded.

So if you generate very large HTML or JS files, please consider increasing this value, otherwise your PWA may not work normally in offline mode.

# cacheHTML

Type: boolean
Default: false

Whether cache HTML files besides home page and 404 page.

# cachePic

Type: boolean
Default: false

Whether cache pictures

# maxPicSize

Type: number
Default: 1024

Max picture size which allows to cache, with KB unit

# update

Type: "disabled" | "available" | "hint" | "force"
Default: "available"

Control logic when new content is found.

"disabled": Do nothing even when new service worker is available. After new service work succeeds installing and starts waiting, it will control page and provide new content in next visit.
"available": Only display update popup when the new service worker is available
"hint": Display a hint to let user choose to refresh immediately

This is helpful when you want users to see new docs immediately.

Note

If users choose to refresh, the current service worker will be unregister, and request will start coming to web. Later the new service worker will start installing and control current page after installed.
"force": unregister current service worker immediately then refresh to get new content

Warning

Although this ensure users are viewing the latest content, it may affect viewing experiences.

Note

How docs are updated is controlled by a previous version, so the current option only effect next update from this version.

# apple

Special settings for Apple

If you don’t want to make detailed settings, you can safely ignore it; if you don’t want your site compatible with safari on apple, please set it to false.

# apple.icon

Type: string
Required: No

Fill in the icon address used by Apple, the recommended size is 152×152

# apple.statusBarColor

Type: "black" | "white"
Default: "black"

Apple’s status bar color

# apple.maskIcon

Type: string
Required: No

Safari mask icon

# msTile

Special settings for Microsoft tiles

If you don’t want to make detailed settings, you can safely ignore it; if you don’t want your site compatible with windows, please set it to false.

# msTile.image

Type: string
Required: No

Tile icon

# msTile.color

Type: string
Default value: themeColor

The tile color will automatically fall back to themeColor if you don’t set it.

# hintComponent

Type: string
Default: "SWHintPopup"

You can fill in the custom hint popup component path.

# updateComponent

Type: string
Default: "SWUpdatePopup"

You can fill in the custom update popup component path.

# appendBase

Type: boolean
Default: false

Whether append base to all absolute links.

# generateSwConfig

Options passed to workbox-build, for details, see Workbox documentation (opens new window)

# locales

Type: 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

Required: No

Locales config for pwa plugin.