highperfocused/zelo-news
1
0
Fork 0
mirror of https://github.com/mroxso/zelo-news.git synced 2026-06-04 01:21:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add PWA support with service worker and icons (#21)

Browse Source 
* feat: add PWA support with service worker and icons

- Updated package.json to include vite-plugin-pwa.
- Added PWA icons: icon-192.png, icon-512.png, and icon.svg.
- Registered service worker in main.tsx for PWA functionality.
- Configured Vite to use PWA plugin with manifest and caching strategies.

* refactor: remove service worker registration code from main.tsx

* fix: update urlPattern regex for NetworkOnly caching handler in vite.config.ts

---------

Co-authored-by: highperfocused <highperfocused@pm.me>
This commit is contained in:
mroxso
2025-10-12 22:02:26 +02:00
committed by GitHub
parent 28445201c9
commit 07920b8742
8 changed files with 4450 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -5,11 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zelo.news - Your Source for Decentralized News</title>
<meta name="description" content="Your Source for Decentralized News" />
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#000000" />
<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="zelo.news" />
<link rel="apple-touch-icon" href="/icon-192.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="manifest" href="/manifest.webmanifest" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="zelo.news - Your Source for Decentralized News" />
<meta property="og:description" content="Your Source for Decentralized News" />
<meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:">
<link rel="manifest" href="/manifest.webmanifest">
</head>
<body>
<div id="root"></div>

4434
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -101,6 +101,7 @@
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.1",
"vite": "^6.3.5",
"vite-plugin-pwa": "^1.0.3",
"vitest": "^3.1.4"
}
}

BIN
public/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
public/icon.svg Normal file
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="128" fill="#000000"/>
<text x="256" y="340" font-family="system-ui, -apple-system, sans-serif" font-size="280" font-weight="bold" fill="#ffffff" text-anchor="middle">Z</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

2
src/main.tsx
View File

@@ -11,4 +11,4 @@ createRoot(document.getElementById("root")!).render(
<ErrorBoundary>
<App />
</ErrorBoundary>
);
);

48
vite.config.ts
View File

@@ -1,6 +1,7 @@
import path from "node:path";
import react from "@vitejs/plugin-react-swc";
import { VitePWA } from 'vite-plugin-pwa';
import { defineConfig } from "vitest/config";
// https://vitejs.dev/config/
@@ -11,6 +12,53 @@ export default defineConfig(() => ({
},
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['icon.svg', 'icon-192.png', 'icon-512.png'],
manifest: {
name: 'zelo.news',
short_name: 'zelo',
description: 'Your Source for Decentralized News',
theme_color: '#000000',
background_color: '#ffffff',
display: 'standalone',
start_url: '/',
icons: [
{
src: '/icon-192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'any maskable'
},
{
src: '/icon-512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable'
}
]
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/.*\.(?:png|jpg|jpeg|svg|gif|webp)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images-cache',
expiration: {
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
{
urlPattern: /^(https|wss):\/\/.*/,
handler: 'NetworkOnly',
},
],
},
}),
],
test: {
globals: true,