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.