Optimize caching strategy with HTTP headers and enhanced service worker configuration and solve first render white screen issue (#1482)

[tomivm]

Summary

Implements a comprehensive multi-layered caching strategy by adding HTTP caching and enhancing service worker configuration for optimal performance in our Azure-deployed React SPA.

Changes

• Added a new location block in default.conf to match static assets in /public (e.g. /images, /symbols, /ogv), including subfolders.

• Applies to file types: .svg, .png, .jpg, .jpeg, .gif, .webp, .ico, .js, .css, .woff, .woff2.

• Sets a single Cache-Control header:

  Cache-Control: public, max-age=31536000, immutable

• Removed the expires directive to avoid duplicate cache headers.

• Suppressed access and 404 logs for these static assets to reduce log noise.

---

🌟 Why

• Improved performance on repeat visits: assets are cached for up to 1 year.

• Better CDN and browser caching: allows intermediaries to reuse responses efficiently.

• Works seamlessly with Create React App’s service worker setup:

  • Assets are fingerprinted (.hash.ext), so long-term caching is safe.
  • The service worker still controls updates and offline capabilities.

---

Service Worker Enhancements (sw-precache-config.js)

• Expanded static file precaching: Include all files in static directory instead of excluding map files
• Runtime caching for static assets: Added cacheFirst strategy for /static/ URLs with 200 file limit
• SPA navigation support: Added navigateFallback: '/index.html' for proper React Router functionality
• API route protection: Whitelist prevents API calls from being cached as HTML fallbacks
• Improved cache-busting: Enhanced regex to cover more file types (js, css, json, images)

Benefits

• Multi-layered Caching: Server-side (Azure Application Gateway) + client-side (Service Worker) optimization
• Improved Performance: Static assets cached for 1 year at CDN level, instant serving via service worker
• Enhanced SPA Experience: Proper offline support and direct route navigation for React Router
• Optimal Cache Strategy: HTML files remain fresh while hashed assets benefit from long-term caching
• Reduced Server Load: Fewer requests reach Docker containers for returning users
• Better Offline Experience: Service worker precaching and runtime caching for seamless offline usage

Technical Details

• Service Worker: cacheFirst strategy for static assets with API route protection via whitelist

• SPA Routing: navigateFallback ensures direct navigation to React routes works offline

• Cache Coordination: Both layers respect the same file patterns and hash-based invalidation

• Asset Updates: When assets change, new hashes generate different filenames, bypassing all cache layers naturally

• SPA Navigation: Test direct URL access (e.g., /dashboard) works both online and offline

• API Protection: Verify API calls aren't cached as HTML responses

✅ How to Test Locally

# From the project root, build the Docker image
docker build -t my-react-app .

# Run the container, exposing port 8080
docker run --rm -p 8080:80 my-react-app

1. Open the app in your browser at: http://localhost:8080

2. In DevTools → Network tab, inspect a request to any asset in /images, /symbols, etc.

3. Confirm the response includes the header:

   Cache-Control: public, max-age=31536000, immutable

4. Validate service worker behavior:

   • Service Worker: Can be tested locally after build (npm run build && serve -s build)
   • Open the app and check if the log 'Cached assets for offline use' appears