ekke/pwa-drawing-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

files for /public

Browse Source 
within /public there is a folder called /public/icons which holds all the icons mentioned in manfest.json
This commit is contained in:
ekke 2026-01-27 09:53:37 +00:00
parent 876e884509
commit 5d81e00aeb
3 changed files with 477 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
manifest.json Normal file
View File

@ -0,0 +1,64 @@
{
"name": "LUPMIS2 Drawing Tools",
"short_name": "LUPMIS",
"description": "Map and GIS functions for Land Use Planning in Ghana",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#f5f5f5",
"theme_color": "#6CCB2D",
"orientation": "any",
"icons": [
{
"src": "/icons/icon-72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"categories": ["productivity", "utilities"],
"lang": "en",
"dir": "ltr"
}

92
offline.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#2d5016">
<title>Offline - LUPMIS</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
color: #333;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.offline-container {
text-align: center;
max-width: 400px;
}
.offline-icon {
font-size: 80px;
margin-bottom: 20px;
}
h1 {
color: #2d5016;
margin-bottom: 10px;
}
p {
color: #666;
line-height: 1.6;
}
button {
background: #2d5016;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
button:hover {
background: #1e3a0f;
}
.hint {
margin-top: 30px;
padding: 15px;
background: #e3f2fd;
border-radius: 8px;
font-size: 14px;
color: #1565c0;
}
</style>
</head>
<body>
<div class="offline-container">
<div class="offline-icon">📴</div>
<h1>You're Offline</h1>
<p>
This page isn't available offline. Please check your internet connection and try again.
</p>
<button onclick="window.location.reload()">Try Again</button>
<div class="hint">
💡 <strong>Tip:</strong> Visit the main app while online first.
Once cached, you can collect data offline!
</div>
</div>
<script>
// Auto-reload when back online
window.addEventListener('online', () => {
window.location.reload();
});
</script>
</body>
</html>

321
sw.js Normal file
View File

@ -0,0 +1,321 @@
/**
* Service Worker
*
* Handles caching of:
* - App shell (HTML, CSS, JS)
* - Map tiles (runtime caching)
* - API responses (network-first)
*
* Note: Database operations are handled by the SharedWorker (shared-db-worker.js),
* NOT by this service worker. They serve different purposes:
* - Service Worker: Caching, offline asset serving, push notifications
* - SharedWorker: Shared database connection across tabs
*/
const CACHE_VERSION = 'v1';
const SHELL_CACHE = `shell-${CACHE_VERSION}`;
const TILES_CACHE = `tiles-${CACHE_VERSION}`;
const MODULES_CACHE = `modules-${CACHE_VERSION}`;
const API_CACHE = `api-${CACHE_VERSION}`;
// Maximum number of tiles to cache
const MAX_TILES = 500;
// App shell assets - precached on install
// Vite will generate hashed filenames, so we cache the entry points
// and let the browser handle the hashed assets
const SHELL_ASSETS = [
'/',
'/index.html',
'/offline.html',
'/manifest.json'
];
// ============================================================================
// INSTALL EVENT
// ============================================================================
self.addEventListener('install', (event) => {
console.log('[SW] Installing...');
event.waitUntil(
caches.open(SHELL_CACHE)
.then((cache) => {
console.log('[SW] Precaching app shell');
return cache.addAll(SHELL_ASSETS);
})
.then(() => self.skipWaiting())
);
});
// ============================================================================
// ACTIVATE EVENT
// ============================================================================
self.addEventListener('activate', (event) => {
console.log('[SW] Activating...');
event.waitUntil(
caches.keys()
.then((cacheNames) => {
return Promise.all(
cacheNames
.filter((name) => {
// Delete old version caches
return (name.startsWith('shell-') && name !== SHELL_CACHE) ||
(name.startsWith('tiles-') && name !== TILES_CACHE) ||
(name.startsWith('modules-') && name !== MODULES_CACHE) ||
(name.startsWith('api-') && name !== API_CACHE);
})
.map((name) => {
console.log('[SW] Deleting old cache:', name);
return caches.delete(name);
})
);
})
.then(() => self.clients.claim())
);
});
// ============================================================================
// FETCH EVENT
// ============================================================================
self.addEventListener('fetch', (event) => {
const request = event.request;
const url = new URL(request.url);
// Only handle GET requests
if (request.method !== 'GET') return;
// Skip chrome-extension and other non-http(s) requests
if (!url.protocol.startsWith('http')) return;
// Route to appropriate caching strategy
if (isMapTile(url)) {
event.respondWith(cacheThenNetwork(request, TILES_CACHE, MAX_TILES));
} else if (isApiRequest(url)) {
event.respondWith(networkFirst(request, API_CACHE));
} else if (isModuleAsset(url)) {
event.respondWith(staleWhileRevalidate(request, MODULES_CACHE));
} else if (isAppAsset(url)) {
event.respondWith(cacheFirst(request, SHELL_CACHE));
}
// Let other requests pass through to network
});
// ============================================================================
// URL CLASSIFICATION
// ============================================================================
function isMapTile(url) {
// Common tile server patterns for all our base maps
return url.hostname.includes('tile.openstreetmap.org') ||
url.hostname.includes('opentopomap.org') ||
url.hostname.includes('arcgisonline.com') ||
url.hostname.includes('basemaps.cartocdn.com') ||
url.hostname.includes('tiles.') ||
url.pathname.match(/\/\d+\/\d+\/\d+\.(png|jpg|pbf)$/) ||
url.pathname.match(/\/tile\/\d+\/\d+\/\d+/);
}
function isApiRequest(url) {
return url.pathname.startsWith('/api/') ||
url.pathname.endsWith('.php');
}
function isModuleAsset(url) {
return url.pathname.startsWith('/modules/');
}
function isAppAsset(url) {
// Same origin, common asset extensions
return url.origin === self.location.origin &&
(url.pathname.endsWith('.html') ||
url.pathname.endsWith('.css') ||
url.pathname.endsWith('.js') ||
url.pathname.endsWith('.wasm') ||
url.pathname.endsWith('.json') ||
url.pathname.match(/\.(png|jpg|jpeg|gif|svg|ico|webp)$/));
}
// ============================================================================
// CACHING STRATEGIES
// ============================================================================
/**
* Cache First - Use cache, fallback to network
* Best for: App shell, static assets
*/
async function cacheFirst(request, cacheName) {
const cached = await caches.match(request);
if (cached) return cached;
try {
const response = await fetch(request);
if (response.ok) {
const cache = await caches.open(cacheName);
cache.put(request, response.clone());
}
return response;
} catch (error) {
// Return offline page for navigation requests
if (request.mode === 'navigate') {
return caches.match('/offline.html');
}
throw error;
}
}
/**
* Network First - Try network, fallback to cache
* Best for: API requests, dynamic content
*/
async function networkFirst(request, cacheName) {
try {
const response = await fetch(request);
if (response.ok) {
const cache = await caches.open(cacheName);
cache.put(request, response.clone());
}
return response;
} catch (error) {
const cached = await caches.match(request);
if (cached) return cached;
throw error;
}
}
/**
* Stale While Revalidate - Return cache immediately, update in background
* Best for: Module assets, frequently updated content
*/
async function staleWhileRevalidate(request, cacheName) {
const cache = await caches.open(cacheName);
const cached = await cache.match(request);
const fetchPromise = fetch(request).then((response) => {
if (response.ok) {
cache.put(request, response.clone());
}
return response;
}).catch(() => cached);
return cached || fetchPromise;
}
/**
* Cache Then Network with limit - Cache tiles with size limit
* Best for: Map tiles
*/
async function cacheThenNetwork(request, cacheName, maxItems) {
const cache = await caches.open(cacheName);
const cached = await cache.match(request);
if (cached) return cached;
try {
const response = await fetch(request);
if (response.ok) {
// Check cache size and trim if needed
const keys = await cache.keys();
if (keys.length >= maxItems) {
// Remove oldest entries (first 10%)
const toDelete = keys.slice(0, Math.ceil(maxItems * 0.1));
await Promise.all(toDelete.map(key => cache.delete(key)));
}
cache.put(request, response.clone());
}
return response;
} catch (error) {
// For tiles, just fail silently - map will show blank tile
return new Response('', { status: 408, statusText: 'Offline' });
}
}
// ============================================================================
// MESSAGE HANDLING
// ============================================================================
self.addEventListener('message', (event) => {
const { type, payload } = event.data || {};
switch (type) {
case 'SKIP_WAITING':
self.skipWaiting();
break;
case 'CACHE_MODULES':
cacheModules(payload.modules);
break;
case 'CLEAR_USER_CACHE':
clearUserCaches();
break;
case 'GET_CACHE_STATUS':
getCacheStatus().then(status => {
event.source.postMessage({ type: 'CACHE_STATUS', status });
});
break;
}
});
/**
* Cache specific modules on demand
*/
async function cacheModules(moduleNames) {
const cache = await caches.open(MODULES_CACHE);
for (const moduleName of moduleNames) {
try {
const moduleAssets = [
`/modules/${moduleName}/index.js`,
`/modules/${moduleName}/index.css`,
`/modules/${moduleName}/index.html`
];
await cache.addAll(moduleAssets.filter(async (url) => {
// Only cache assets that exist
try {
const response = await fetch(url, { method: 'HEAD' });
return response.ok;
} catch {
return false;
}
}));
console.log('[SW] Cached module:', moduleName);
} catch (error) {
console.warn('[SW] Failed to cache module:', moduleName, error);
}
}
}
/**
* Clear user-specific caches (call on logout)
*/
async function clearUserCaches() {
await caches.delete(API_CACHE);
await caches.delete(MODULES_CACHE);
console.log('[SW] Cleared user caches');
}
/**
* Get cache status information
*/
async function getCacheStatus() {
const cacheNames = await caches.keys();
const status = {};
for (const name of cacheNames) {
const cache = await caches.open(name);
const keys = await cache.keys();
status[name] = keys.length;
}
return status;
}