Pwa init, and icons for pwa and web

This commit is contained in:
Bryan1029384756
2026-02-21 16:47:17 -06:00
parent dd313cf8c8
commit 40210672e3
27 changed files with 5132 additions and 203 deletions

View File

@@ -2,8 +2,14 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#1e1f22" />
<meta name="description" content="A Discord clone with voice, video, and text chat" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Discord Clone" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<title>Discord Clone</title>
</head>
<body>

View File

@@ -9,11 +9,12 @@
"preview": "vite preview"
},
"dependencies": {
"@discord-clone/shared": "*",
"@discord-clone/platform-web": "*"
"@discord-clone/platform-web": "*",
"@discord-clone/shared": "*"
},
"devDependencies": {
"@vitejs/plugin-react": "^5.1.1",
"vite": "^7.2.4"
"vite": "^7.2.4",
"vite-plugin-pwa": "^1.2.0"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="512" height="512" rx="96" fill="#5865F2"/>
<text x="256" y="340" font-family="Arial, Helvetica, sans-serif" font-size="320" font-weight="bold" fill="white" text-anchor="middle">#</text>
</svg>

After

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1,9 +1,70 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import path from 'path';
export default defineConfig({
plugins: [react()],
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'Discord Clone',
short_name: 'Discord Clone',
description: 'A Discord clone with voice, video, and text chat',
theme_color: '#1e1f22',
background_color: '#1e1f22',
display: 'standalone',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
},
],
},
workbox: {
maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
globPatterns: ['**/*.{js,css,html,woff,woff2}'],
runtimeCaching: [
{
urlPattern: /\.(?:woff2?|ttf|otf|eot)$/,
handler: 'CacheFirst',
options: {
cacheName: 'fonts-cache',
expiration: {
maxEntries: 30,
maxAgeSeconds: 60 * 60 * 24 * 365,
},
},
},
{
urlPattern: /\.(?:png|jpg|jpeg|gif|webp|svg|ico)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images-cache',
expiration: {
maxEntries: 100,
maxAgeSeconds: 60 * 60 * 24 * 30,
},
},
},
],
navigateFallback: 'index.html',
},
}),
],
base: '/',
envDir: '../../', // Pick up .env.local from project root (for VITE_CONVEX_URL)
resolve: {