feat(HtmlPwaPlugin): adds 'manifestCrossorigin' option (#3939)

close #3933

(cherry picked from commit 49725b4)

Author: BigsonLvrocha

packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js

@@ -7,7 +7,8 @@ const defaults = {
   appleMobileWebAppCapable: 'no',
   appleMobileWebAppStatusBarStyle: 'default',
   assetsVersion: '',
-  manifestPath: 'manifest.json'
+  manifestPath: 'manifest.json',
+  manifestCrossorigin: undefined
 }
 
 const defaultIconPaths = {
@@ -42,7 +43,8 @@ module.exports = class HtmlPwaPlugin {
           appleMobileWebAppStatusBarStyle,
           assetsVersion,
           manifestPath,
-          iconPaths
+          iconPaths,
+          manifestCrossorigin
         } = this.options
         const { publicPath } = compiler.options.output
 
@@ -64,10 +66,17 @@ module.exports = class HtmlPwaPlugin {
           }),
 
           // Add to home screen for Android and modern mobile browsers
-          makeTag('link', {
-            rel: 'manifest',
-            href: `${publicPath}${manifestPath}${assetsVersionStr}`
-          }),
+          makeTag('link', manifestCrossorigin
+            ? {
+              rel: 'manifest',
+              href: `${publicPath}${manifestPath}${assetsVersionStr}`,
+              crossorigin: manifestCrossorigin
+            }
+            : {
+              rel: 'manifest',
+              href: `${publicPath}${manifestPath}${assetsVersionStr}`
+            }
+          ),
           makeTag('meta', {
             name: 'theme-color',
             content: themeColor

packages/@vue/cli-plugin-pwa/ui.js

@@ -76,6 +76,28 @@ module.exports = api => {
             description: 'org.vue.pwa.config.pwa.appleMobileWebAppStatusBarStyle.description',
             default: 'default',
             value: data.vue && data.vue.pwa && data.vue.pwa.appleMobileWebAppStatusBarStyle
+          },
+          {
+            name: 'manifestCrossorigin',
+            type: 'list',
+            message: 'org.vue.pwa.config.pwa.manifestCrossorigin.message',
+            description: 'org.vue.pwa.config.pwa.manifestCrossorigin.description',
+            default: undefined,
+            value: data.vue && data.vue.pwa && data.vue.pwa.manifestCrossorigin,
+            choices: [
+              {
+                name: 'none',
+                value: undefined
+              },
+              {
+                name: 'anonymous',
+                value: 'anonymous'
+              },
+              {
+                name: 'use-credentials',
+                value: 'use-credentials'
+              }
+            ]
           }
         ]
       }

packages/@vue/cli-ui/locales/en.json

@@ -721,6 +721,10 @@
             "appleMobileWebAppStatusBarStyle": {
               "message": "Apple mobile status bar style",
               "description": "Style for the web app status bar on iOS"
+            },
+            "manifestCrossorigin": {
+              "message": "Attribute value for manifest.json link tag's crossorigin attribute",
+              "description": "Value for `crossoriging` attribute in manifest link tag in the generated HTML, you may need to set this if your pwa is behind an authenticated proxy"
             }
           }
         },