feat: enable PWA with icons, service worker, and touch icons\n\nAdd PWA icons, service worker, and Apple touch icons for standalone app experience
This commit is contained in:
parent
be9798cfa5
commit
6dbc116704
3
.gitignore
vendored
3
.gitignore
vendored
@ -9,4 +9,5 @@ instrumentation-client.ts
|
||||
node_modules/
|
||||
.next/
|
||||
.env*.local
|
||||
.DS_Store
|
||||
.DS_Store
|
||||
.vercel
|
||||
|
||||
@ -37,10 +37,24 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" href="/icons/icon-192.jpg" />
|
||||
</head>
|
||||
<body
|
||||
className={`${inter.variable} ${spaceGrotesk.variable} font-sans antialiased`}
|
||||
>
|
||||
{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
})
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
BIN
public/icons/icon-192.jpg
Normal file
BIN
public/icons/icon-192.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
public/icons/icon-512.jpg
Normal file
BIN
public/icons/icon-512.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -3,20 +3,23 @@
|
||||
"short_name": "InFocus",
|
||||
"description": "Teile deine Filmerlebnisse mit deiner Familie",
|
||||
"start_url": "/feed",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#111318",
|
||||
"theme_color": "#111318",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/icon-192.png",
|
||||
"src": "/icons/icon-192.jpg",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
"type": "image/jpeg",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-512.png",
|
||||
"src": "/icons/icon-512.jpg",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
"type": "image/jpeg",
|
||||
"purpose": "any"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
61
public/sw.js
Normal file
61
public/sw.js
Normal file
@ -0,0 +1,61 @@
|
||||
const CACHE_NAME = "infocus-v1"
|
||||
const PRECACHE_URLS = ["/feed", "/search", "/diary", "/lists", "/profile"]
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_URLS))
|
||||
)
|
||||
self.skipWaiting()
|
||||
})
|
||||
|
||||
self.addEventListener("activate", (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((keys) =>
|
||||
Promise.all(
|
||||
keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
|
||||
)
|
||||
)
|
||||
)
|
||||
self.clients.claim()
|
||||
})
|
||||
|
||||
self.addEventListener("fetch", (event) => {
|
||||
// Network-first strategy for API calls
|
||||
if (event.request.url.includes("/api/")) {
|
||||
event.respondWith(
|
||||
fetch(event.request).catch(() => caches.match(event.request))
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
// Cache-first for static assets (images, fonts, etc.)
|
||||
if (
|
||||
event.request.destination === "image" ||
|
||||
event.request.destination === "font" ||
|
||||
event.request.destination === "style"
|
||||
) {
|
||||
event.respondWith(
|
||||
caches.match(event.request).then(
|
||||
(cached) =>
|
||||
cached ||
|
||||
fetch(event.request).then((response) => {
|
||||
const clone = response.clone()
|
||||
caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone))
|
||||
return response
|
||||
})
|
||||
)
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
// Network-first for HTML pages
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then((response) => {
|
||||
const clone = response.clone()
|
||||
caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone))
|
||||
return response
|
||||
})
|
||||
.catch(() => caches.match(event.request))
|
||||
)
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user