Offline - Connection Status Monitoring

Prerequisites

• Runtime: None required (pure CSS/JS library)
• Browser Support: Modern Chrome, Firefox, Safari, and IE8+
• Dependencies: None

Installation

1. Download the files:

   • JavaScript: offline.min.js
   • CSS Theme: Choose from available themes
   • Language files: Optional, from languages directory

2. Include in your HTML:

   <link rel="stylesheet" href="path/to/offline-theme-chrome.css">
   <script src="path/to/offline.min.js"></script>
   

3. Optional: Include language file if needed:

   <script src="path/to/offline-lang-en.js"></script>
   

Configuration

Basic Options

Set configuration options after including the script:

Offline.options = {
  checkOnLoad: false,           // Check connection on page load
  interceptRequests: true,      // Monitor AJAX requests
  reconnect: {
    initialDelay: 3,            // Initial delay before reconnect (seconds)
    delay: (1.5 * last delay, capped at 1 hour)
  },
  requests: true,               // Store and remake failed requests
  game: false                   // Enable snake game (requires js/snake.js)
};

Connection Check Configuration

Change the URL used for connection testing:

Offline.options = {
  checks: {
    xhr: {
      url: '/connection-test'   // Custom endpoint for connection testing
    }
  }
};

For cross-domain testing, use the image method:

Offline.options = {
  checks: {
    image: {
      url: 'my-image.gif'
    },
    active: 'image'
  }
};

Build & Run

Development

No build process required. Simply include the files in your HTML as shown in the Installation section.

Production

1. Ensure all files are minified (already provided as offline.min.js)
2. Host the CSS, JS, and any language files on your production server
3. Update file paths in your HTML to point to production locations

Deployment

Since this is a client-side library, deployment is straightforward:

1. Static Hosting: Upload files to any static hosting service (Netlify, Vercel, GitHub Pages, AWS S3)
2. CDN: Consider hosting the JS file on a CDN for faster loading
3. Package Managers: Available via npm and other package managers if you prefer to include it in your build process

Troubleshooting

Common Issues

1. 404 Errors in Console:

   • Default connection check looks for /favicon.ico
   • Solution: Either add a favicon or configure a custom endpoint:

     Offline.options = {checks: {xhr: {url: '/connection-test'}}};
     

2. CORS Issues:

   • Connection check must be same-origin (same protocol, domain, and port)
   • Solution: Add Access-Control headers to your endpoint or use the image method for cross-domain checks

3. No Visual Indicator:

   • Ensure you've included the CSS theme file
   • If using only the JavaScript API, no UI will be shown (this is expected)

4. Connection Detection Not Working:

   • Some browsers (Safari, old IE) don't support offline events
   • Offline falls back to less accurate detection methods in these cases

Testing

• Simulate Offline: Disconnect your internet connection or use the simulator
• Force Connection States: Set localStorage.OFFLINE_SIMULATE to 'up' or 'down' for testing

Events

Listen for connection status changes:

Offline.on('up', function() {
  console.log('Connection restored');
});

Offline.on('down', function() {
  console.log('Connection lost');
});