mirror of
https://github.com/clucraft/PriceGhost.git
synced 2026-04-25 00:36:32 +02:00
Add PWA support for mobile app-like experience
- Create ghost icon with gradient background and price tag - Add manifest.json with app metadata and icon references - Implement service worker with network-first caching strategy - Update index.html with PWA meta tags and SW registration Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
clucraft
parent
3d6af13ac4
commit
3cedae65bc
4 changed files with 143 additions and 2 deletions
|
|
@ -2,12 +2,43 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/ghost.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#6366f1" />
|
||||
<meta name="background-color" content="#0f172a" />
|
||||
<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="PriceGhost" />
|
||||
<meta name="application-name" content="PriceGhost" />
|
||||
<meta name="description" content="Track product prices and get notified when they drop" />
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link rel="apple-touch-icon" href="/icon.svg" />
|
||||
|
||||
<!-- Manifest -->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
|
||||
<title>PriceGhost - Track Product Prices</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
|
||||
<!-- Register Service Worker -->
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then((registration) => {
|
||||
console.log('SW registered:', registration.scope);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('SW registration failed:', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
21
frontend/public/icon.svg
Normal file
21
frontend/public/icon.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="ghostGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#818cf8"/>
|
||||
<stop offset="100%" style="stop-color:#6366f1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background circle -->
|
||||
<circle cx="256" cy="256" r="240" fill="url(#ghostGrad)"/>
|
||||
<!-- Ghost body -->
|
||||
<path d="M256 100c-70.7 0-128 57.3-128 128v120c0 8 6 14 12 14 8 0 14-8 14-20v-30c0-8 8-14 16-14s16 6 16 14v30c0 12 6 20 14 20s14-8 14-20v-30c0-8 8-14 16-14s16 6 16 14v30c0 12 6 20 14 20s14-8 14-20v-30c0-8 8-14 16-14s16 6 16 14v30c0 12 6 20 14 20 6 0 12-6 12-14V228c0-70.7-57.3-128-128-128z" fill="white" opacity="0.95"/>
|
||||
<!-- Left eye -->
|
||||
<ellipse cx="210" cy="220" rx="20" ry="24" fill="#6366f1"/>
|
||||
<!-- Right eye -->
|
||||
<ellipse cx="302" cy="220" rx="20" ry="24" fill="#6366f1"/>
|
||||
<!-- Price tag -->
|
||||
<g transform="translate(320, 120) rotate(15)">
|
||||
<rect x="0" y="0" width="60" height="40" rx="6" fill="#10b981"/>
|
||||
<text x="30" y="28" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="22" font-weight="bold">$</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
25
frontend/public/manifest.json
Normal file
25
frontend/public/manifest.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "PriceGhost",
|
||||
"short_name": "PriceGhost",
|
||||
"description": "Track product prices and get notified when they drop",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0f172a",
|
||||
"theme_color": "#6366f1",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icon.svg",
|
||||
"sizes": "512x512",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"categories": ["shopping", "finance", "utilities"]
|
||||
}
|
||||
64
frontend/public/sw.js
Normal file
64
frontend/public/sw.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
const CACHE_NAME = 'priceghost-v1';
|
||||
const STATIC_ASSETS = [
|
||||
'/',
|
||||
'/icon.svg',
|
||||
'/manifest.json'
|
||||
];
|
||||
|
||||
// Install - cache static assets
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
return cache.addAll(STATIC_ASSETS);
|
||||
})
|
||||
);
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
// Activate - clean up old caches
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((cacheNames) => {
|
||||
return Promise.all(
|
||||
cacheNames
|
||||
.filter((name) => name !== CACHE_NAME)
|
||||
.map((name) => caches.delete(name))
|
||||
);
|
||||
})
|
||||
);
|
||||
self.clients.claim();
|
||||
});
|
||||
|
||||
// Fetch - network first, fallback to cache
|
||||
self.addEventListener('fetch', (event) => {
|
||||
// Skip non-GET requests
|
||||
if (event.request.method !== 'GET') return;
|
||||
|
||||
// Skip API requests - always go to network
|
||||
if (event.request.url.includes('/api/')) return;
|
||||
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then((response) => {
|
||||
// Clone the response before caching
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(event.request, responseClone);
|
||||
});
|
||||
return response;
|
||||
})
|
||||
.catch(() => {
|
||||
// Network failed, try cache
|
||||
return caches.match(event.request).then((cachedResponse) => {
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
// If it's a navigation request, return the cached index
|
||||
if (event.request.mode === 'navigate') {
|
||||
return caches.match('/');
|
||||
}
|
||||
return new Response('Offline', { status: 503 });
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue