0
# HTML Integration
1

2
Webpack plugin that injects PWA-specific HTML meta tags, icons, and manifest links during the build process. Integrates with html-webpack-plugin to modify generated HTML output.
3

4
## Capabilities
5

6
### HtmlPwaPlugin Class
7

8
Webpack plugin that handles PWA HTML meta tag injection and manifest generation.
9

10
```javascript { .api }
11
/**
12
 * Webpack plugin for PWA HTML integration
13
 * @param {HtmlPwaOptions} options - Configuration options for PWA HTML integration
14
 */
15
class HtmlPwaPlugin {
16
  constructor(options?: HtmlPwaOptions);
17
  
18
  /**
19
   * Apply plugin to webpack compiler
20
   * @param {Compiler} compiler - Webpack compiler instance
21
   */
22
  apply(compiler: Compiler): void;
23
}
24
```
25

26
**Usage Example:**
27

28
```javascript
29
const HtmlPwaPlugin = require('@vue/cli-plugin-pwa/lib/HtmlPwaPlugin');
30

31
// In webpack configuration
32
module.exports = {
33
  plugins: [
34
    new HtmlPwaPlugin({
35
      name: 'My PWA',
36
      themeColor: '#4DBA87',
37
      iconPaths: {
38
        favicon32: 'assets/icon-32x32.png'
39
      }
40
    })
41
  ]
42
};
43
```
44

45
### HTML PWA Options
46

47
Configuration interface for HTML PWA integration.
48

49
```javascript { .api }
50
interface HtmlPwaOptions {
51
  /** App name for meta tags (default: 'PWA app') */
52
  name?: string;
53
  /** Theme color for PWA (default: '#4DBA87') */
54
  themeColor?: string;
55
  /** Microsoft tile color (default: '#000000') */
56
  msTileColor?: string;
57
  /** Apple mobile web app capable (default: 'no') */
58
  appleMobileWebAppCapable?: string;
59
  /** Apple status bar style (default: 'default') */
60
  appleMobileWebAppStatusBarStyle?: string;
61
  /** Version string for asset cache busting (default: '') */
62
  assetsVersion?: string;
63
  /** Manifest file path (default: 'manifest.json') */
64
  manifestPath?: string;
65
  /** Custom manifest content */
66
  manifestOptions?: ManifestOptions;
67
  /** Crossorigin attribute for manifest link */
68
  manifestCrossorigin?: 'anonymous' | 'use-credentials';
69
  /** Custom icon file paths */
70
  iconPaths?: IconPaths;
71
}
72
```
73

74
### Default Configuration
75

76
Default settings applied by the plugin.
77

78
```javascript { .api }
79
const defaults = {
80
  name: 'PWA app',
81
  themeColor: '#4DBA87',
82
  msTileColor: '#000000',
83
  appleMobileWebAppCapable: 'no',
84
  appleMobileWebAppStatusBarStyle: 'default',
85
  assetsVersion: '',
86
  manifestPath: 'manifest.json',
87
  manifestOptions: {},
88
  manifestCrossorigin: undefined
89
};
90

91
const defaultIconPaths = {
92
  faviconSVG: 'img/icons/favicon.svg',
93
  favicon32: 'img/icons/favicon-32x32.png',
94
  favicon16: 'img/icons/favicon-16x16.png',
95
  appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
96
  maskIcon: 'img/icons/safari-pinned-tab.svg',
97
  msTileImage: 'img/icons/msapplication-icon-144x144.png'
98
};
99
```
100

101
### Icon Paths Configuration
102

103
Interface for customizing PWA icon file paths.
104

105
```javascript { .api }
106
interface IconPaths {
107
  /** SVG favicon path (default: 'img/icons/favicon.svg') */
108
  faviconSVG?: string;
109
  /** 32x32 PNG favicon (default: 'img/icons/favicon-32x32.png') */
110
  favicon32?: string;
111
  /** 16x16 PNG favicon (default: 'img/icons/favicon-16x16.png') */
112
  favicon16?: string;
113
  /** Apple touch icon (default: 'img/icons/apple-touch-icon-152x152.png') */
114
  appleTouchIcon?: string;
115
  /** Safari pinned tab icon (default: 'img/icons/safari-pinned-tab.svg') */
116
  maskIcon?: string;
117
  /** Microsoft tile image (default: 'img/icons/msapplication-icon-144x144.png') */
118
  msTileImage?: string;
119
}
120
```
121

