feat: get pwa working

This commit is contained in:
Jixun Wu 2023-05-22 00:29:27 +01:00
parent c6c373f9fc
commit af61d23fd4
7 changed files with 2035 additions and 12 deletions

View File

@ -4,6 +4,11 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>音乐解锁 - Unlock Music</title>
<meta name="description" content="音乐解锁 - Unlock Music" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/pwa-512x512.png" sizes="512x512" />
<meta name="theme-color" content="#4DBA87" />
</head>
<body>
<main id="root"></main>

View File

@ -54,6 +54,7 @@
"prettier": "^2.8.8",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vite-plugin-pwa": "^0.15.0",
"vite-plugin-top-level-await": "^1.3.0",
"vite-plugin-wasm": "^3.2.2",
"vitest": "^0.31.0"

File diff suppressed because it is too large Load Diff

BIN
public/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 641 B

BIN
public/pwa-192x192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/pwa-512x512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -8,6 +8,7 @@ import react from '@vitejs/plugin-react';
import wasm from 'vite-plugin-wasm';
import replace from '@rollup/plugin-replace';
import topLevelAwait from 'vite-plugin-top-level-await';
import { VitePWA } from 'vite-plugin-pwa';
const gitRoot = url.fileURLToPath(new URL('.', import.meta.url));
const pkg = JSON.parse(fs.readFileSync(gitRoot + '/package.json', 'utf-8'));
@ -52,6 +53,34 @@ export default defineConfig({
react(),
wasm(),
topLevelAwait(),
VitePWA({
registerType: 'prompt',
workbox: {
// Cache everything from dist
globPatterns: ['**/*.{js,css,html,ico,png,svg,wasm}'],
},
manifest: {
display: 'standalone',
name: '音乐解锁 (Unlock Music)',
short_name: '音乐解锁',
lang: 'zh-cmn-Hans-CN',
description: '在现代浏览器解锁已购的加密音乐!',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'maskable',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
}),
],
resolve: {
alias: {