feat: generate manifest.json. merge old manifest.json, and throw warn.

vuejs · aweikalee · Nov 18, 2018 · Mar 26, 2019 · Mar 26, 2019 · 79ac0dc35ac3f6d68fab4cd272774b2a965913ab
commit 79ac0dc35ac3f6d68fab4cd272774b2a965913ab
diff --git a/packages/@vue/cli-plugin-pwa/README.md b/packages/@vue/cli-plugin-pwa/README.md
@@ -74,8 +74,24 @@ file, or the `"vue"` field in `package.json`.
     If the following attributes are not defined in the object, the options of `pwa` or default options will be used instead.
       - name: `pwa.name`
       - short_name: `pwa.name`
-      - start_url: `'.'`
+      - icons:
+        ```js
+        [
+          {
+            src: './img/icons/android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: './img/icons/android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+        ```
+      - start_url: `'./index.html'`
       - display: `'standalone'`
+      - background_color: `'#000000'`
       - theme_color: `pwa.themeColor`
 
 - **pwa.iconPaths**

diff --git a/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js b/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
@@ -26,6 +26,28 @@ test('pwa', async () => {
   expect(project.has('dist/manifest.json')).toBe(true)
   expect(project.has('dist/img/icons/android-chrome-512x512.png')).toBe(true)
 
+  const manifest = await project.read('dist/manifest.json')
+  expect(JSON.parse(manifest)).toEqual({
+    name: 'pwa-build',
+    short_name: 'pwa-build',
+    theme_color: '#4DBA87',
+    icons: [
+      {
+        src: './img/icons/android-chrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png'
+      },
+      {
+        src: './img/icons/android-chrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png'
+      }
+    ],
+    start_url: './index.html',
+    display: 'standalone',
+    background_color: '#000000'
+  })
+
   // Make sure the base preload/prefetch are not affected
   const index = await project.read('dist/index.html')
 

diff --git a/packages/@vue/cli-plugin-pwa/index.js b/packages/@vue/cli-plugin-pwa/index.js
@@ -6,14 +6,16 @@ module.exports = (api, options) => {
     }
 
     const name = api.service.pkg.name
+    const assetsPublic = api.resolve('public')
     const userOptions = options.pwa || {}
 
     // the pwa plugin hooks on to html-webpack-plugin
     // and injects icons, manifest links & other PWA related tags into <head>
     webpackConfig
       .plugin('pwa')
         .use(require('./lib/HtmlPwaPlugin'), [Object.assign({
-          name
+          name,
+          assetsPublic
         }, userOptions)])
         .after('html')
 

diff --git a/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js b/packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js
@@ -24,7 +24,7 @@ const defaultManifest = {
       "type": "image/png"
     }
   ],
-  start_url: '.',
+  start_url: './index.html',
   display: 'standalone',
   background_color: "#000000"
 }
@@ -132,20 +132,52 @@ module.exports = class HtmlPwaPlugin {
 
     })
 
+    // generated manifest.json
     compiler.hooks.emit.tapAsync(ID, (data, cb) => {
       const {
         name,
+        assetsPublic,
         themeColor,
         manifestPath,
         manifestOptions
       } = this.options
+
       const publicOptions = {
         name,
         short_name: name,
         theme_color: themeColor
       }
+
+      const manifestFilePath = path.resolve(assetsPublic, manifestPath)
+      let fileManifest
+      try {
+        fileManifest = JSON.parse(
+          fs.readFileSync(manifestFilePath).toString()
+        )
+
+        // Check the generated manifest.json (without file) is identical to the existing one
+        const nofileManifest = Object.assign(publicOptions, defaultManifest, manifestOptions)
+        const isIdentical = !Object.keys(fileManifest).find((key) => {
+          return (
+            JSON.stringify(fileManifest[key]) !==
+            JSON.stringify(nofileManifest[key])
+          )
+        })
+
+        // Throw info or warn
+        setTimeout(() => {
+          if (isIdentical) {
+            info(`You can safely delete the manifest.json redundant file.\nFile Path: ${manifestFilePath}`)
+          } else {
+            warn(`Recommend: Use pwa.manifestOptions instead of ${manifestFilePath}`)
+          }
+        }, 1000)
+      } catch (err) {
+        fileManifest = {}
+      }
+
       const outputManifest = JSON.stringify(
-        Object.assign(publicOptions, defaultManifest, manifestOptions)
+        Object.assign(publicOptions, defaultManifest, fileManifest, manifestOptions)
       )
       data.assets[manifestPath] = {
         source: () => outputManifest,