构建离线优先Web应用：实现用户在线状态检测与安全校验需求

Hey there! Building an offline-first web app with conditional security checks (only validating credentials when online) is a smart approach for balancing functionality and security. Let’s walk through a practical implementation:

1. Reliable Online/Offline State Detection #

First, we need to accurately track the user’s connectivity. The navigator.onLine API is the starting point, but it has limitations (e.g., it might report "online" even if the network can’t reach your server). Combine it with a heartbeat check for better accuracy:

let isOnline = navigator.onLine;

// Listen for native online/offline events
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

// Optional: Heartbeat check for more reliable detection
function startHeartbeat() {
  setInterval(async () => {
    try {
      // Fetch a tiny, static resource (e.g., a 1x1 pixel image or empty endpoint)
      const response = await fetch('/heartbeat', { cache: 'no-store' });
      isOnline = response.ok;
    } catch (err) {
      isOnline = false;
    }
    updateOnlineStatus();
  }, 10000); // Check every 10 seconds
}

function updateOnlineStatus() {
  isOnline = navigator.onLine;
  console.log(isOnline ? 'User is online' : 'User is offline');
  
  // Trigger security validation immediately when coming online
  if (isOnline) {
    runSecurityValidation();
  }
}

// Initialize heartbeat on app load
startHeartbeat();

2. Conditional Security Validation (Only When Online) #

Wrap your credential/security checks in a function that only runs when the user is confirmed online. We’ll also cache the validation result locally for offline use (with caveats about security):

async function runSecurityValidation() {
  if (!isOnline) return;

  try {
    // Replace with your actual credential validation endpoint
    const authToken = localStorage.getItem('authToken');
    const response = await fetch('/api/validate-credentials', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
      }
    });

    if (response.ok) {
      const result = await response.json();
      localStorage.setItem('isCredentialsValid', result.isValid ? 'true' : 'false');
    } else {
      // Handle server errors (e.g., invalid token)
      localStorage.setItem('isCredentialsValid', 'false');
      alert('Your session has expired. Please log in again when online.');
    }
  } catch (err) {
    console.error('Validation failed:', err);
    // Mark as pending to retry next time online
    localStorage.setItem('isCredentialsValid', 'pending');
  }
}

3. Offline-Friendly Feature Access #

When users try to access sensitive features, check their online status first. If offline, rely on the cached validation result (but make sure to remind users this is temporary):

document.getElementById('access-sensitive-content').addEventListener('click', () => {
  if (isOnline) {
    // Online: Validate first, then allow access
    runSecurityValidation().then(() => {
      if (localStorage.getItem('isCredentialsValid') === 'true') {
        loadOnlineSensitiveContent();
      }
    });
  } else {
    // Offline: Use cached validation (with a warning)
    const cachedValidity = localStorage.getItem('isCredentialsValid');
    if (cachedValidity === 'true') {
      alert('Accessing offline cached content. Your credentials will be re-validated when online.');
      loadOfflineSensitiveContent();
    } else {
      alert('Cannot verify your credentials offline. Please connect to the internet to access this feature.');
    }
  }
});

4. Key Offline Adaptation Tips #

• Cache Strategically: Use Service Workers or IndexedDB to cache non-sensitive app resources and data. Only cache sensitive data after successful online validation.
• Queue Offline Actions: If users perform actions that require security checks (e.g., submitting a form), queue them locally and sync them automatically when online (with re-validation).
• Limit Local Trust: Never treat cached validation results as permanent. Always re-validate as soon as the user comes back online.
• Avoid Exposing Sensitive Logic: Keep all security validation logic server-side—never run sensitive checks in the client when offline.

内容的提问来源于stack exchange，提问作者metree joseph