Support modern image formats

[mtdvlpr]

I love your work!

What would make this tool even better, is the possibility to output .webp and .avif assets, alongside the .png assets.

[userquin]

In theory it is possible but you must provide fallbacks like PNG or SVG, because not all browsers or OS versions support them universally when used in the pwa webmanifest:

import sharp from 'sharp';

async function convertToModernFormats(inputPath, outputPath) {
 // Convert to AVIF (best quality)
 await sharp(inputPath).avif({ quality: 80 }).toFile(`${outputPath}.avif`);

 // Convert to WebP (great fallback)
 await sharp(inputPath).webp({ quality: 75 }).toFile(`${outputPath}.webp`);
}

convertToModernFormats('image.png', 'image');

I need to check what's needed here, perhaps another deep refactoring to be able to build the array correctly. I'll need some time; I'm really busy at work. 🙏

We should resolve if we also need to create all icons variants (maskable, transparent...), just an example using 2/3 svg:

// pwa-assets.config.ts
import {
  defineConfig,
  minimal2023Preset as preset,
} from '@vite-pwa/assets-generator/config'

export default defineConfig({
  headLinkOptions: {
    preset: '2023',
  },
  preset,
  images: [
    'pwa-icons/default/favicon.svg',
    'pwa-icons/favicon/favicon.svg',
    'pwa-icons/monochrome/logo.svg',
    'pwa-icons/pwa/logo.svg',
    'pwa-icons/docs/pwa/favicon.svg',
    'pwa-icons/docs/monochrome/logo.svg',
  ],
})

then with this script I generate all the pwa icons, and then run one of the following scripts:

    "pwa-assets:default": "pwa-assets-generator && PWA_MODE=default tsx ./pwa-icons/generate.mts",
    "pwa-assets:full": "pwa-assets-generator && PWA_MODE=full tsx ./pwa-icons/generate.mts",

where pwa-icons/generate.mts is:

// pwa-icons/generate.mts
import type { IconResource } from 'vite-plugin-pwa'
import * as fsp from 'node:fs/promises'
import { resolve } from 'node:path'
import * as process from 'node:process'
import { fileURLToPath } from 'node:url'
import { generateCode, parseModule } from 'magicast'

const root = fileURLToPath(new URL('..', import.meta.url))
const pub = resolve(root, 'public')
const plugins = resolve(root, 'vite-plugins')
const def = resolve(root, 'pwa-icons/default')
const mono = resolve(root, 'pwa-icons/monochrome')
const favi = resolve(root, 'pwa-icons/favicon')
const pwa = resolve(root, 'pwa-icons/pwa')
const pwaDocs = resolve(root, 'pwa-icons/docs/pwa')
const monoDocs = resolve(root, 'pwa-icons/docs/monochrome')
const publicDocs = resolve(root, 'docs/public')

const mode = process.env.PWA_MODE || 'default'

generatePWAIcons(mode)