122
**Usage Example:**
123

124
```javascript
125
// Custom icon paths - set to null to exclude specific icons
126
const customIconPaths = {
127
  faviconSVG: 'assets/favicon.svg',
128
  favicon32: 'assets/favicon-32.png',
129
  favicon16: 'assets/favicon-16.png',
130
  appleTouchIcon: null, // Exclude Apple touch icon
131
  maskIcon: 'assets/safari-icon.svg',
132
  msTileImage: 'assets/ms-tile.png'
133
};
134
```
135

136
### Generated HTML Tags
137

138
The plugin injects various PWA-specific HTML tags:
139

140
```javascript { .api }
141
// Favicon tags
142
<link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg">
143
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
144
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
145

146
// Manifest link
147
<link rel="manifest" href="/manifest.json">
148

149
// Theme color
150
<meta name="theme-color" content="#4DBA87">
151

152
// Apple meta tags
153
<meta name="apple-mobile-web-app-capable" content="no">
154
<meta name="apple-mobile-web-app-status-bar-style" content="default">
155
<meta name="apple-mobile-web-app-title" content="My PWA App">
156
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
157
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87">
158

159
// Microsoft meta tags
160
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">
161
<meta name="msapplication-TileColor" content="#000000">
162
```
163

164
### Manifest Generation
165

166
The plugin automatically generates manifest.json when manifestPath is relative.
167

168
```javascript { .api }
169
interface ManifestOptions {
170
  /** App name (defaults to options.name) */
171
  name?: string;
172
  /** Short app name (defaults to options.name) */
173
  short_name?: string;
174
  /** App start URL (default: '.') */
175
  start_url?: string;
176
  /** Display mode (default: 'standalone') */
177
  display?: string;
178
  /** Background color (default: '#000000') */
179
  background_color?: string;
180
  /** Theme color (defaults to options.themeColor) */
181
  theme_color?: string;
182
  /** App icons array */
183
  icons?: ManifestIcon[];
184
}
185

186
interface ManifestIcon {
187
  /** Icon file path */
188
  src: string;
189
  /** Icon sizes (e.g., '192x192') */
190
  sizes: string;
191
  /** MIME type (e.g., 'image/png') */
192
  type: string;
193
  /** Icon purpose (e.g., 'maskable') */
194
  purpose?: string;
195
}
196
```
197

198
### Default Manifest Content
199

200
```javascript { .api }
201
const defaultManifest = {
202
  icons: [
203
    {
204
      src: './img/icons/android-chrome-192x192.png',
205
      sizes: '192x192',
206
      type: 'image/png'
207
    },
208
    {
209
      src: './img/icons/android-chrome-512x512.png',
210
      sizes: '512x512',
211
      type: 'image/png'
212
    },
213
    {
214
      src: './img/icons/android-chrome-maskable-192x192.png',
215
      sizes: '192x192',
216
      type: 'image/png',
217
      purpose: 'maskable'
218
    },
219
    {
220
      src: './img/icons/android-chrome-maskable-512x512.png',
221
      sizes: '512x512',
222
      type: 'image/png',
223
      purpose: 'maskable'
224
    }
225
  ],
226
  start_url: '.',
227
  display: 'standalone',
228
  background_color: '#000000'
229
};
230
```
231

232
**Usage Example:**
233

234
```javascript
235
// Custom manifest configuration
236
const manifestOptions = {
237
  name: 'My Progressive Web App',
238
  short_name: 'MyPWA',
239
  description: 'A sample PWA built with Vue CLI',
240
  start_url: '/',
241
  display: 'standalone',
242
  orientation: 'portrait',
243
  background_color: '#ffffff',
244
  theme_color: '#4DBA87',
245
  icons: [
246
    {
247
      src: './img/custom-icon-192.png',
248
      sizes: '192x192',
249
      type: 'image/png'
250
    }
251
  ]
252
};
253
```