chris
490ad9b7f1
- Rasterised the SVG to pwa-192 / pwa-512 / pwa-maskable-512 (logo in the safe zone, full-bleed background) and a real apple-touch-icon.png; manifest now lists PNG "any" + a dedicated "maskable". - Manifest shortcuts: Team, Search, Type chart. - lib/install.js captures beforeinstallprompt so the app can offer installation itself — a one-time toast, and an "Install app" button in Settings (falls back to a "use your browser menu" hint where the event never fires, e.g. iOS). - index.html: apple-touch-icon PNG + apple-mobile-web-app meta. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
import { defineConfig } from 'vite';
|
|
import { VitePWA } from 'vite-plugin-pwa';
|
|
|
|
// GitHub Pages / sub-path friendly: set BASE_PATH env at build time if needed.
|
|
const base = process.env.BASE_PATH || '/';
|
|
|
|
export default defineConfig({
|
|
base,
|
|
build: {
|
|
target: 'es2020',
|
|
sourcemap: true,
|
|
},
|
|
plugins: [
|
|
VitePWA({
|
|
strategies: 'injectManifest',
|
|
srcDir: 'src',
|
|
filename: 'sw.js',
|
|
registerType: 'prompt',
|
|
injectManifest: {
|
|
globPatterns: ['**/*.{js,css,html,svg,png,ico,json,webmanifest}'],
|
|
// The bundled PokéAPI snapshot can be a few hundred KB.
|
|
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
|
|
},
|
|
includeAssets: [
|
|
'icon.svg',
|
|
'favicon.svg',
|
|
'apple-touch-icon.png',
|
|
],
|
|
manifest: {
|
|
name: 'Pokédex',
|
|
short_name: 'Pokédex',
|
|
description:
|
|
'A responsive, offline-capable Pokédex reference powered by PokéAPI.',
|
|
start_url: './',
|
|
scope: './',
|
|
display: 'standalone',
|
|
orientation: 'portrait',
|
|
background_color: '#0b0b0c',
|
|
theme_color: '#b3161a',
|
|
categories: ['games', 'reference', 'utilities'],
|
|
icons: [
|
|
{ src: 'icon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' },
|
|
{ src: 'pwa-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
|
|
{ src: 'pwa-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
|
|
{
|
|
src: 'pwa-maskable-512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'maskable',
|
|
},
|
|
],
|
|
shortcuts: [
|
|
{
|
|
name: 'Team builder',
|
|
short_name: 'Team',
|
|
url: './#/team',
|
|
icons: [{ src: 'pwa-192.png', sizes: '192x192' }],
|
|
},
|
|
{
|
|
name: 'Search',
|
|
short_name: 'Search',
|
|
url: './#/search',
|
|
icons: [{ src: 'pwa-192.png', sizes: '192x192' }],
|
|
},
|
|
{
|
|
name: 'Type chart',
|
|
short_name: 'Types',
|
|
url: './#/types',
|
|
icons: [{ src: 'pwa-192.png', sizes: '192x192' }],
|
|
},
|
|
],
|
|
},
|
|
devOptions: {
|
|
enabled: false,
|
|
type: 'module',
|
|
},
|
|
}),
|
|
],
|
|
});
|