import * as React from "react"
 
import { usePWAInstall } from "@/hooks/use-pwa-install"
 
export function InstallBanner() {
  const { canInstall, isInstalled, promptCount, promptInstall } =
    usePWAInstall()
 
  const handleInstall = async () => {
    const outcome = await promptInstall()
    console.log("user choice:", outcome)
  }
 
  if (!canInstall || isInstalled) {
    return null
  }
 
  return (
    <div className="rounded-lg border bg-card p-4">
      <p>Install this app for an improved, full-screen experience.</p>
      <button onClick={handleInstall}>Install</button>
      <p className="text-xs text-muted-foreground">
        Prompt shown {promptCount} time(s)
      </p>
    </div>
  )
}

{
  "name": "My App",
  "short_name": "MyApp",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#0b0b0f",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

export async function generateMetadata() {
  return {
    manifest: "/manifest.webmanifest",
  }
}

"use client"
 
import * as React from "react"
 
export function PWARegistration() {
  React.useEffect(() => {
    if (
      !("serviceWorker" in navigator) ||
      (!window.isSecureContext && window.location.hostname !== "localhost")
    ) {
      return
    }
 
    navigator.serviceWorker
      .register("/sw.js", { scope: "/" })
      .catch((error) => {
        console.warn("Service worker registration failed:", error)
      })
  }, [])
 
  return null
}

self.addEventListener("install", () => {
  self.skipWaiting()
})
 
self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim())
})
 
self.addEventListener("fetch", (event) => {
  event.respondWith(fetch(event.request))
})