移动端Chrome离线缓存更新：定制日历离线访问及同步方案咨询

Hey Chris, great question—offline support is make-or-break for field engineers stuck in spotty connectivity areas, so let’s break down a practical, production-ready solution for your custom calendar and ticketing system.

1. Core Tech Stack: Service Workers + Cache API + IndexedDB #

This trio covers both static asset caching and dynamic data storage, which you’ll need for a fully functional offline calendar.

• Service Workers: Acts as a network proxy, intercepting requests to serve cached content or fallback data when offline.
• Cache API: Stores static resources (HTML, CSS, JS, icons) so your app’s UI loads even without a connection.
• IndexedDB: Stores structured, dynamic data like ticket details and calendar events (way better than localStorage for large, complex datasets).

Step-by-Step Implementation #

Register the Service Worker

Add this to your main app JS to activate the service worker on page load:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker registered successfully:', registration);
    } catch (error) {
      console.error('Service Worker registration failed:', error);
    }
  });
}

Precache Static Assets

In your sw.js, use the install event to cache core static files (including a custom offline page):

const CACHE_NAME = 'calendar-offline-v1';
const PRECACHE_ASSETS = [
  '/',
  '/offline.html',
  '/css/calendar.css',
  '/js/calendar.js',
  '/assets/calendar-icon.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_ASSETS))
      .then(() => self.skipWaiting()) // Activate new SW immediately
  );
});

Store Dynamic Data in IndexedDB

When online, sync tickets and calendar events to IndexedDB. Use a library like localForage to simplify IndexedDB operations, or go native:

// Example: Save tickets to IndexedDB when online
async function saveTicketsToLocal(tickets) {
  const db = await openDB('CalendarDB', 1, {
    upgrade(db) {
      db.createObjectStore('tickets', { keyPath: 'id' });
    }
  });
  await db.put('tickets', tickets);
}

// Fetch local tickets when offline
async function getTicketsFromLocal() {
  const db = await openDB('CalendarDB', 1);
  return db.getAll('tickets');
}

2. Offline Request Handling & Fallbacks #

Use the service worker’s fetch event to route requests appropriately:

• Serve static assets from cache first, update cache in the background.
• For API requests (ticket/calendar data), return local IndexedDB data when offline.
• Replace Chrome’s default offline page with your custom one for unmatched requests.

self.addEventListener('fetch', (event) => {
  // Handle API requests for tickets/calendar data
  if (event.request.url.includes('/api/tickets')) {
    event.respondWith(
      fetch(event.request)
        .then(async (networkResponse) => {
          // Update local cache with fresh data when online
          const tickets = await networkResponse.clone().json();
          saveTicketsToLocal(tickets);
          return networkResponse;
        })
        .catch(() => {
          // Fallback to local data when offline
          return getTicketsFromLocal().then(tickets => {
            return new Response(JSON.stringify(tickets), {
              headers: { 'Content-Type': 'application/json' }
            });
          });
        })
    );
  } else {
    // Handle static asset requests
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // Serve cached content, then update cache in background
          if (cachedResponse) {
            fetch(event.request).then(networkResponse => {
              caches.open(CACHE_NAME).then(cache => {
                cache.put(event.request, networkResponse);
              });
            });
            return cachedResponse;
          }
          // Fallback to custom offline page if cache misses and offline
          return fetch(event.request).catch(() => caches.match('/offline.html'));
        })
    );
  }
});

3. Automatic Cache Updates #

Ensure users get the latest app version and data when they reconnect:

Service Worker & Cache Versioning

In sw.js, use the activate event to clean up old caches when a new version is deployed:

self.addEventListener('activate', (event) => {
  const currentCaches = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim()) // Take control of all open tabs
  });
});

Dynamic Data Sync on Reconnection

Trigger a data refresh when the user comes back online:

// Listen for online event to sync fresh data
window.addEventListener('online', async () => {
  try {
    const latestTickets = await fetch('/api/tickets').then(res => res.json());
    await saveTicketsToLocal(latestTickets);
    // Notify users data is updated (use your app's notification system)
    showToast('Calendar data updated successfully!');
  } catch (error) {
    console.error('Failed to sync data:', error);
  }
});

For more robust offline actions (like saving ticket status updates made offline), use the Background Sync API—it lets you queue actions and run them automatically when the user reconnects.

4. Bonus Optimizations #

• Custom Offline Page: Design a page that matches your app’s branding, with a clear message and a button to load local calendar data.
• Data Expiry: Add timestamps to IndexedDB entries, and only sync changes from the server when online (reduces bandwidth usage).
• Progressive Enhancement: Ensure core calendar/ticket viewing works offline first, then add online-only features (like ticket editing) as enhancements.

内容的提问来源于stack exchange，提问作者Chris Needham