iOS PWA

/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [activeTab, setActiveTab] = useState('home'); const renderContent = () => { switch (activeTab) { case 'home': return

Welcome to the Home Screen

; case 'search': return

Search Content Here

; case 'profile': return

User Profile Information

; default: return

Welcome to the App

; } }; return (

{renderContent()}

); } function client() { createRoot(document.getElementById("root")).render(); // Register service worker if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js').then(registration => { console.log('ServiceWorker registration successful with scope: ', registration.scope); }, err => { console.log('ServiceWorker registration failed: ', err); }); }); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === '/manifest.json') { return new Response(JSON.stringify(manifest), { headers: { 'Content-Type': 'application/json' }, }); } if (url.pathname === '/sw.js') { return new Response(serviceWorkerCode, { headers: { 'Content-Type': 'application/javascript' }, }); } return new Response(` iOS PWA

`, { headers: { "content-type": "text/html", }, }); } const manifest = { "name": "iOS PWA", "short_name": "iOS PWA", "start_url": "/", "display": "standalone", "background_color": "#f2f2f7", "theme_color": "#f2f2f7", "icons": [ { "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-192x192", "sizes": "192x192", "type": "image/png" }, { "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-512x512", "sizes": "512x512", "type": "image/png" } ] }; const serviceWorkerCode = ` const CACHE_NAME = 'ios-pwa-cache-v1'; const urlsToCache = [ '/', '/manifest.json', '${import.meta.url}' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); }); `; const css = ` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f2f2f7; color: #000; user-select: none; -webkit-tap-highlight-color: transparent; } .ios-app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; } .status-bar { height: 20px; background-color: #f2f2f7; } .content-area { flex-grow: 1; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; } .tab-bar { display: flex; justify-content: space-around; background-color: #f8f8f8; border-top: 1px solid #d1d1d6; padding-bottom: env(safe-area-inset-bottom); } .tab-bar button { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background: none; border: none; color: #8e8e93; font-size: 10px; transition: color 0.3s ease; } .tab-bar button.active { color: #007aff; } .tab-bar .icon { font-size: 24px; margin-bottom: 4px; } h2 { font-size: 22px; margin-bottom: 20px; } `;

practicalBeigeCapybara

Version 1