Özet - Offline destek
- React Native kursu
- İleri seviye
- Ders 36/83
- 5 dk
NetInfo, cache ve sync'i birleştirerek bir offline-first uygulama yazarsın.
Özet - Çevrimdışı
Bu grupta NetInfo ile ağ durumu sorgulamayı, çevrimdışı önbellek kurmayı, senkronizasyonu tetiklemeyi, çatışma çözümünü ve yeniden deneme kuyruğunu gördün. Bir çevrimdışı uygulamanın çekirdeği bu beş parçadan oluşur.
Özette ağ durumu, önbellek ve senkronizasyonu tek bir uygulamada birleştireceğiz. Bu üç parça together gerçek bir çevrimdışı akış oluşturur. Şimdi bunları birleştirelim.
Uygulama Özet - Ağ durumunu sorgula
Boş checkOnline işlevini tamamla. const state = await NetInfo.fetch() çağır. return state.isConnected ile bağlantı durumunu döndür.
Başlangıç kodu
import NetInfo from '@react-native-community/netinfo';
export async function checkOnline() {
// ağ durumunu sorgula ve isConnected döndür
}Örnek çözüm
const state = await NetInfo.fetch();
return state.isConnected;Uygulama Özet - Çatışmayı çöz
resolveConflict işlevini tamamla. Parametre olarak local ve server alır. if (local.updatedAt > server.updatedAt) return local; else return server yaz.
Başlangıç kodu
export function resolveConflict(local, server) {
// last-write-wins ile çatışmayı çöz
}Örnek çözüm
if (local.updatedAt > server.updatedAt) return local;
return server;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Ağ durumu işlevini yaz
const state = await NetInfo.____();const state = await NetInfo.fetch();Açıklama: fetch anlık ağ durumunu verir.
2 Akış parçasını rolüne eşle
| Kavram | Anlamı |
|---|---|
NetInfo.fetch() |
Ağ durumu |
AsyncStorage.getItem |
Önbellek okur |
syncQueue |
Kuyruğu gönderir |
resolveConflict |
Çatışmayı çözer |