为PWA制作启动图

npm install -g pwa-asset-generator

sudo pwa-asset-generator ./public/logo.png ./public/start-img/
日间模式 
sudo pwa-asset-generator ./public/logo.png ./public/start-img/ -b #303030 -d  
-d 表示夜间模式 -b 背景颜色

"icons": [
  {
    "src": "public/start-img/manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "public/start-img/manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "public/start-img/manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "public/start-img/manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]

// 优雅一点的方法 使用ejs模板
// vite.config.ts
import { appleDeviceSpecsForLaunchImages } from 'pwa-asset-generator'
import { createHtmlPlugin } from 'vite-plugin-html'

defineConfig({
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          appleDeviceSpecsForLaunchImages
        }
      }
    })
  ]
})

<% appleDeviceSpecsForLaunchImages.forEach(function(spec) { %>
  <link rel="apple-touch-startup-image"
    href="/start-img/apple-splash-<%= spec.portrait.width %>-<%= spec.portrait.height %>.jpg"
    media="(device-width: <%= spec.portrait.width / spec.scaleFactor %>px) and (device-height: <%= spec.portrait.height / spec.scaleFactor %>px) and (-webkit-device-pixel-ratio: <%= spec.scaleFactor %>) and (orientation: portrait)" />
  <link rel="apple-touch-startup-image"
    href="/start-img/apple-splash-dark-<%= spec.portrait.width %>-<%= spec.portrait.height %>.jpg"
    media="(prefers-color-scheme: dark) and (device-width: <%= spec.portrait.width / spec.scaleFactor %>px) and (device-height: <%= spec.portrait.height / spec.scaleFactor %>px) and (-webkit-device-pixel-ratio: <%= spec.scaleFactor %>) and (orientation: portrait)" />
  <% }); %>