Çevrimdışı Destek ve Arka Plan Senkronizasyonu
API yanıtlarını önbelleğe alma, çevrimdışı veriler için IndexedDB ve ertelenmiş işlemler için arka plan senkronizasyonu.
Çevrimdışı Destek ve Arka Plan Senkronizasyonu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Çevrimdışı Öncelikli Düşünme
Gerçek çevrimdışı destek, uygulamanın ağ olmadan da çalışmaya devam etmesi anlamına gelir: okumalar yerel depodan gelir, yazmalar kuyruğa alınır ve bağlantı geri geldiğinde eşzamanlanır.
Yerel Depolama için IndexedDB
IndexedDB, tarayıcının büyük, yapılandırılmış ve eşzamansız depolama alanıdır. Ham API'si ayrıntılı olduğundan çoğu uygulama küçük idb sarmalayıcı kitaplığını kullanır.
npm install idbidb ile Veritabanı Açma
openDB, promise tabanlı bir veritabanı tanıtıcısı döndürür. Nesne depolarını upgrade geri çağırmasında tanımlayın.
import { openDB } from "idb";
const db = await openDB("app-db", 1, {
upgrade(db) {
db.createObjectStore("todos", { keyPath: "id" });
db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
}
});Okuma ve Yazma
Kayıtları okumak ve depolamak için get, getAll ve put kullanın. Bunlar bekleyebileceğiniz promise'ler döndürür.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");navigator.onLine ile Çevrimdışıyı Algılama
navigator.onLine, bağlantı durumunu belirten bir boole değeridir. Ağ ve yerel davranış arasında seçim yapmak için bu değeri okuyun.
if (!navigator.onLine) {
// work from IndexedDB only
}Bağlantı Olaylarına Tepki Verme
window, online ve offline olaylarını yayınlar. Kullanıcı arayüzünün durumu anlık olarak yansıtması için bunlara reaktif bir başvuru bağlayın.
import { ref, onMounted, onUnmounted } from "vue";
const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
window.addEventListener("online", on);
window.addEventListener("offline", off);
});
onUnmounted(() => {
window.removeEventListener("online", on);
window.removeEventListener("offline", off);
});Değişiklikleri Çevrimdışı Sıraya Alma
Çevrimdışıyken bir yazma işlemi gerçekleştiğinde, bunu göndermek yerine bir giden kutusu deposunda saklayın. Kullanıcı arayüzü yerel durumdan iyimser biçimde güncellenir.
async function saveTodo(todo) {
await db.put("todos", todo);
if (!navigator.onLine) {
await db.add("outbox", { type: "saveTodo", payload: todo });
} else {
await api.save(todo);
}
}Yeniden Bağlanınca Eşzamanlama
online olayı yayınlandığında giden kutusunu boşaltın: kuyruğa alınmış her değişikliği sunucuda yeniden uygulayın, ardından giden kutusunu temizleyin.
async function flushOutbox() {
const items = await db.getAll("outbox");
for (const item of items) {
await api.send(item);
await db.delete("outbox", item.id);
}
}
window.addEventListener("online", flushOutbox);Arka Plan Eşzamanlama API'si
Sekme kapandıktan sonra bile eşzamanlama yapmak için service worker'ın Arka Plan Eşzamanlama API'si bir eşzamanlama etiketi kaydeder; tarayıcı, bağlantı geri geldiğinde bu etiketi çalıştırır.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Çalışanda Eşzamanlamayı Yönetme
Service worker, sync olayını dinler ve boşaltma mantığını arka planda çalıştırır.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Çakışmalarla İlgili Hususlar
Kuyruğa alınmış yazma işlemlerinin yeniden oynatılması, sunucudaki değişikliklerle çakışabilir. Sürümleri, zaman damgalarını veya son yazma kazanır kurallarını kullanın ve çözülemeyen çakışmaları kullanıcıya gösterin.
Hızlı Kontrol
Uygulama çevrimdışıyken yazma işlemleri nasıl ele alınmalıdır?
Özet
Çevrimdışı destek, verileri IndexedDB'de (idb kitaplığı aracılığıyla) depolar, bağlantıyı navigator.onLine ve online/offline olaylarıyla algılar, çevrimdışıyken değişiklik işlemlerini giden kutusunda kuyruğa alır ve yeniden bağlanıldığında senkronize eder; isteğe bağlı olarak hizmet çalışanı Arka Plan Senkronizasyonu API'si de kullanılabilir. Kuyruğa alınmış yazma işlemlerini yeniden oynatırken oluşabilecek çakışmaları planlayın.
Sıkça Sorulan Sorular
“Çevrimdışı Destek ve Arka Plan Senkronizasyonu” dersi ücretsiz mi?
Evet — “Çevrimdışı Destek ve Arka Plan Senkronizasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Çevrimdışı Destek ve Arka Plan Senkronizasyonu” dersinde ne öğreneceğim?
API yanıtlarını önbelleğe alma, çevrimdışı veriler için IndexedDB ve ertelenmiş işlemler için arka plan senkronizasyonu. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Çevrimdışı Destek ve Arka Plan Senkronizasyonu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- vite-plugin-pwa Kurulumu
- Service Worker Stratejileri
- Çevrimdışı Destek ve Arka Plan Senkronizasyonu
- Vue PWA'de Push Bildirimleri