Understanding Offline Mode and Caching

LobbyFlight is designed for 24/7 operation in hotel lobbies. The intelligent caching system ensures that your display continues to show flight information even during network interruptions.

How Offline Mode Works

Service Worker Architecture

LobbyFlight uses a Service Worker - a JavaScript technology that runs in the background and manages caching.

Benefits:

Instant display loading (from cache)

Automatic data caching

Background synchronization

Offline functionality

What Gets Cached?

App files (HTML, CSS, JS)	Until update	At app release
Content	Storage Duration	Update Frequency
---------	------------------	------------------
Flight data	6 hours	Based on tierutes
Weather data	2 hours	Every 30 minutes
Logo and images	Unlimited	On change
Configuration	24 hours	On change

Offline Behavior

When Internet is Lost

Immediate response (0-5 seconds):

- Service Worker intercepts requests

- Cached data is delivered

- User notices nothing

After 10 seconds:

- Orange status bar appears: "Offline mode"

- Cached flight data continues to display

- Last update time is shown

After 30 minutes:

- Warning appears: "Data may be outdated"

- Display continues to work

- Users are informed

After 6 hours:

- Cached data marked as stale

- Clear indication shown

- System continues to attempt reconnection

Automatic Reconnection

The system continuously tries to restore the connection:

// Reconnection logic
function tryReconnect() {
  fetch('/api/health')
    .then(() => {
      showNotification('Connection restored')
      refreshData()
    })
    .catch(() => {
      attempts++
      const delay = attempts < 30 ? 1000 :
                   attempts < 60 ? 5000 : 30000
      setTimeout(tryReconnect, delay)
    })
}

Cache Management

Automatic Cleanup

Service Worker performs automatic cleanup:

On app update:

New Service Worker version is installed

Old cache versions are identified

Outdated caches are deleted

New version is activated

Code:

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== CURRENT_CACHE)
          .map(name => caches.delete(name))
      )
    })
  )
})

Manual Cache Clearing

Method 1: Via Browser DevTools

Open Chrome → F12

Application Tab → Storage

Cache Storage → lobbyflight-v1

Right-click → Delete

Method 2: Via JavaScript Console

// Clear all caches
caches.keys().then(names => {
  names.forEach(name => caches.delete(name))
})

// Re-register Service Worker
navigator.serviceWorker.getRegistration().then(reg => {
  reg.unregister()
  window.location.reload()
})

Method 3: Hard Refresh

Windows/Linux: Ctrl + Shift + F5

Mac: Cmd + Shift + R

Android Chrome: Settings → Privacy → Clear Browsing Data

Method 4: Message API

// Send cache-clear message to Service Worker
navigator.serviceWorker.controller.postMessage({
  type: 'CLEAR_CACHE',
  cache: 'all' // or 'api', 'assets', 'runtime'
})

Cache Size Management

Browser Limits:

Chrome: 6% of available storage

Firefox: 10% of available storage

Safari: 50MB initial, expandable

LobbyFlight typical usage:

Initial: 3-5 MB

After 1 day: 10-15 MB

After 1 week: 20-30 MB

Maximum: ~50 MB

Automatic Eviction:

Browser automatically deletes old caches when:

Storage space is low

Other apps need storage

Cache older than 7 days without use

Troubleshooting Offline Issues

Problem: Old Data Displayed

Symptoms:

Yesterday's flights visible

Weather is incorrect

Configuration outdated

Diagnosis:

Chrome DevTools → Application → Cache Storage

Check 'sw-cached-at' header

Compare with current time

Solutions:

Hard Refresh (Ctrl+Shift+F5)

Clear cache manually

Re-register Service Worker

Reinstall app (PWA)

Problem: Offline Mode Despite Internet

Symptoms:

Orange offline bar permanently visible

Health checks failing

But internet works

Diagnosis:

Console → Network Tab

Search for failed /api/health requests

Check for CORS or TLS errors

Solutions:

Check firewall rules

Check proxy configuration

Clear DNS cache

Restart browser

Problem: Service Worker Not Loading

Symptoms:

No offline mode available

Cache not working

PWA installation failed

Diagnosis:

// Run in Console
navigator.serviceWorker.getRegistrations().then(regs => {
  console.log('Registered SWs:', regs)
})

Solutions:

Use HTTPS (mandatory!)

Localhost is OK for testing

Disable incognito mode

Perform browser update

Problem: Cache Growing Too Large

Symptoms:

Browser becomes slow

"Storage quota exceeded" error

Display responds sluggishly

Diagnosis:

// Check cache size
navigator.storage.estimate().then(estimate => {
  console.log(`Used: ${estimate.usage / 1024 / 1024}MB`)
  console.log(`Quota: ${estimate.quota / 1024 / 1024}MB`)
})

Solutions:

Delete old caches

Optimize image sizes

Adjust cache strategy

Increase storage quota (if possible)

Best Practices for Offline Operation

Optimal Configuration

For stable network:

Short cache times (5 minutes)

Aggressive updates

Minimal caching

For unstable network:

Longer cache times (15-30 minutes)

More precaching

Offline-first approach

Preparation for Offline

Before deployment:

Let display load completely online

Click through all tabs once

Let it run for 10 minutes (fills caches)

Then move to final position

Regular maintenance:

Weekly: Browser restart

Monthly: Cache clear

Quarterly: Browser update

Monitoring

What to monitor:

Offline events per day

Average offline duration

Cache hit rate

Failed API requests

Alert thresholds:

> 10 offline events/day

> 30 minutes offline at once

Cache size > 100MB

Hit rate < 50%

Advanced Configuration

Custom Offline Page

You can design a custom offline page:

HTML Template (/public/custom-offline.html):

<!DOCTYPE html>
<html>
<head>
  <title>Offline - [Hotel Name]</title>
  <style>
    /* Your custom styling */
  </style>
</head>
<body>
  <div class="container">
    <img src="/logo.png" alt="Hotel Logo">
    <h1>Currently no connection</h1>
    <p>Showing cached flight data...</p>
    <div id="last-update"></div>
  </div>
  <script>
    // Custom reconnect logic
  </script>
</body>
</html>

Customizing Cache Strategies

For special requirements:

// Longer cache time for images
if (request.destination === 'image') {
  return caches.match(request) || fetch(request).then(response => {
    cache.put(request, response.clone())
    return response
  })
}

// No cache for specific APIs
if (request.url.includes('/realtime/')) {
  return fetch(request) // Always fresh
}

Offline Analytics

Tracking offline events:

// On offline
navigator.sendBeacon('/api/analytics', JSON.stringify({
  event: 'offline_start',
  timestamp: new Date().toISOString(),
  cached_items: await countCachedItems()
}))

// On reconnect
navigator.sendBeacon('/api/analytics', JSON.stringify({
  event: 'offline_end',
  duration: offlineDuration,
  cache_hits: cacheHitCount
}))

Understanding Offline Mode and Caching