feat(pwa): added options and updated readme (vuejs#1752)

qnp · Akryum · commit 050fe2a4cd51 · 2018-07-11T01:36:10.000+02:00
* added options and updated readme

* moved `manifest` out of `iconPaths` options

* changed `iconsVersion` to `assetsVersion`
diff --git a/packages/@vue/cli-plugin-pwa/README.md b/packages/@vue/cli-plugin-pwa/README.md
@@ -53,6 +53,34 @@ file, or the `"vue"` field in `package.json`.
 
   - Default: `'default'`
 
+- **pwa.assetsVersion**
+  
+  - Default: `''`
+
+    This option is used if you need to add a version to your incons and manifest, against browser’s cache. This will append `?v=<pwa.assetsVersion>` to the URLs of the icons and manifest.
+
+- **pwa.manifestPath**
+
+  - Default: `'manifest.json'`
+
+    The path of app’s manifest.
+
+- **pwa.iconPaths**
+
+  - Defaults:
+
+    ```js
+    {
+      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'
+    }
+    ```
+
+    Change these values to use different paths for your icons.
+
 ### Example Configuration
 
 ```js
diff --git a/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js b/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
@@ -5,12 +5,24 @@ const defaults = {
   themeColor: '#4DBA87', // The Vue color
   msTileColor: '#000000',
   appleMobileWebAppCapable: 'no',
-  appleMobileWebAppStatusBarStyle: 'default'
+  appleMobileWebAppStatusBarStyle: 'default',
+  assetsVersion: '',
+  manifestPath: 'manifest.json'
+}
+
+const defaultIconPaths = {
+  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'
 }
 
 module.exports = class HtmlPwaPlugin {
   constructor (options = {}) {
-    this.options = Object.assign({}, defaults, options)
+    const iconPaths = Object.assign({}, defaultIconPaths, options.iconPaths)
+    delete options.iconPaths
+    this.options = Object.assign({iconPaths: iconPaths}, defaults, options)
   }
 
   apply (compiler) {
@@ -22,28 +34,39 @@ module.exports = class HtmlPwaPlugin {
       })
 
       compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, (data, cb) => {
-        const { name, themeColor, msTileColor, appleMobileWebAppCapable, appleMobileWebAppStatusBarStyle } = this.options
+        const {
+          name,
+          themeColor,
+          msTileColor,
+          appleMobileWebAppCapable,
+          appleMobileWebAppStatusBarStyle,
+          assetsVersion,
+          manifestPath,
+          iconPaths
+        } = this.options
         const { publicPath } = compiler.options.output
 
+        const assetsVersionStr = assetsVersion ? `?v=${assetsVersion}` : ''
+
         data.head.push(
           // Favicons
           makeTag('link', {
             rel: 'icon',
             type: 'image/png',
             sizes: '32x32',
-            href: `${publicPath}img/icons/favicon-32x32.png`
+            href: `${publicPath}${iconPaths.favicon32}${assetsVersionStr}`
           }),
           makeTag('link', {
             rel: 'icon',
             type: 'image/png',
             sizes: '16x16',
-            href: `${publicPath}img/icons/favicon-16x16.png`
+            href: `${publicPath}${iconPaths.favicon16}${assetsVersionStr}`
           }),
 
           // Add to home screen for Android and modern mobile browsers
           makeTag('link', {
             rel: 'manifest',
-            href: `${publicPath}manifest.json`
+            href: `${publicPath}${manifestPath}${assetsVersionStr}`
           }),
           makeTag('meta', {
             name: 'theme-color',
@@ -65,18 +88,18 @@ module.exports = class HtmlPwaPlugin {
           }),
           makeTag('link', {
             rel: 'apple-touch-icon',
-            href: `${publicPath}img/icons/apple-touch-icon-152x152.png`
+            href: `${publicPath}${iconPaths.appleTouchIcon}${assetsVersionStr}`
           }),
           makeTag('link', {
             rel: 'mask-icon',
-            href: `${publicPath}img/icons/safari-pinned-tab.svg`,
+            href: `${publicPath}${iconPaths.maskIcon}${assetsVersionStr}`,
             color: themeColor
           }),
 
           // Add to home screen for Windows
           makeTag('meta', {
             name: 'msapplication-TileImage',
-            content: `${publicPath}img/icons/msapplication-icon-144x144.png`
+            content: `${publicPath}${iconPaths.msTileImage}${assetsVersionStr}`
           }),
           makeTag('meta', {
             name: 'msapplication-TileColor',
