Offline

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.

Örnek çözümü göster

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.

Kendini test et

NetInfo isConnected false iken ne yapılır?
```
const net = useNetInfo();
```
- Uygulama kapanır
- Cache'ten okunur
- Yeni görev eklenir
- Fotoğraf çekilir
Cevabı göster

Cache'ten okunur — Offline iken cache'ten okunur.

AsyncStoragegetItem çağrısı

const raw = await AsyncStorage.____('tasks');

Cevabı göster

const raw = await AsyncStorage.getItem('tasks');

Akışı rolüne eşle

AsyncStorage

Cihazda saklar
NetInfo

Bağlantı izler
getItem

Değer okur
setItem

Değer yazar

Sıradaki ders: Birleştirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler