Improve the app's experience when added to the iPhone home screen
Implement Progressive Web App (PWA) features for enhanced mobile experience, including service worker registration, manifest.json updates for standalone mode, and CSS adjustments for iOS safe area and touch interactions. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ab9cd02a-d0b2-4288-9ceb-1964d0059648 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/ab9cd02a-d0b2-4288-9ceb-1964d0059648/mbX83Mu
This commit is contained in:
@@ -65,6 +65,11 @@
|
||||
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 50%, hsl(260, 40%, 20%) 100%);
|
||||
color: hsl(210, 40%, 98%);
|
||||
min-height: 100vh;
|
||||
/* iOS PWA optimizacije */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -365,6 +370,44 @@ input[data-testid*="search"]::placeholder {
|
||||
}
|
||||
}
|
||||
|
||||
/* iOS PWA safe area optimizacije */
|
||||
@supports (padding: max(0px)) {
|
||||
.has-fixed-header {
|
||||
padding-top: max(80px, env(safe-area-inset-top));
|
||||
}
|
||||
}
|
||||
|
||||
/* PWA full screen optimizacije za iOS */
|
||||
@media (display-mode: standalone) {
|
||||
body {
|
||||
/* Prepreči povlečenje za osvežitev na iOS */
|
||||
overscroll-behavior-y: none;
|
||||
/* Prilagodi safe area */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
.header-sticky {
|
||||
top: env(safe-area-inset-top) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dodatne mobile optimizacije */
|
||||
@media (max-width: 768px) {
|
||||
/* Prepreči zoom pri fokusiranju input polj */
|
||||
input, select, textarea {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* Optimiziraj touch targets za iOS */
|
||||
button, a, [role="button"] {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Test grid overlay */
|
||||
body.show-grid::after {
|
||||
content: '';
|
||||
|
||||
@@ -2,4 +2,17 @@ import { createRoot } from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
// Registracija Service Worker-ja za PWA funkcionalnost
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then((registration) => {
|
||||
console.log('SW registered: ', registration);
|
||||
})
|
||||
.catch((registrationError) => {
|
||||
console.log('SW registration failed: ', registrationError);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(<App />);
|
||||
|
||||
Reference in New Issue
Block a user