feat(icon): add support for icon purpose (#246)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

Author: hans00

docs/modules/icon.md

@@ -48,3 +48,16 @@ Will return an empty string when no icon in the given size is available (eg. whe
 - Default: '$icon'
 
 Name of property for accessible icons.
+
+**purpose**
+- Default: null
+
+Array or string of icon purpose.
+Example:
+```js
+purpose: [ 'badge', 'maskable' ]
+// or
+purpose: 'maskable'
+```
+
+More detail of "purpose": https://w3c.github.io/manifest/#purpose-member

lib/icon/module.js

@@ -24,6 +24,7 @@ async function run (pwa, _emitAssets) {
     iconProperty: '$icon',
     publicPath,
     iconSrc: null,
+    purpose: null,
 
     _iconHash: null,
     _cacheDir: null,
@@ -45,6 +46,18 @@ async function run (pwa, _emitAssets) {
     return
   }
 
+  // Verify purpose
+  if (options.purpose) {
+    const purpose = Array.isArray(options.purpose) ? options.purpose : [options.purpose]
+    const len = purpose.length
+    const validPurpose = ['badge', 'maskable', 'any']
+    options.purpose = purpose.filter(item => validPurpose.includes(item))
+    if (len !== options.purpose.len) {
+      // eslint-disable-next-line no-console
+      console.warn('[pwa] [icon] Some invalid items removed from `options.purpose`. Valid values: ' + validPurpose)
+    }
+  }
+
   // Generate icons
   await generateIcons.call(this, options)
 
@@ -109,11 +122,15 @@ async function generateIcons (options) {
     options._icons[size] = `${options.targetDir}/icon_${size}.${options.iconHash}.png`
   }
 
+  // Generate _purpose
+  const purpose = options.purpose ? options.purpose.join(' ') : undefined
+
   // Generate _assetIcons
   options._assetIcons = options.sizes.map(size => ({
     src: joinUrl(options.publicPath, options._icons[size]),
     sizes: `${size}x${size}`,
-    type: 'image/png'
+    type: 'image/png',
+    purpose
   }))
 }
 

test/fixture/nuxt.config.js

@@ -6,6 +6,10 @@ module.exports = {
     { handler: require('../../') }
   ],
 
+  icon: {
+    purpose: 'maskable'
+  },
+
   manifest: {
     name: 'Test Project Name',
     description: 'Test Project Description'

test/pwa.test.js

@@ -34,6 +34,19 @@ describe('pwa', () => {
     expect(html).toContain('/_nuxt/icons/icon_512.b8f3a1.png')
   })
 
+  test('icons purpose', () => {
+    const assetDir = path.join(nuxt.options.generate.dir, '_nuxt')
+    const manifestFileName = fs.readdirSync(assetDir).find(item => item.match(/^manifest.+\.json$/i))
+    const manifestContent = JSON.parse(fs.readFileSync(path.join(assetDir, manifestFileName)))
+    expect(manifestContent.icons).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          purpose: expect.stringMatching(/( ?(any|maskable|badge))+/)
+        })
+      ])
+    )
+  })
+
   test('sw.js', async () => {
     const swContents = await fs.readFile(path.resolve(nuxt.options.generate.dir, 'sw.js'), 'utf-8')