Chapter 8 of 12 ~12 min read

Network & HTTP

Side-by-side Cordova vs Capacitor — practical migration with working code.


Network Status

Cordova
// cordova-plugin-network-information
document.addEventListener('deviceready', () => {
  const state = navigator.connection.type;
  if (state === Connection.NONE) {
    alert('No network!');
  }
});

document.addEventListener('online', () => {
  console.log('Online!');
});
document.addEventListener('offline', () => {
  console.log('Offline!');
});
Capacitor
import { Network } from '@capacitor/network';

// Get current status
const status = await Network.getStatus();
console.log('Connected:', status.connected);
console.log('Type:', status.connectionType);
// connectionType: 'wifi' | 'cellular' | 'none' | 'unknown'

// Listen for changes
const handler = Network.addListener(
  'networkStatusChange',
  (status) => {
    console.log('Network changed:', status.connected);
    if (!status.connected) {
      showOfflineBanner();
    }
  }
);

// Cleanup (in component destroy):
handler.remove();

HTTP Requests

Cordova advanced-http
// cordova-plugin-advanced-http
cordova.plugin.http.get(
  'https://api.example.com/users',
  { page: 1 },
  { 'Authorization': 'Bearer token' },
  function(response) {
    const data = JSON.parse(response.data);
    console.log(data);
  },
  function(response) {
    console.error('Error:', response.error);
  }
);
Capacitor — use Axios or Fetch
// Capacitor doesn't wrap HTTP — use standard APIs!
// Recommended: Axios

import axios from 'axios';

async function getUsers() {
  try {
    const { data } = await axios.get(
      'https://api.example.com/users',
      {
        params: { page: 1 },
        headers: { Authorization: 'Bearer token' }
      }
    );
    return data;
  } catch (err) {
    if (axios.isAxiosError(err)) {
      console.error('HTTP error:', err.response?.status);
    }
    throw err;
  }
}
CORS note

On native (Android/iOS), CORS doesn't apply — requests go from the native layer. On web (ionic serve), you may need a proxy. Use @capacitor/preferences for native-only scenarios or configure your backend to allow capacitor://localhost.