v0.4.0-alpha.5

Bug Fixes

• let vue meta update on page (Allan Chain)

Chores

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

v0.4.0-alpha.4

Bug Fixes

• disable hydration in app shell (Allan Chain)

Documentation

• update app shell doc (Allan Chain)

Tests

• app shell mode in basic (Allan Chain)

Chores

• enhance console message (Allan Chain)
• release: v0.4.0-alpha.4 (Allan Chain)

v0.4.0-alpha.3

Accumulated v0.4.0 Releae Note

Using 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-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"
        },
        {
            "src": "/gridsome/assets/static/favicon.d8f1621.9bb7ffafafc09ac851d81afb65b8ef59.png",
            "type": "image/png",
            "sizes": "144x144",
            "purpose": "any"
        },
        {
            "src": "/gridsome/assets/static/favicon.7b22250.9bb7ffafafc09ac851d81afb65b8ef59.png",
            "type": "image/png",
            "sizes": "180x180",
            "purpose": "any"
        }
    ]
}

New appShellPath option

Provides a hack to support precaching a offline/index.html as the entry point. Check the docs for more info.

---

Features

• app shell mode (Allan Chain)

Bug Fixes

• webpack plugin apply (Allan Chain)
• manifest parse error handling (Allan Chain)
• keep manifest icon order (Allan Chain)

Styles

• lint fix (Allan Chain)

Chores

• update inject example and test (Allan Chain)
• enable lint for example projects (Allan Chain)
• release: v0.4.0-alpha.3 (Allan Chain)

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)

v0.4.0-alpha.1

Accumulated Migration Guide on 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]
    }
  ]
}

---

Features

• use gridsome image processing (Allan Chain)
• support different source for maskable & any (Allan Chain)

Documentation

• simple fix (Allan Chain)

Tests

• (try fix with) dynamic icon get (Allan Chain)
• puppeteer and lighthouse (Allan Chain)
• fix coverage and useTrueBuild (Allan Chain)
• fix icon size (Allan Chain)

Chores

• example: fix sw registration (Allan Chain)
• fix compileSW comment (Allan Chain)
• example: fix sw registration (Allan Chain)
• remove core-js (Allan Chain)
• release: v0.4.0-alpha.1 (Allan Chain)

Commits

• [2fa2298]: Merge branch 'feat/gridsome-image' into 0.4.0 (Allan Chain)

v0.4.0-alpha.0

BREAKING CHANGES

• Using workbox v6

Features

• webpack plugin in injectManifest mode (Allan Chain)

Documentation

• update developing step for yarn 2 (Allan Chain)

Tests

• fix windows path (Allan Chain)
• fix util api change (Allan Chain)
• use fork to test develop (Allan Chain)

Builds

• deps-dev: bump axios from 0.19.2 to 0.20.0 (#17) #17 (dependabot[bot])
• deps: bump object-path from 0.11.4 to 0.11.5 in /examples/basic (#19) #19 (dependabot[bot])
• deps-dev: bump axios from 0.20.0 to 0.21.0 (#21) #21 (dependabot[bot])
• deps-dev: bump eslint-config-standard from 14.1.1 to 15.0.0 (#22) #22 (dependabot[bot])
• deps-dev: bump eslint-config-standard from 15.0.1 to 16.0.1 (#23) #23 (dependabot[bot])
• deps-dev: bump eslint-plugin-standard from 4.1.0 to 5.0.0 (#24) #24 (dependabot[bot])
• deps: bump ini from 1.3.5 to 1.3.8 in /examples/basic (#26) #26 (dependabot[bot])

Continuous Integration

• lint after test (Allan Chain)
• use yarn 2 (Allan Chain)

Chores

• deps: upgrade example deps (Allan Chain)
• remove debug log (Allan Chain)
• deps: upgrade dependencies in example/basic (Allan Chain)
• deps: remove unused rename dependency (Allan Chain)
• remove unnecessary files in example (Allan Chain)
• separate test cases using yarn 2 feature (Allan Chain)
• organize deps and upgrade to workbox 6 (Allan Chain)
• release: v0.4.0-alpha.0 (Allan Chain)

Commits

• [df349f8]: Merge branch 'master' of github.com:AllanChain/gridsome-plugin-pwa into master (Allan Chain)
• [59329fd]: Merge branch 'master' of github.com:AllanChain/gridsome-plugin-pwa (Allan Chain)

v0.3.0

0.3.0 (2020-08-10)

Major changes:

• use workbox-build to support precaching gridsome-built files (html, json ...)
• more powerful icon option
• test coverage

See v0.3.0-alpha.0 and v0.3.0-alpha.1 for detail

v0.3.0-alpha.1

0.3.0-alpha.1 (2020-08-02)

Bug Fixes

• icon: use appleMaskIcon in icon (d4e89bf)

Features

• powerful custom icons (49ed476)

BREAKING CHANGES

• icon: appleMaskIcon move to icon

v0.3.0-alpha.0

0.3.0-alpha.0 (2020-07-28)

Bug Fixes

• meta: skip checking msTileColor (c27146c)
• remove svg favicon option (447dde7)
• compile-sw: correct ID (662e3fb)
• workbox: add path prefix (39d8336)
• await promise (2eabef6)
• example: additional entry path prefix (4abf879)

Features

• workbox-build for non-asset manifest support (e2b2970)
• workboxCompileSrc option (0a871e4)

Performance Improvements

• do not generate unused icons (607dc2c)

BREAKING CHANGES

• use generateSW and injectManifest (note lower case)

• use workbox-build config
• remove svgFavicon option

v0.2.5

0.2.5 (2020-07-26)

Bug Fixes

• example: service worker path (0aa4ada)
• workbox: also do exclude on InjectManifest (c40d0fa)