Prise en charge hors ligne et synchronisation en arrière-plan
Mise en cache des réponses d’API, IndexedDB pour les données hors ligne et synchronisation en arrière-plan des actions différées
Prise en charge hors ligne et synchronisation en arrière-plan est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Penser hors ligne d’abord
Une véritable prise en charge du mode hors ligne signifie que l’application continue de fonctionner sans réseau : les lectures proviennent d’un stockage local et les écritures sont mises en file d’attente, puis synchronisées lorsque la connexion revient.
IndexedDB pour le stockage local
IndexedDB est le stockage volumineux, structuré et asynchrone du navigateur. Son interface brute est verbeuse, c’est pourquoi la plupart des applications utilisent la petite bibliothèque d’encapsulation idb.
npm install idbOuvrir une base de données avec idb
openDB renvoie une référence de base de données fondée sur les promesses. Définissez les magasins d’objets dans la fonction de rappel 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 });
}
});Lire et écrire
Utilisez get, getAll et put pour lire et stocker des enregistrements. Ces fonctions renvoient des promesses que vous pouvez attendre.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Détecter le mode hors ligne avec navigator.onLine
navigator.onLine est une valeur booléenne qui indique l’état de la connexion. Lisez-la pour choisir entre le comportement réseau et le comportement local.
if (!navigator.onLine) {
// work from IndexedDB only
}Réagir aux événements de connectivité
La fenêtre déclenche les événements online et offline. Associez-leur une référence réactive afin que l’interface reflète l’état en temps réel.
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);
});Mettre les modifications en file d’attente hors ligne
Lorsqu’une écriture survient hors ligne, stockez-la dans un magasin de file d’attente des envois au lieu de la transmettre. L’interface est mise à jour de manière optimiste à partir de l’état local.
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);
}
}Synchroniser lors de la reconnexion
Lorsque l’événement online est déclenché, videz la file d’attente des envois : rejouez chaque modification mise en attente sur le serveur, puis effacez-la.
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);L’interface de synchronisation en arrière-plan
Pour synchroniser les données même après la fermeture de l’onglet, l’interface de synchronisation en arrière-plan du worker de service enregistre une étiquette de synchronisation que le navigateur déclenche lorsque la connexion revient.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Gérer la synchronisation dans le worker
Le worker de service écoute l’événement sync et exécute la logique de vidage en arrière-plan.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Considérations relatives aux conflits
La relecture des écritures mises en file d’attente peut entrer en conflit avec les modifications du serveur. Utilisez des versions, des horodatages ou des règles donnant priorité à la dernière écriture, et signalez les conflits non résolus à l’utilisateur.
Vérification rapide
Comment faut-il gérer les écritures lorsque l’application est hors ligne ?
Récapitulatif
La prise en charge du mode hors ligne stocke les données dans IndexedDB (via la bibliothèque idb), détecte la connectivité avec navigator.onLine et les événements online/offline, place les mutations dans une boîte d’envoi lorsqu’il n’y a pas de connexion, puis les synchronise lors de la reconnexion — éventuellement avec l’API Background Sync du service worker. Prévoyez la gestion des conflits lors de la relecture des écritures mises en file d’attente.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Prise en charge hors ligne et synchronisation en arrière-plan » est-elle gratuite ?
Oui — le texte complet de « Prise en charge hors ligne et synchronisation en arrière-plan » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Prise en charge hors ligne et synchronisation en arrière-plan » ?
Mise en cache des réponses d’API, IndexedDB pour les données hors ligne et synchronisation en arrière-plan des actions différées Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Prise en charge hors ligne et synchronisation en arrière-plan » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer vite-plugin-pwa
- Stratégies de Service Worker
- Prise en charge hors ligne et synchronisation en arrière-plan
- Notifications push dans une PWA Vue