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
+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 {