shinalok/habit-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve PWA feel on iOS: offline fallback, overscroll, tap feedback, dark status bar, apple touch icon

Browse Source 
Add offline.html served by the service worker when a never-visited route
is requested without network. Disable rubber-band overscroll bounce and
gray tap highlights so standalone mode feels less like a webview. Split
theme-color by prefers-color-scheme so the iOS status bar matches dark
mode, and add a proper 180x180 apple-touch-icon instead of downscaling
the 192px icon.
This commit is contained in:
shinalok
2026-07-20 15:34:19 +09:00
parent d212451fe0
commit 4a7ef5cc29
6 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/offline.html
+23
View File
@@ -0,0 +1,23 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>오프라인 - 습관 트래커</title>
<link rel="icon" href="/static/icons/icon-192.png" />
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
<div class="app-shell" style="display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-3);">
<div class="card" style="text-align: center; max-width: 360px;">
<p style="font-size: 15px; color: var(--color-text); margin: 0 0 var(--space-2);">
오프라인 상태예요. 이 화면은 아직 캐시에 저장되지 않았어요.
</p>
<p style="font-size: 13px; color: var(--color-text-muted); margin: 0 0 var(--space-3);">
네트워크 연결을 확인한 뒤 다시 시도해주세요.
</p>
<button type="button" class="btn btn-primary btn-block" onclick="location.reload()">다시 시도</button>
</div>
</div>
</body>
</html>