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

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:
2026-07-20 15:34:19 +09:00
parent d212451fe0
commit 4a7ef5cc29
6 changed files with 38 additions and 3 deletions
+4 -1
View File
@@ -6,10 +6,12 @@
<title>{% block title %}습관 트래커{% endblock %}</title>
<link rel="manifest" href="/static/manifest.json" />
<meta name="theme-color" content="#d97757" />
<meta name="theme-color" content="#d97757" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#e08962" media="(prefers-color-scheme: dark)" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="습관 트래커" />
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/icon-apple-180.png" />
<link rel="apple-touch-icon" href="/static/icons/icon-192.png" />
<link rel="icon" href="/static/icons/icon-192.png" />
@@ -37,6 +39,7 @@
</div>
{% if current_user %}
<div class="nav-user">
{% if account_level %}<span class="nav-level-pill">Lv.{{ account_level.level }}</span>{% endif %}
<span>{{ current_user.name or current_user.email }}</span>
<form method="post" action="/auth/logout">
<button type="submit" class="btn-link">로그아웃</button>