QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 03:54:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

PWA offline error page + login page cleanup (#327)

Browse Source 
* Add friendly PWA offline error page

When the PWA fails to connect to the server, users now see a branded
offline page with a friendly "technical difficulties" message, the
app logo, and a reload button. The page automatically attempts to
reload when connectivity is restored.

Changes:
- Created public/offline.html with branded offline experience
- Updated service worker to cache and serve offline page on network failures
- Added service worker registration in application.js
- Service worker now handles navigation requests with offline fallback

* Extract PWA offline logo to separate cached asset

Move the inline SVG logo from offline.html to a separate file at
public/logo-offline.svg. This makes the logo asset easily identifiable
and maintainable, as it may diverge from other logo versions in the future.

Changes:
- Created public/logo-offline.svg with the offline page logo
- Updated service worker to cache logo as part of OFFLINE_ASSETS array
- Updated fetch handler to serve cached offline assets
- Updated offline.html to reference logo file instead of inline SVG

* Update offline message for better readability

Signed-off-by: Juan José Mata <juanjo.mata@gmail.com>

* CodeRabbit comments

* Keep 40x and 50x flowing

* Dark mode

* Logo tweaks

* Login/sign up cleanup

---------

Signed-off-by: Juan José Mata <juanjo.mata@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Juan José Mata
2025-11-16 21:12:48 +01:00
committed by GitHub
parent 066fdf4ed5
commit d47aa2fe90
14 changed files with 208 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
public/offline.html Normal file
View File

@@ -0,0 +1,121 @@
<!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="#1a1a1a" media="(prefers-color-scheme: dark)">
<title>Offline - Maybe</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #F9F9F9;
color: #1a1a1a;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 400px;
text-align: center;
}
.logo {
width: 120px;
height: auto;
margin: 0 auto 32px;
}
h1 {
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
color: #1a1a1a;
}
p {
font-size: 16px;
color: #666;
margin-bottom: 32px;
line-height: 1.5;
}
.reload-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #62a446;
color: white;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 0.2s ease;
}
.reload-button:hover {
background: #528938;
}
.reload-button:active {
background: #467730;
}
.reload-icon {
width: 20px;
height: 20px;
}
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f9f9f9;
}
h1 {
color: #f9f9f9;
}
p {
color: #999;
}
}
</style>
</head>
<body>
<div class="container">
<img src="/logo-offline.svg" alt="Logo" class="logo">
<h1>We're experiencing <br/> technical difficulties</h1>
<p>It looks like you're offline or we can't reach our servers right now. Please check your connection and try again.</p>
<button class="reload-button" onclick="window.location.reload()">
<svg class="reload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
</svg>
Reload
</button>
</div>
<script>
// Automatically reload when connection is restored
window.addEventListener('online', function() {
setTimeout(function() {
window.location.reload();
}, 1000);
});
</script>
</body>
</html>