`navigator.serviceWorker.register / caches.open` în JavaScript

Stocare și dispozitiv Toate browserele moderne (doar HTTPS)

Instalează un service worker (pentru funcționare offline și notificări push) și lucrează cu cache-ul lui.

Sintaxă

await navigator.serviceWorker.register("/sw.js")
const cache = await caches.open("v1")

Ce face `navigator.serviceWorker.register / caches.open`

Un service worker este un script care rulează separat de pagină și poate intercepta cererile acesteia (evenimentul fetch). Cu el, un site poate funcționa offline și poate fi instalat ca aplicație (PWA). register îl instalează și returnează o promisiune cu înregistrarea.

caches.open(nume) deschide (sau creează) un cache cu nume, în care salvezi perechi cerere–răspuns cu add, addAll, put și le citești cu match. Este folosit mai ales în service worker, dar există și în pagină.

Parametri

Parametru	Descriere
`script`	Pentru register: adresa fișierului service worker.
`nume`	Pentru caches.open: numele cache-ului.

Ce returnează

O Promise (cu înregistrarea, respectiv cu cache-ul).

Exemple

Exemplul 1: Înregistrare în pagină și cache în service worker

// în pagină
if ("serviceWorker" in navigator) {
  const inreg = await navigator.serviceWorker.register("/sw.js");
  console.log("înregistrat pentru", inreg.scope);
}

// în /sw.js
self.addEventListener("install", (e) => {
  e.waitUntil(caches.open("site-v1").then((cache) => cache.addAll(["/", "/stil.css", "/app.js"])));
});
self.addEventListener("fetch", (e) => {
  e.respondWith(caches.match(e.request).then((salvat) => salvat ?? fetch(e.request)));
});

Rezultat în browser

înregistrat pentru https://www.exemplu.ro/

Greșeli frecvente

Pui sw.js într-un subdirector (de exemplu /js/sw.js). Service worker-ul controlează doar paginile din acel director și din subdirectoarele lui.
Uiți să schimbi numele cache-ului la o versiune nouă a site-ului, iar vizitatorii primesc la nesfârșit fișierele vechi.

Comenzi înrudite

fetch: Trimite o cerere HTTP la un server și primește răspunsul, fără reîncărcarea paginii.
Notification: Afișează notificări ale sistemului de operare, după ce utilizatorul a dat permisiunea.
Response (json, text, blob): Răspunsul unei cereri fetch: starea, antetele și metodele care citesc conținutul ca JSON, text sau date binare.

Ce face navigator.serviceWorker.register / caches.open