PixelPilot: Instructions file for GitHub Copilot

UI/UX Progressive Web Apps (PWA) 2026

Service workers, manifest.json, app icon generation, and offline fallback strategies for modern web apps.

---

1. MANIFEST.JSON (Icons, Theme, Display)

{
  "name": "OpenCode Premium UI/UX",
  "short_name": "OpenCode",
  "description": "The definitive UI/UX design system for 2026.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#0066FF",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

---

2. SERVICE WORKER (Basic Offline Fallback)

// sw.js — Service Worker
const CACHE_NAME = 'opencode-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/styles/tokens.css',
  '/styles/globals.css',
  '/scripts/main.js',
  '/offline.html'
];

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(response => {
      return response || fetch(e.request).catch(() => caches.match('/offline.html'));
    })
  );
});

---

3. SERVICE WORKER REGISTRATION

// Register Service Worker in main.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW Registered', reg))
      .catch(err => console.log('SW Registration Failed', err));
  });
}

---

4. APP ICON GENERATION (Touch Icons, Favicon)

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">

<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#0066FF">