Skip to content
Permalink
Browse files
feat(icon): add support for icon purpose (#246)
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
  • Loading branch information
hans00 and pi0 committed Mar 12, 2020
1 parent 7a48d2a commit 9248174fe8bac352318c8fe292012156ccfd56ad
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 1 deletion.
@@ -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
@@ -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
}))
}

@@ -6,6 +6,10 @@ module.exports = {
{ handler: require('../../') }
],

icon: {
purpose: 'maskable'
},

manifest: {
name: 'Test Project Name',
description: 'Test Project Description'
@@ -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')

0 comments on commit 9248174

Please sign in to comment.