v0.4.0-alpha.2

Accumulated Migration Guide on v0.4.0 Breaking Changes

Workbox v6

Check out workbox release page

Using gridsome ImageProcessQueue for image processing

Previously, to serve manifeset and icon in development, icon resizing is implemented by manual sharp in a webpack plugin, which means resizing images on every hot reload. Though fast, it is completely redundant. Although we can configure dev server to resize on the fly, there is still a lot of work.

Using gridsome ImageProcessQueue solved this. And we get rid of sharp as peer dependency. However, there are some tradeoffs:

• cannot set image output name (removed name field in icon config), as gridsome not provide the api
• icons larger than original one is not auto generated.

Option to generate separate maskable icon (#28)

Previously, we control whether icon is "maskable any" or "any" by maskable boolean option:

• When maskable is false, the icons are generated with purpose 'any'
• When maskable is true, the icons are generated with purpose 'maskable any'

{
  androidChrome: {
    src,
    sizes: [512, 384, 192, 144, 96, 72, 48],
    maskable: false,
  },
  // ...
}

This prevents us from generating one set of "maskable" icon and another "any", which is a better practice.

Starting from v0.4.0-alpha.1, You can specify a list of icons for androidChrome:

{
  androidChrome: [
    {
      src: './src/favicon-maskable.png',
      sizes: [512, 384, 192],
      purpose: 'maskable'
    },
    {
      sizes: [144],
      purpose: 'any'
    },
    {
      urls: [
        '/gridsome/assets/static/favicon.7b22250.9bb7ffafafc09ac851d81afb65b8ef59.png'
      ],
      sizes: [180]
    }
  ]
}

Which will produce:

{
    "icons": [
        {
            "src": "/gridsome/assets/static/favicon.7b22250.9bb7ffafafc09ac851d81afb65b8ef59.png",
            "type": "image/png",
            "sizes": "180x180",
            "purpose": "any"
        },
        {
            "src": "/gridsome/assets/static/favicon.d8f1621.9bb7ffafafc09ac851d81afb65b8ef59.png",
            "type": "image/png",
            "sizes": "144x144",
            "purpose": "any"
        },
        {
            "src": "/gridsome/assets/static/favicon-maskable.cbda223.e41c5a7fe43179a6d348f80335f16443.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "maskable"
        },
        {
            "src": "/gridsome/assets/static/favicon-maskable.9b6f2f7.e41c5a7fe43179a6d348f80335f16443.png",
            "type": "image/png",
            "sizes": "384x384",
            "purpose": "maskable"
        },
        {
            "src": "/gridsome/assets/static/favicon-maskable.b49d4b1.e41c5a7fe43179a6d348f80335f16443.png",
            "type": "image/png",
            "sizes": "192x192",
            "purpose": "maskable"
        }
    ]
}

---

Bug Fixes

• androidChrome array (Allan Chain)

Documentation

• add version notice (Allan Chain)

Chores

• release: v0.4.0-alpha.2 (Allan Chain)