signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add Progressive Web App functionality

Browse source 
- Add web app manifest for home screen installation
- Implement service worker with offline caching strategy
- Create offline fallback page with auto-reconnect
- Generate PWA icons in multiple sizes (72px-512px)
- Add PWA meta tags and Apple Touch icons to all pages
- Register service worker with graceful degradation
- Update documentation with PWA installation instructions
- Add browserconfig.xml for Windows tile support

Features:
- Installable on mobile and desktop
- Offline functionality with cached resources
- App-like experience in standalone mode
- Automatic updates when online
- Works seamlessly with existing progressive enhancement

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Code 2025-07-06 00:46:00 -04:00
parent 10c6e54062
commit c13b61cd03
21 changed files with 940 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

89
public/offline.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline - Great Lakes Ice Report</title>
<link rel="stylesheet" href="style.css">
<style>
.offline-container {
max-width: 600px;
margin: 50px auto;
padding: 2rem;
text-align: center;
}
.offline-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.7;
}
.offline-message {
background: var(--card-bg);
color: var(--text-color);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.retry-btn {
margin-top: 1rem;
padding: 0.75rem 1.5rem;
background-color: var(--primary-color, #2196F3);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.retry-btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div class="offline-container">
<div class="offline-message">
<div class="offline-icon">📡</div>
<h1>You're Offline</h1>
<p>It looks like you've lost your internet connection. The Great Lakes Ice Report needs an internet connection to show current road conditions and submit new reports.</p>
<p><strong>When you're back online, you'll be able to:</strong></p>
<ul style="text-align: left; max-width: 400px; margin: 1rem auto;">
<li>View current ice condition reports</li>
<li>Submit new hazard reports</li>
<li>Get real-time location updates</li>
<li>Access the interactive map</li>
</ul>
<button class="retry-btn" onclick="window.location.reload()">
🔄 Try Again
</button>
<p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.8;">
This app works best with an internet connection for up-to-date safety information.
</p>
</div>
</div>
<script>
// Auto-reload when connection is restored
window.addEventListener('online', () => {
window.location.reload();
});
// Apply theme from localStorage if available
(function() {
const savedTheme = localStorage.getItem('theme') || 'auto';
if (savedTheme === 'auto') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
} else {
document.documentElement.setAttribute('data-theme', savedTheme);
}
})();
</script>
</body>
</html>