Offline
- React Native kursu
- İleri seviye
- Ders 82/83
- 6 dk
Offline destek ve cache eklersin.
Offline cache nedir?
Offline cache, uygulamanın az bağlantılı ortamda da çalışmasını sağlar. @react-native-async-storage/async-storage ile görevleri cihaza kaydeder; @react-native-async-storage/async-storage anahtar-değer deposudur. İnternet olunca API'den yenilerini çeker, olmayınca cache'ten okur.
NetInfo kütüphanesi bağlantı durumunu izler: online mı offline mı. useNetInfo() hook'u bu durumu state olarak verir. Önce cache yüklenir, sonra ağ varsa API güncellenir. Bu desen stale-while-revalidate olarak bilinir; kullanıcı anında içerik görür, arka planda yenilenir.
Uygulama Cache yükleme akışı ekle
Önceki kodun üstüne bir loadCache işlevi ekle. AsyncStorage.getItem('tasks') çağrısı yapsın; dönen değer varsa JSON.parse ile çözüp setTasks ile yazsın.
Başlangıç kodu
import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}
export function useCamera() {
const [photo, setPhoto] = useState(null);
const takePhoto = async () => {
setPhoto('photo-uri');
};
return { photo, takePhoto };
}
// loadCache işlevini buraya ekleÖrnek çözüm
import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}
export function useCamera() {
const [photo, setPhoto] = useState(null);
const takePhoto = async () => {
setPhoto('photo-uri');
};
return { photo, takePhoto };
}
async function loadCache() {
const raw = await AsyncStorage.getItem('tasks');
if (raw) {
setTasks(JSON.parse(raw));
}
}NetInfo ile bağlantı izle
useNetInfo() hook'u bağlantı durumunu verir. isConnected alanı true ise online, false ise offline. Buna göre API çağrısı atıp atmama kararını verirsin.
Örnek: const net = useNetInfo(); if (net.isConnected) { fetchTasks(); }. Bağlantı kesilince cache'ten okumaya devam edersin; kullanıcı fark etmez. Bağlantı gelince API'den güncel veriyi çekip cache'i yenilersin. Bu akış, saha uygulamalarının temelidir; her an internet olmayabilir.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 NetInfo isConnected false iken ne yapılır?
const net = useNetInfo();- Uygulama kapanır
- Cache'ten okunur Doğru cevap
- Yeni görev eklenir
- Fotoğraf çekilir
Açıklama: Offline iken cache'ten okunur.
2 AsyncStoragegetItem çağrısı
const raw = await AsyncStorage.____('tasks');const raw = await AsyncStorage.getItem('tasks');Açıklama: getItem anahtara karşılık değeri okur.
3 Akışı rolüne eşle
| Kavram | Anlamı |
|---|---|
AsyncStorage |
Cihazda saklar |
NetInfo |
Bağlantı izler |
getItem |
Değer okur |
setItem |
Değer yazar |