async function generatePWAIcons(mode: string) {
  const pwaIcons = parseModule<{
    icons: IconResource[]
  }>(`// DO NOT EDIT THIS MODULE IT IS AUTOGENERATED
import type { IconResource } from 'vite-plugin-pwa'

export const icons: IconResource[] = []
`)

  // cleanup old icons
  await Promise.all(...([pub, publicDocs].map(p => ([
    fsp.rm(resolve(p, 'favicon.ico'), { force: true }),
    fsp.rm(resolve(p, 'favicon.svg'), { force: true }),
    fsp.rm(resolve(p, 'pwa-64x64.png'), { force: true }),
    fsp.rm(resolve(p, 'pwa-192x192.png'), { force: true }),
    fsp.rm(resolve(p, 'pwa-512x512.png'), { force: true }),
    fsp.rm(resolve(p, 'maskable-icon-512x512.png'), { force: true }),
    fsp.rm(resolve(p, 'apple-touch-icon-180x180.png'), { force: true }),
    fsp.rm(resolve(p, 'pwa-monochrome-64x64.png'), { force: true }),
    fsp.rm(resolve(p, 'pwa-monochrome-192x192.png'), { force: true }),
    fsp.rm(resolve(p, 'pwa-monochrome-512x512.png'), { force: true }),
  ]))))

  const tasks: Promise<void>[] = []

  if (mode !== 'default') {
    pwaIcons.exports.icons = [
      {
        src: 'pwa-64x64.png',
        sizes: '64x64',
        type: 'image/png',
      },
      {
        src: 'pwa-monochrome-64x64.png',
        sizes: '64x64',
        type: 'image/png',
        purpose: 'monochrome',
      },
      {
        src: 'pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: 'pwa-monochrome-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'monochrome',
      },
      {
        src: 'pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any',
      },
      {
        src: 'pwa-monochrome-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'monochrome',
      },
      {
        src: 'maskable-icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable',
      },
    ]
    tasks.push(
      fsp.copyFile(resolve(favi, 'favicon.ico'), resolve(pub, 'favicon.ico')),
      fsp.copyFile(resolve(favi, 'favicon.svg'), resolve(pub, 'favicon.svg')),
      fsp.copyFile(resolve(pwa, 'pwa-64x64.png'), resolve(pub, 'pwa-64x64.png')),
      fsp.copyFile(resolve(pwa, 'pwa-192x192.png'), resolve(pub, 'pwa-192x192.png')),
      fsp.copyFile(resolve(pwa, 'pwa-512x512.png'), resolve(pub, 'pwa-512x512.png')),
      fsp.copyFile(resolve(pwa, 'maskable-icon-512x512.png'), resolve(pub, 'maskable-icon-512x512.png')),
      fsp.copyFile(resolve(pwa, 'apple-touch-icon-180x180.png'), resolve(pub, 'apple-touch-icon-180x180.png')),
      fsp.copyFile(resolve(mono, 'pwa-64x64.png'), resolve(pub, 'pwa-monochrome-64x64.png')),
      fsp.copyFile(resolve(mono, 'pwa-192x192.png'), resolve(pub, 'pwa-monochrome-192x192.png')),
      fsp.copyFile(resolve(mono, 'pwa-512x512.png'), resolve(pub, 'pwa-monochrome-512x512.png')),
    )
  }
  else {
    pwaIcons.exports.icons = [
      {
        src: 'pwa-64x64.png',
        sizes: '64x64',
        type: 'image/png',
      },
      {
        src: 'pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: 'pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any',
      },
      {
        src: 'maskable-icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable',
      },
    ]
    tasks.push(
      fsp.copyFile(resolve(def, 'favicon.ico'), resolve(pub, 'favicon.ico')),
      fsp.copyFile(resolve(def, 'favicon.svg'), resolve(pub, 'favicon.svg')),
      fsp.copyFile(resolve(def, 'pwa-64x64.png'), resolve(pub, 'pwa-64x64.png')),
      fsp.copyFile(resolve(def, 'pwa-192x192.png'), resolve(pub, 'pwa-192x192.png')),
      fsp.copyFile(resolve(def, 'pwa-512x512.png'), resolve(pub, 'pwa-512x512.png')),
      fsp.copyFile(resolve(def, 'maskable-icon-512x512.png'), resolve(pub, 'maskable-icon-512x512.png')),
      fsp.copyFile(resolve(def, 'apple-touch-icon-180x180.png'), resolve(pub, 'apple-touch-icon-180x180.png')),
    )
  }
  tasks.push(
    fsp.copyFile(resolve(pwaDocs, 'favicon.ico'), resolve(publicDocs, 'favicon.ico')),
    fsp.copyFile(resolve(pwaDocs, 'favicon.svg'), resolve(publicDocs, 'favicon.svg')),
    fsp.copyFile(resolve(pwaDocs, 'pwa-64x64.png'), resolve(publicDocs, 'pwa-64x64.png')),
    fsp.copyFile(resolve(pwaDocs, 'pwa-192x192.png'), resolve(publicDocs, 'pwa-192x192.png')),
    fsp.copyFile(resolve(pwaDocs, 'pwa-512x512.png'), resolve(publicDocs, 'pwa-512x512.png')),
    fsp.copyFile(resolve(pwaDocs, 'maskable-icon-512x512.png'), resolve(publicDocs, 'maskable-icon-512x512.png')),
    fsp.copyFile(resolve(pwaDocs, 'apple-touch-icon-180x180.png'), resolve(publicDocs, 'apple-touch-icon-180x180.png')),
    fsp.copyFile(resolve(monoDocs, 'pwa-64x64.png'), resolve(publicDocs, 'pwa-monochrome-64x64.png')),
    fsp.copyFile(resolve(monoDocs, 'pwa-192x192.png'), resolve(publicDocs, 'pwa-monochrome-192x192.png')),
    fsp.copyFile(resolve(monoDocs, 'pwa-512x512.png'), resolve(publicDocs, 'pwa-monochrome-512x512.png')),
  )
  tasks.push(fsp.writeFile(
    resolve(plugins, 'pwa-icons.ts'),
    `${generateCode(pwaIcons, {
      trailingComma: true,
      quote: 'single',
      arrayBracketSpacing: false,
      objectCurlySpacing: true,
      lineTerminator: '\n',
      format: {
        trailingComma: true,
        quote: 'single',
        arrayBracketSpacing: false,
        objectCurlySpacing: true,
        useSemi: false,
      },
    }).code}\n`,
    {
      encoding: 'utf8',
    },
  ))
  // move the new ones
  await Promise.all(tasks)

running the full variant I generate this (imported and used in the pwa plugin configuration):

// DO NOT EDIT THIS MODULE IT IS AUTOGENERATED
import type { IconResource } from 'vite-plugin-pwa'

export const icons: IconResource[] = [{
  src: 'pwa-64x64.png',
  sizes: '64x64',
  type: 'image/png',
}, {
  src: 'pwa-monochrome-64x64.png',
  sizes: '64x64',
  type: 'image/png',
  purpose: 'monochrome',
}, {
  src: 'pwa-192x192.png',
  sizes: '192x192',
  type: 'image/png',
}, {
  src: 'pwa-monochrome-192x192.png',
  sizes: '192x192',
  type: 'image/png',
  purpose: 'monochrome',
}, {
  src: 'pwa-512x512.png',
  sizes: '512x512',
  type: 'image/png',
  purpose: 'any',
}, {
  src: 'pwa-monochrome-512x512.png',
  sizes: '512x512',
  type: 'image/png',
  purpose: 'monochrome',
}, {
  src: 'maskable-icon-512x512.png',
  sizes: '512x512',
  type: 'image/png',
  purpose: 'maskable',
}]

If we need to include also avif and webp variants...