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/css/style.css
+5
View File
@@ -46,6 +46,7 @@
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
[x-cloak] {
@@ -56,6 +57,7 @@ html,
body {
margin: 0;
padding: 0;
overscroll-behavior-y: none;
}
body {
@@ -239,6 +241,7 @@ p {
text-decoration: none;
color: var(--color-text-muted);
font-size: 11px;
touch-action: manipulation;
}
.bottom-tab-bar .tab-item svg {
@@ -277,6 +280,7 @@ p {
cursor: pointer;
font-family: inherit;
transition: background-color 0.15s ease, opacity 0.15s ease;
touch-action: manipulation;
}
.btn-primary {
@@ -452,6 +456,7 @@ label {
gap: 8px var(--space-2);
padding: 12px 4px;
border-bottom: 1px solid var(--color-border);
touch-action: manipulation;
}
.habit-item:last-child {
app/static/icons/icon-apple-180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 857 B

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>
app/static/service-worker.js
+4 -2
View File
@@ -1,4 +1,4 @@
const CACHE_NAME = "habit-tracker-v3";
const CACHE_NAME = "habit-tracker-v4";
const APP_SHELL = [
"/static/css/style.css",
"/static/js/app.js",
@@ -9,7 +9,9 @@ const APP_SHELL = [
"/static/js/vendor/sortable.min.js",
"/static/icons/icon-192.png",
"/static/icons/icon-512.png",
"/static/icons/icon-apple-180.png",
"/static/manifest.json",
"/static/offline.html",
];
self.addEventListener("install", (event) => {
@@ -50,7 +52,7 @@ self.addEventListener("fetch", (event) => {
}
return response;
})
.catch(() => caches.match(request))
.catch(() => caches.match(request).then((cached) => cached || caches.match("/static/offline.html")))
);
return;
}