Zum Inhalt

Office Add-in Image Caching Configuration

Microsoft Requirements

According to Microsoft documentation, all image URIs used for add-in commands must support caching in production. The server hosting images shouldn't return Cache-Control headers specifying no-cache, no-store, or similar options in production.

However, during development, using Cache-Control headers is advisable to see image changes immediately.

Configuration

This project includes proper nginx configuration to handle both development and production scenarios:

Development Mode (No Caching)

Images are served with Cache-Control: no-cache to allow immediate visibility of changes.

# Run in development mode
docker-compose -f docker-compose.yml -f docker-compose.development.yml up

# Or set environment variable directly
docker run -e NGINX_ENV=development your-image

Production Mode (Proper Caching)

Images are served with proper caching headers as required by Microsoft.

# Run in production mode (default)
docker-compose -f docker-compose.yml -f docker-compose.production.yml up

# Or build and run normally (production is default)
docker-compose up

Caching Behavior

Production Mode (NGINX_ENV=production)

  • Images (.png, .jpg, .gif, .ico, .svg): Cache-Control: public, immutable with 1-year expiry
  • Static Assets (.css, .js, fonts): Cache-Control: public, immutable with 1-year expiry
  • HTML Files: Cache-Control: no-cache, no-store, must-revalidate (always fresh)
  • Manifest/JSON: Cache-Control: no-cache, no-store, must-revalidate (always fresh)

Development Mode (NGINX_ENV=development)

  • Images: Cache-Control: no-cache, no-store, must-revalidate (see changes immediately)
  • Static Assets: Cache-Control: no-cache, no-store, must-revalidate (see changes immediately)
  • HTML/Manifest: Same as production (always fresh)

Files Modified

  • apps/outlook-addin/nginx.conf - Custom nginx configuration with caching rules
  • apps/outlook-addin/Dockerfile - Updated to use custom nginx config and environment variable
  • apps/outlook-addin/docker-entrypoint.sh - Updated to handle caching mode selection
  • docker-compose.development.yml - Development override for no-cache mode
  • docker-compose.production.yml - Production configuration with proper caching

Verification

You can verify the caching headers by checking the HTTP response headers:

# Check image caching in production
curl -I http://localhost:4400/assets/icon-32.png

# Should return:
# Cache-Control: public, immutable
# Expires: [future date]

# Check image caching in development
curl -I http://localhost:4400/assets/icon-32.png

# Should return:
# Cache-Control: no-cache, no-store, must-revalidate
# Pragma: no-cache

Important Notes

  1. Production Deployment: Always ensure NGINX_ENV=production (or omit it, as it's the default)
  2. Microsoft Compliance: Production mode ensures compliance with Microsoft's caching requirements
  3. Development Workflow: Use development mode when frequently updating images/assets
  4. CDN Compatibility: The production caching headers work well with CDNs and proxy servers