OrangeCone Setup Guide

Manual setup steps for PWA features and offline functionality

What's Already Done
Service Worker registration component
IndexedDB offline queue system
Performance monitoring dashboard
Offline indicator component
Accessibility improvements
1
Create PWA Manifest

Create manifest.json in your public directory:

{
  "name": "OrangeCone",
  "short_name": "OrangeCone",
  "description": "Public Space Issue Reporting & Management",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ea580c",
  "orientation": "any",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Don't forget: Create icon files (icon-192.png and icon-512.png) with your OrangeCone logo in the public directory.

2
Deploy Service Worker

Get the service worker code from the backend function and save it to your public directory:

  1. Visit functions/getServiceWorkerCode endpoint in your dashboard
  2. Copy the serviceWorkerCode content
  3. Save as service-worker.js in your public directory
  4. Copy the offlineHTML content
  5. Save as offline.html in your public directory

Note: The service worker is already registered in your Layout component via ServiceWorkerRegistration.

3
Add HTML Meta Tags

Add these tags to your index.html in the <head> section:

<!-- PWA Meta Tags -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ea580c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="OrangeCone">
<link rel="apple-touch-icon" href="/icon-192.png">

<!-- Splash Screens (optional) -->
<link rel="apple-touch-startup-image" href="/splash-screen.png">
4
Testing & Verification

Desktop Testing

Open Chrome DevTools → Application → Service Workers to verify registration

Mobile Testing

Visit your app on mobile, you should see "Add to Home Screen" prompt

Offline Testing

Enable airplane mode and verify the app still loads cached content

Lighthouse Audit

Run Lighthouse in DevTools to check PWA score

Additional Features Available

✓ Offline Queue System

IndexedDB-based queue for offline report creation and updates

✓ Performance Monitoring

Real-time metrics for mobile performance, battery, and connectivity

✓ Accessibility Improvements

ARIA labels, touch targets, and screen reader support

Future Enhancement: Push Notifications

Requires additional backend service and user permissions setup

Future Enhancement: Offline Maps

Requires implementing tile caching with Leaflet.offline plugin