Vue Academy · Pelajaran

Dukungan Offline dan Sinkronisasi Latar Belakang

Menyimpan respons API, IndexedDB untuk data offline, serta sinkronisasi latar belakang untuk tindakan tertunda.

Dukungan Offline dan Sinkronisasi Latar Belakang adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Pola Luring Terlebih Dahulu

Dukungan luring yang sesungguhnya berarti aplikasi tetap berfungsi tanpa jaringan: pembacaan berasal dari penyimpanan lokal dan penulisan dimasukkan ke antrean, lalu disinkronkan saat konektivitas kembali.

IndexedDB untuk Penyimpanan Lokal

IndexedDB adalah penyimpanan asinkron terstruktur berukuran besar milik peramban. API mentahnya bertele-tele, sehingga sebagian besar aplikasi menggunakan pustaka pembungkus kecil idb.

npm install idb

Membuka Basis Data dengan idb

openDB mengembalikan pegangan basis data berbasis janji. Tentukan penyimpanan objek dalam fungsi panggilan balik upgrade.

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 });
  }
});

Membaca dan Menulis

Gunakan get, getAll, dan put untuk membaca serta menyimpan rekaman. Semua fungsi tersebut mengembalikan hasil yang dapat Anda tunggu.

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

Mendeteksi Kondisi Luring dengan navigator.onLine

navigator.onLine adalah nilai boolean yang menunjukkan konektivitas. Bacalah nilainya untuk memilih perilaku jaringan atau lokal.

if (!navigator.onLine) {
  // work from IndexedDB only
}

Merespons Peristiwa Konektivitas

Jendela memicu peristiwa online dan offline. Hubungkan ref reaktif ke peristiwa tersebut agar antarmuka pengguna mencerminkan status secara langsung.

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);
});

Mengantrikan Perubahan Saat Luring

Saat penulisan terjadi dalam kondisi luring, simpan perubahan tersebut di penyimpanan antrean keluar, bukan mengirimkannya. Antarmuka pengguna diperbarui secara optimistis dari status lokal.

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);
  }
}

Menyinkronkan Saat Terhubung Kembali

Saat peristiwa online dipicu, kosongkan antrean keluar: jalankan ulang setiap perubahan yang diantrikan terhadap peladen, lalu hapus antrean tersebut.

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);

API Sinkronisasi Latar Belakang

Untuk melakukan sinkronisasi bahkan setelah tab ditutup, API Sinkronisasi Latar Belakang milik pekerja layanan mendaftarkan label sinkronisasi yang akan dipicu peramban setelah konektivitas kembali.

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

Menangani Sinkronisasi di Worker

Pekerja layanan mendengarkan peristiwa sync dan menjalankan logika pengosongan antrean di latar belakang.

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

Pertimbangan Konflik

Memutar ulang operasi penulisan yang diantrekan dapat menimbulkan konflik dengan perubahan pada server. Gunakan versi, cap waktu, atau aturan penulisan terakhir menang, lalu tampilkan konflik yang belum terselesaikan kepada pengguna.

Pemeriksaan Singkat

Bagaimana operasi penulisan sebaiknya ditangani saat aplikasi sedang luring?

Ringkasan

Dukungan luring menyimpan data di IndexedDB (melalui pustaka idb), mendeteksi konektivitas dengan navigator.onLine dan peristiwa online/offline, mengantrekan perubahan di kotak keluar saat luring, lalu menyinkronkannya ketika tersambung kembali—secara opsional dengan API Sinkronisasi Latar Belakang pekerja layanan. Rencanakan penanganan konflik saat memutar ulang operasi penulisan yang diantrekan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dukungan Offline dan Sinkronisasi Latar Belakang” gratis?

Ya — teks lengkap “Dukungan Offline dan Sinkronisasi Latar Belakang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dukungan Offline dan Sinkronisasi Latar Belakang”?

Menyimpan respons API, IndexedDB untuk data offline, serta sinkronisasi latar belakang untuk tindakan tertunda. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Dukungan Offline dan Sinkronisasi Latar Belakang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan vite-plugin-pwa
Strategi Service Worker
Dukungan Offline dan Sinkronisasi Latar Belakang
Notifikasi Push di Vue PWA

← Kembali ke Vue Academy